基于Hexo框架的博客搭建

搭建基于hexo框架的个人博客，并配合fluid主题进行博客的个性化设置

0. 引言

一直都想做一个自己的网站，来记录自己觉得有意义的事情，从零开始手撸 HTML 代码再部署又太麻烦了，自己做出来还不一定好看，所以最后决定用现成的博客框架配合上自己喜欢的主题来做一个博客网站。上网查了一通，发现 Hexo 这个静态的博客框架比较合适我，配置和部署也都比较简单。查文档搭建完博客之后，个人认为 Hexo 的默认主题不是很好看，就在 Hexo 官方展示的主题库里选了 Fluid 这个主题来代替。

1. 安装 node.js

到 Node 官网下载对应系统的 node.js 安装包安装即可，安装完成后可以将镜像源改为国内的淘宝镜像源，加快包的下载速度。

node -v # node 版本，可检测 node 是否安装成功
npm -v  # npm  版本，可检测 npm  是否安装成功
npm config set registry https://registry.npm.taobao.org

2. 安装 HEXO 模块

npm install hexo-cli -g # 全局安装
hexo -v # hexo 版本，可检测 hexo 是否安装成功

3. 初始化博客

创建博客目录user/hexo/blog/，并进入目录初始化博客

hexo init

4. 新建博文

hexo new "My Blog"

以上命令​执行完后会在./source/_posts/下生成My-Blog.md文件，回到主目录执行以下命令：

hexo clean    # 清空之前渲染生成的网站文件
hexo generate # 重新渲染生成新的网站文件

新建博文的模板文件在博客目录下的scaffolds文件夹中，可根据需求进行自定义。

5. 启动博客

博客写完后，可以通过本地服务器预览最终渲染的网页效果，执行以下命令启动本地服务器：

hexo start

然后打开浏览器，输入网址 http://localhost:4000/ 就可以预览网站内容了。

6. 将博客部署到 GitHub Page

1. 转到博客主目录安装一键部署插件

npm install hexo-deployer-git --save

2. 更改_config.yml配置

# _config_yml
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
	type: git
	repo: https://github.com/[username]/[username].github.io.git
	branch: master

3. 一键部署

首先在Github上创建一个名为[username].github.io的空仓库，[username]必须和自己的Github用户名一致。此外采用hexo-deployer-git插件部署时，建议将仓库设为私有，这样虽然会上传站点文件，但生成的站点文件对外是不可见的；Hexo官方也提供了通过Travis CI来将博客部署到Git Pages上的方法，也需要上传站点的源文件，而且是公开的。

hexo deploy # 将生成的网站文件发布到 Git Page 上

只有Github Pro用户才能在部署Git Pages的仓库私有的同时，通过[username].github.io域名进行访问，但不管是普通用户还是Pro用户，都不建议在Git Pages上发布个人敏感信息。

7. 版本更新

首先全局更新Hexo的命令行工具hexo-cli：

hexo version # 检查当前 hexo 版本
npm i hexo-cli -g # 全局更新 hexo-cli
hexo version # 检查更新后的 hexo 版本

然后更新全局包：

npm i npm-check -g # 检查全局需要升级的包
npm i npm-upgrade -g # 更新 package.json
npm update -g # 更新全局包

最后更新博客目录下的包，转到博客根目录执行：

npm-check # 检查当前目录下需要更新的包
npm-upgrade # 更新 package.json
npm update --save # 更新当前目录下的包，并添加依赖

8. 个性化主题

1. clone Fluid 主题到博客目录下的主题文件夹中

git clone https://github.com/fluid-dev/hexo-theme-fluid.git themes/fluid

2. 在博客配置文件 _config.yml 中配置新的主题

# _config_yml
theme: fluid