liberator

天底下没有这样的道理,你不喜欢我,才是正常的

关于使用github+hexo进行博客搭建

本次搭建需要git和js的环境,接下来按照步骤讲一下:

git安装

官方下载地址:https://git-scm.com/download/win

注意需安装windows-64版本的,在安装好后,直接一路点击next即可,所有的都是默认的(也包括添加到PATH)

安装后验证: 在 cmd 中输入命令 node -v, 查看 Node 版本

node.js安装

官方下载地址:https://nodejs.org/en/

同样安装好后一路直接点击next即可

安装好后就可输入node-v,查看Node版本

安装并初始化hexo

执行以下命令

1
npm install -g hexo     # 通过npm安装hexo

其中,-g 指定全局安装,之后可以在任意位置使用 hexo 命令
接下来,进入到你要放博客的静态文件的位置,右键,选择 Git Bash Here,打开 Git Bash 之后,输入

1
2
3
hexo init blog      # 初始化创建,会在你所在位置创建 blog 文件夹
cd blog # 进入 blog 目录
npm install # 进一步安装hexo所需文件

等待 hexo 安装完成。。。
安装完成后,会出现一下这些文件夹以及文件

其中 source 就是存放后面我们写博客的源文件的文件夹
接下来输入

1
2
3
hexo clean          # 清除所有记录
hexo generate # 生成静态网页
hexo s # 本地访问

访问其中域名,会出现下图:

主题设置

如果你不喜欢现在的主题样式可以选择换一个,首先是 官方主题,可以在里面下载自己喜欢的主题。
个人现在使用的是 hexo-theme-yilia
这里就以这个主题为例:
先按 Ctrl + C,断开刚刚的服务,然后输入

1
git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia

下载后的主题在 themes 里面,如图:

回到 blog 文件夹,用记事本打开 _config.yml ,修改里面的 theme: landscapetheme: yilia
之后重新输入

1
2
3
hexo clean          # 清除所有记录
hexo generate # 生成静态网页
hexo s # 本地访问

再访问上面那个本地网址,就可以看到主题已经切换了

解决图片路径问题

绝大多数资料都是安装hexo-asset-image的插件,但是用到后面会发现对于markdown图片路径没有用啊!比出现问题更折磨人的是遇上一堆错误的解决方法…如果用hexo-asset-image后面可能面临各种各样的报错

我想要寻找在本地和网页上都能显示的办法,终于发现了一款插件hexo-image-link,是将markdown图片路径转换为asset_img语法,使得图片能够同时显示在typora和hexo上。使用命令下载:

1
2
3
4
$ npm install hexo-image-link --save		或者

$ npm install -g cnpm --registry=https://registry.npm.taobao.org 下载cnpm
$ cnpm install hexo-image-link --save 使用cnpm下载

接下来还需要修改一下 _config.yml

1
2
3
……
post_asset_folder: true
……

之后你只需要学博客是输入

1
hexo new test       # test就是新博客文章的名字

就会在 source/_posts 下,会同时生成test目录和test.md 网页,将需要的图片放置到test目录下,test.md就可以正常解析了。如图:

配置SSH KEY

为什么要配置这个呢?因为你提交代码肯定要拥有你的 github 权限才可以,但是直接使用用户名和密码太不安全了,所以我们使用ssh key来解决本地和服务器的连接问题。
先输入

1
cd ~/.ssh #检查本机是否已存在的ssh密钥

如果提示:No such file or directory 说明你是第一次使用git。

1
ssh-keygen -t rsa -C "邮件地址"

然后连续3次回车,最终会生成一个文件在用户目录下,打开用户目录(C:\用户\你的用户名\),找到.ssh\id_rsa.pub文件,记事本打开并复制里面的内容,打开你的github主页,右上角进入设置 -> SSH公钥

在新的SSH密钥那里将我们上面复制的内容粘贴进去即可

测试SSH连接是否成功

1
ssh -T git@github.com  #注意,'T'是大写的

如果提示Are you sure you want to continue connecting (yes/no)?,输入yes,然后会看到:

1
Hi 你的github用户名! You’ve successfully authenticated, but GitHub does not provide shell access.

看到这个信息说明SSH已配置成功!
接下来还需要配置用户名和邮箱:

1
2
git config --global user.name "xxx"  #你的 github 用户名,即注册时的用户名,个人主页最大那个就是了
git config --global user.email "xxx@qq.com" #填写你的github注册邮箱

github上创建相关库

接下来讲讲怎么在github上创建相关库

在1的地方填写库名,一定是用户名.github.io

将2的地方勾上,再点击创建即可

上传到github

如果你一切都配置好了,发布上传很容易,一句 hexo d 就搞定,当然关键还是你要把所有东西配置好。
首先,ssh key肯定要配置好。
其次,配置_config.yml中有关deploy的部分:

1
2
3
4
deploy:
type: git
repo: https://github.com/用户名/仓库名 #仓库的地址
branch: master

_config.yml这里面都是一些全局配置,每个参数的意思都比较简单明了,所以就不作详细介绍了。
需要特别注意的地方是,冒号后面必须有一个空格,否则可能会出问题。

接下来我们还需要安装一个插件,在 git bash 下输入

1
npm install hexo-deployer-git --save

这下就搞定啦

Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.

Quick Start

Create a new post

1
$ hexo new "My New Post"

More info: Writing

Run server

1
$ hexo server

More info: Server

Generate static files

1
$ hexo generate

More info: Generating

Deploy to remote sites

1
$ hexo deploy

More info: Deployment

0%