使用 hexo 搭建博客网站

全局安装 hexo-cli

npm install hexo-cli -g

npm 安装速度较慢，可以切换到国内的淘宝 NPM 镜像，使用 cnpm 命令代替 npm 命令安装。

安装完成后执行 hexo - v 检查安装是否完成。

hexo -v

hexo-cli: 1.1.0
os: Darwin 18.2.0 darwin x64
http_parser: 2.8.0
node: 10.15.3
v8: 6.8.275.32-node.51
uv: 1.23.2
zlib: 1.2.11
ares: 1.15.0
modules: 64
nghttp2: 1.34.0
napi: 3
openssl: 1.1.0j
icu: 62.1
unicode: 11.0
cldr: 33.1
tz: 2018e

初始化博客工程

hexo init blog
cd blog

安装 NexT 主题

我们这里选取了 NexT 主题替换默认的 landscape 主题，当然你完全可以使用默认的 landscape 主题，或者根据自己的喜好选择其他主题。安装主题的方式非常简单，只需要将主题文件克隆至工程目录的 themes 目录下，然后修改下配置文件_config.yml 即可。

在工程目录下克隆最新版本的 next 主题

cd blog
git clone https://github.com/iissnan/hexo-theme-next themes/next

修改根目录下_config.yml 配置文件，找到 theme 字段，将 landscape 改为 next。

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: landscape

修改为

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

执行 hexo server，启动本地服务器。

hexo server

访问网址 http://localhost:4000/ 便可以看到使用 next 主题的博客网站的样子了。

将本地 hexo 工程连接到 git 远端仓库

我们用前面建立的 hexo-test 和 blog 两个工程做演示。其中本地 hexo 为 blog 目录，hexo-test 为 git 远端仓库，我们需要将本地 blog 目录里的文件提交到远端的 hexo-test 仓库。

首先，我们之前提交的 index.html 文件，我们不再需要了，先删除它。

cd hexo-test
rm -rf index.html
git add .
git commit -m 'remove index.html'
git push origin master

blog 目录 git 初始化

cd blog
git init

此时我们看到 next 目录无法直接提交，这是因为 next 目录是一个子模块 (submodule)

我们需要删除 next 目录下的.git 文件，next 目录变成一个普通文件夹，这样它就可以直接提交了。
进入 next 目录，执行 rm -rf .git 命令

cd themes/next/
rm -rf .git

此时 next 目录就可以直接提交了

执行以下命令就可以将 blog 目录里的内容提交到远端的 hexo-test 仓库了

git add .
git commit -m 'init'
git remote add origin git@github.com:mfaying/hexo-test.git
git push -f origin master 

注意，这里我的本地电脑和远端的 git 已经配置过 ssh 了，所以提交的时候不会出现权限问题。如果你连接的是自己的远端仓库，可以查找下如何进行 git 的 ssh 配置。

最后我们需要配置部署路径，修改文件_config.yml 的 deploy 字段如下：

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: git@github.com:mfaying/hexo-test.git #你的 GitHub Pages 的仓库地址
  branch: master

我们需要先安装 hexo-deployer-git 依赖包才能执行 hexo deploy 命令部署网站

npm install hexo-deployer-git --save 

执行以下命令

hexo clean # 简写 hexo c，清除缓存文件 (db.json) 和已生成的静态文件(public)
hexo generate # 简写 hexo g，生成静态文件
hexo deploy # 简写 hexo d，部署

其中 hexo g 和 hexo d 可以合并写成 hexo d -g
现在我们访问之前的链接 https://mfaying.github.io/hex…，一个静态博客网站生成了！

至此，我们其实已经完成静态博客网站的建设，后续我们将介绍一些功能和方法，使网站功能更加完备。

参考

1. 文档 |hexo
2. hexo
3. NexT 使用文档

欢迎微信关注前端阅读室