Hexo搭建博客

2018-03-10 阅读量

最近心血来潮，想弄一个属于自己搭建的博客，而不是再像第三方那样固定好的，当然也是为了长远管理，在这里记录下搭建过程。

本地环境搭建
安装hexo
主题切换
注册GitHub个人项目
hexo关联GitHub
调试

1.本地环境搭建

1.git安装(因为hexo发布是使用git发布的)

2.安Node.js(因为hexo是基于Node.js)

点击git下载，当然如果你的电脑本身已经安装好了就不用去下载了，就像我之前弄GitHub上传的时候已经下载过了。
点击Node.js下载，下载安装包，无脑下一步，安装即可。

2.安装和配置Hexo

接下来的命令都是基于终端敲指令运行的，
在安装Hexo之前先记着几个常用的指令

hexo new "postName" #新建文章
hexo new page "pageName" #新建页面
hexo generate #生成静态页面至public目录
hexo server #开启预览访问端口（默认端口4000，'ctrl + c'关闭server）
hexo deploy #将.deploy目录部署到GitHub
hexo help # 查看帮助
hexo version #查看Hexo的版本

上面的环境配置成功以后就可以使用npm安装Hexo了

1	npm install -g hexo //如果出错，就输入sudo npm install-g hexo-cli

完成后，可以在终端中cd到你想把hexo安装的文件夹下，然后在该目录依次执行以下命令

1 2	hexo init npm install（用于安装依赖包）

执行完成后，依次输入以下命令,用于浏览本地的环境。

1 2	hexo g hexo s

然后通过访问:http://localhost:4000，来访问，一个本地博客就可以看到了，值得注意的是，默认主题是landscape，如需要变主题，得自己手动修改。

到此，Hexo基本安装完成.

3.主题切换

本人的主题是 yilia这个主题，在当前项目页,输入以下命令：

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

然后在当前文件夹下，会找到一个themes的文件夹，里面有yilia的文件，如图:

这个时候修改上图中和themes同级的_config.yml文件，将里面有个theme值替换成yilia，如图：

然后，重新编译，启动：

1
2
3

hexo clean
hexo g
hexo s

访问http://localhost:4000,这时看到的页面是不是不一样了?此时，hexo的安装及主题修改已经完成了.是不是很酷?

4.注册github项目

这里默认你已经有GitHub账号了，在GitHub中创建新的项目，如下：

项目必须要遵守格式：账户名.github.io，不然接下来会有很多麻烦。并且需要勾选Initialize this repository with a README

在建好的项目右侧有个settings按钮，点击它，向下拉到GitHub Pages，你会看到那边有个网址，访问它，你将会惊奇的发现该项目已经被部署到网络上，能够通过外网来访问它

5.将hexo部署到GitHub

1.先在hexo文件夹里最外层的_config.yml文件中修改deploy参数的值，如下图：

注意这里的repo里com:后面第一个是你GitHub的名字，第二个是上面第四部创建的项目名称。

2.将Hexo与Github page联系起来，设置Git的user name和email（如果是第一次的话）

1 2	git config --global user.name "你的用户名" git config --global user.email "xxxxxxxx@xxx.com"

3.生成秘钥

1	ssh-keygen -t rsa -C "xxxxxxxx@xxx.com"

连续三个回车，生成密钥，最后得到了两个文件：id_rsa和 id_rsa.pub两个文件，
找到id_rsa.pub，(可以通过访问路径~/.ssh找到) 然后打开复制里面的内容，登录GitHub官网，在下图中添加SSH：

标题可以不写，内容就把刚复制的所有内容粘贴进去，创建即可。

4.检测SSH是否成功
输入

1	ssh -T git@github.com

测试添加ssh是否成功。如果看到Hi后面是你的用户名，就说明成功了

6.测试是否成功

这时候终端在Hexo文件夹下，然后输入下面指令

1
2
3

hexo clean
hexo g
hexo d

如果出现ERROR Deployer not found: git，就输入以下指令：

1	npm install hexo-deployer-git --save

然后输入

1 2	hexo g hexo d

成功话在浏览器输入:http://xxxxxx.github.io, 看是否现在这个网址已经是yilia主题的博客了，这样的话，博客搭建也就完成了。

7.提示方面

博客搭建完成后，可以在_config.yml文件里修改配置参数，修改完再根据下面指令运行一下(hexo d部署到外网上会有延迟，一般要等十几秒这样，可以hexo g之后，hexo s在4000那个网址上看看效果)

1 2	hexo g hexo d

8.其他补充：

1._posts文件夹里文章的命名要以2018-01-01-name的形式来命名，要不然其他命名方式会导致一些不可预期的错误，亲测。。。浪费了很多时间。

2019.6.4更新

2.引用图片：之前一直用

1	！[图片名称](url)

其中url只能填网络链接，否则就加载不出来，无法做到相对路径。

但是hexo 3之后，可以设置相对路径了：

1	{% asset_img 图片名称.格式图片说明 %}

这种引入图片的前提，需要在_config.yml配置文件中将post_asset_folder设置为true，然后再创建文章，这时候创建文章，会同时生成文章.md和文章的文件夹，我们将该文章用到的图片放入这个文章的文件夹下即可。

好了，到此结束。