开始新的折腾，Hexo博客Git-VPS部署完整记录

本文章部分知识已经有点久远了，可能有些知识会不适用，建议去参考官方文档，最近发现网友 这篇 方案 还是更合理，可以参考

很长时间没有料理博客了，算算上一次正儿八经写篇文章居然是年初…今天偶尔打开，居然没有要写点什么的欲望。

看久了WordPress，突然有点厌倦了.正好最近喜欢上MarkDown文档格式，脑子一热，索性就把WordPress舍弃了，折腾下Hexo，极简风格看上去也不错。日常就记录点打杂琐事，分享个好用的软件，完全能满足一个半吊子打杂工的需求。

Hexo博客部署方案

1. 本地编写MarkDown文档→本地Hexo解析成静态页→提交到VPS上的Git和GitHub等多仓库→Nginx对外服务→用户访问
2. 本地编写MarkDown文档→本地Hexo解析成静态页→提交到GitHub→直接用GitHub Page资源→用户访问
3. 本地编写MarkDown文档→自动同步到VPS并安装Hexo服务解析成静态页→Nginx对外服务→用户访问
4. 本地编写MarkDown文档→自动同步到VPS并安装Hexo服务解析成静态页→Hexo server对外服务→用户访问

各种方案无非是在哪解析静态页，文件怎么提交流转的不同。大家可根据自己的需求选择方案，各方案都有优缺点，这里暂且选择第一种方案。

• 第一种方案的优点是:

• VPS上只需要安装Git和Nginx，不用Git也要用其他工具把文件同步上去，那就索性装个Git自动同步吧

• 不在VPS上装Hexo服务，节省点资源

• Git提交后利用Git的post-receive完成自动部署到网站根目录

• 文件同时提交到GitHub和VPS，这样有个备份，VPS不行了直接改下DNS解析就可以无缝过渡

• Git上能保留完整的修改记录

• 当然，也有缺点:

• 需要在写文档的机器上安装Hexo，换个电脑用需要重新装

• 在解放区，GitHub同步有点坑

以后兴许会选择在VPS上部署Hexo，仍然git管理，有更新的时候自动触发VPS上编译，这样就不需要在多个工作机上安装Hexo环境了。

需要安装的环境

软件产品介绍就不写了，图片也懒得贴，有不清楚的可以参考相关官方文档或者自行google搜索。

VPS上安装

• Nginx
• 提供网站服务程序
• Git
• 自动从Git上checkout静态页到网站根目录

写文档的电脑要用到

• Node.js
• Hexo基于Node.js写的，需要提供Hexo依赖环境
• Git
• Git客户端，将静态页提交到GitHub等仓库托管服务商
  -Hexo d命令也用到git命令，能自动提交到对应的仓库
• Hexo
• MarkDown解析编译成静态页
• MarkDown编辑器
• 更好更快地写MarkDown格式文档，不屑的直接用notepad或其他代notepad编辑器也行
• 如果是编辑单个文档，这里给安利个开源，免费，跨平台，简洁，高颜值编辑器:Moeditor或者Typora，你值得拥有
• 如果是整站管理Hexo文章，那就用GitHub出的Atom吧，原生支持MarkDown，集成Git显色状态

实施步骤

GitHub设置

创建个仓库，仓库命名格式必须为:GitHub用户名.github.io，然后根据提示一直下一步即可。等有静态页提交到这个仓库就可以使用Github Pages静态主页，免费的静态站点不要白不要。

Head over to GitHub and create a new repository named username.github.io， where username is your username (or organization name) on GitHub.

如果要把自己的网站域名直接指向github page页，那么就登录页面GitHub，对着个仓库进行别名设置，设置了别名就不能用https，界面上有说明，就不贴图了。

coding page等托管商设置也大同小异

VPS设置

VPS自行购买，要兼顾搭梯子就买墙外的，要速度最好买墙内。如果你的域名有备案或者打算备案，建议买阿里云的云服务器。

Nginx配置网站目录

通用的Nginx配置方法，只是用了Nginx提供网站服务，所以记住个网站根目录，我的VPS上之前装过lnmp，直接略过。

Git设置

VPS上装Git自动同步文件到网站根目录，实现自动化部署。

安装git

以 CentOS 为例，其他操作系统请自行更换命令。

yum install git-core
#早期Git名称被占用，所以Git只能叫Git-core了，不过现在可以直接用Git名安装了
yum install git

git用户设置

装好后，创建个git用户(如果直接用root账户就不用建了)

useradd -m git  # 创建 git 用户，也可以用 adduser
passwd git # 设置密码
chmod 740 /etc/sudoers  #将新建的用户添加sudo权限
vi /etc/sudoers

在vi编辑中找到如下内容：

## Allow root to run any commands anywhere
root    ALL=(ALL)     ALL

把刚才新建的用户下面同样格式添加一行就变成

## Allow root to run any commands anywhere
root    ALL=(ALL)     ALL
git   ALL=(ALL)     ALL

搞定就可以切换到新用户生成ssh秘钥了

su git
cd ~
git config --global user.email 'youremail@example.com'
git config --global user.name 'yourusername'
ssh-keygen -t rsa -C 'youremail@example.com'
#一般默认就可以了，`.pub`是公钥，把私钥复制到本地
ssh -Tv 'vps上的git用户名@vps地址' -p 'ssh端口'  #测试ssh连接是否成功

秘钥本地生成后上传到服务器也行，生成方法是一样的，如果ssh登录一直出现需要密码，或者复制的密钥总是不对，那试试下面的方法，也推荐直接用命令拷贝

ssh-copy-id -i ~/.ssh/id_rsa.pub 'git@vps地址' -p 'ssh端口'

将生成的公钥添加到GitHub里面，参考官方帮助文档

git自动部署脚本

将网站根目录赋予git用户，就是Nginx中设置的那个网站根目录，如Hexo

cd /home/wwwroot
mkdir hexo
chown git:git -R /home/wwwroot/hexo

创建git仓库

cd ~  #这里直接放用户目录下
git init --bare hexo.git  #建立一个名字叫hexo.git的裸库

配置git hooks，新建并编辑刚刚初始化过的仓库里的hooks/post-receive

su git
cd /home/git/hexo.git/hooks
vi post-receive

输入如下内容

#!/bin/bash
unset GIT_DIR
GIT_REPO=/home/git/hexo.git #git仓库
TMP_GIT_CLONE=/tmp/hexo
PUBLIC_WWW=/home/wwwroot/hexo #网站目录
rm -rf ${TMP_GIT_CLONE}
git clone $GIT_REPO $TMP_GIT_CLONE
rm -rf ${PUBLIC_WWW}/*
cp -rf ${TMP_GIT_CLONE}/* ${PUBLIC_WWW}

保存退出后赋予该脚本可执行权限就可以了

chmod +x post-receive

更高级的用法可以自动提交百度熊掌号，刷新CDN等操作，可见：网站Git自动部署

写文档的电脑

一般是Windows操作系统，这里以Windows为例，其他操作系统就不罗列了，自己去看文档或者google一下。

Git客户端

可以安装Git Windows或者索性GitHub Desktop，完全可视化，简单。

安装完成后，登录自己的账户，配置Git根目录。

Node.js

从Node.js网站上下载安装包，一路默认下来就行，记得勾选自动配置Path，省得以后麻烦。

Hexo

安装好Node.js和Git，就可以使用npm命令安装Hexo了。

npm介绍可见:npm模块安装机制简介

启动Git Shell或者’CMD’等终端，切换到Git根目录，开始安装Hexo。

npm install hexo-cli -g #全局安装Hexo客户端
#安装完成后，创建个myHexo目录，并初始化Hexo项目
Hexo init myHexo
#这个`myHexo`目录就是Hexo博客的工作目录了，以后启动Hexo命令都要先切到这个目录下
cd myHexo
npm install  #这个命令会把需要的依赖环境都自动装上

Hexo从 3.0 开始把服务器独立成了个别模块，所以要本地调试的话，还需要安装 hexo-server 才能使用

npm install hexo-server --save

安装完成后，输入 hexo server 或简写 hexo s 命令以启动服务器，默认网站会在 http://localhost:4000 下启动。也可以指定端口如 hexo s -p 80 ，这样浏览器里只需要输入 localhost 就能访问本地调试内容了。

在服务器启动期间，Hexo 会监视文件变动并自动更新，无须重启服务。

客户端初始化完成后，在myHexo目录下应该有一堆文件了，目录结构应该这个样子的:

.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

更多说明详见Hexo官方文档

体验Hexo

Hexo设置

安装喜欢的主题

转Hexo的一个原因也是喜欢"maupassant"这个主题，简洁大气，更多的自己去官网看。

首先，去Hexo官网选择自己喜欢的主题，进入Gitshell或cmd切到刚才初始化好的Hexo工作目录，然后把主题用Git克隆到本地

git clone https://github.com/tufu9441/maupassant-hexo.git themes/maupassant

克隆完成后修改Hexo配置文件_config.yml

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: maupassant #自己用的主题叫什么就改成什么

装 maupassant 这个主题折腾了好久，本地测试的时候样式错乱，作者博客说渲染器不对，具体见下文遇到的问题。

如果要设置自己的网站在浏览器标签左侧的图标，在Hexo的 source 下放个 favicon.ico。

文件自动提交部署

主要是改 Hexo 的配置 _config.yml 和主题目录下的 _config.yml ，按自己的需求改，找官方文档或自行Google。

多仓库同步提交deploy配置

# Deployment
## Docs: https://hexo.io/docs/deployment.html
##如果出于安全或其它原因考虑，你修改了 SSH 默认的端口，那么上面 repository 的配置要做如下修改：
##repo: ssh://yourusername@server:<yourport>/~/hexo.git
##示例
deploy:
  type: git
  repo:
    github:  https://github.com/GitHubusername/example.github.io.git  #同步到GitHub
    vps:  ssh://git@example.com:22231/~/hexo.git  #同步到自己的VPS
  branch: master
  message: Hexo update

开始写作

更改文章页面模板

Hexo下的scaffolds目录里，默认存着几个md模板，按自己的需求改，也可以按自己的需求建新模板，参数字段去Hexo官方文档里看。

新建文章

用官方命令 Hexo new [layout] <title>（Hexo new 可以简写为hexo n）或者用任何编辑器新建.md文档都可以。
建好后用 Hexo g 生成静态页，用 Hexo d 则会自动发布到你配置的git仓库中去.
Hexo常用命令:

hexo clean  #清理已解析编译文件，有文件删除改名，发布后但前台没改变时使用此命令
hexo n [layout] <title>  #新建文章
hexo g  #重新解析生成html
hexo d  #发布到git或其他地方
#如果_config.xml中配置的发布地址是GitHubpage或者coding page页面，那访问对应 的仓库地址就可以看到网站效果了

Hexo有个我觉得需要改进的地方就是每次都要把全部文章重新生成，不管需不需要更新，用自动发布的命令后也会造成所有的文章都重新提交一遍。
有文章了，启动Hexo server就可以本地预览效果，编译的静态文件上传网站根目录就可以使用了。

迁移WordPress文章

首先，安装 hexo-migrator-wordpress 插件。

npm install hexo-migrator-wordpress --save

在 WordPress 仪表盘中导出数据“Tools” → “Export” → “WordPress”(详情参考WP支持页面)。

插件安装完成后，执行下列命令来迁移所有文章，source 可以是 WordPress 导出的文件路径或网址。

hexo migrate WordPress <source>
#上面的<source>就是导出的xml文件

其他平台迁移可以参考官方文档。

常见问题及其解决方案

Hexo启动失败

JS-YAML: bad indentation of a mapping entry at line …

导入WordPress文章后，启动Hexo server一堆错误，这事折腾了一个周末，按错误提示一个个去看，结果还是用人力排除法，在某篇文章里出现了某段代码，把代码重新按MarkDown格式写了一遍就好了。
可坑爹的是，报错信息里压根就没提到这里有问题…

样式错乱

maupassant主题装好后，测试出现样式错乱。这下面这俩命令反反复复，ss全局代理，换淘宝npm源都无济于事…

npm uninstall hexo-renderer-sass
npm uninstall hexo-renderer-jade
npm install hexo-renderer-jade --save
npm install hexo-renderer-sass --save

渲染器安装失败的可以先卸载再装试试，一般用npm install就会把需要的东西自动都装上

如果是因为被墙的问题，用下面的命令改成淘宝源或使用代理。

npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
npm info underscore
#如果上面配置正确这个命令会有字符串response

做完以上，有些人问题已经解决，但有些问题依旧。最后的最后，翻到主题作者页的评论的n层，原来说要安装python，而且是 python2.7 !!!安装此环境一般可成功编译 node-sass 。

hexo-renderer-sass 这个插件看了下最后一次更新是2018年，估计作者都不维护了，建议 按此方法换个插件替代 最终解决。

订阅

安装订阅插件

npm install hexo-generator-feed --save

关于页面

maupassant主题里有个关于导航菜单，默认点进去是不行的，需要自己新建个。
在Hexo的 source 目录新建个 about 文件夹，文件夹里按模板新建个 index.md，内容大致如下:

---
title: 关于本站
layout: page
comments: false
---
这里写自己的关于介绍...

多说评论框

这个第三方评论已成历史，还能用的可以试下畅言

调试的时候用的 localhost 访问，而多说是绑定了对应的域名的，所以会出现多说评论框不显示，分享那一行也样式错乱列表显示出来。

再检查下你的多说设置，就是.duoshuo.com前面那个，别填错了就可以了。

免密码登录

明明已经同步好密钥了，但仍然需要输入密码认证，多半是密钥同步内容或权限有问题，本地电脑重新生成一把密钥，然后使用ssh-copy-id 命令上传，该命令会自动处理权限。

ssh-copy-id -i ~/.ssh/id_rsa.pub 'vps上的git用户名@vps地址' -p 'ssh端口'

多仓库提交

配置方法见前文。
第一次提交的时候可能会遇到这样的错误提示

[remote rejected] HEAD -> master (branch is currently checked out)
remote: error: refusing to update checked out branch: refs/heads/master
remote: error: By default， updating the current branch in a non-bare repository
remote: error: is denied， because it will make the index and work tree inconsistent       
...
remote: error: To squelch this message and still keep the default behaviour， set
remote: error: 'receive.denyCurrentBranch' configuration variable to 'refuse'.

错误里说的很明白了，vps上的git默认设置的问题，其实已经告知改receive.denyCurrentBranch了，不想去找配置就用下面这条命令解决

git config --bool core.bare true

Git和VPS自动同步部署

这个从git自动同步到网站根目录的问题一直没解决，手动执行shell可以，但提交后不会自动部署，不知道哪里的问题…找了很多资料都没说

之前操作的时候因为VPS已有用于网站的账户，就没有新建 git 用户，原来这里默认用户名需要是 git 才可以，否则会出现不会知道执行 githooks 功能，这真的是个坑，应该哪里有用户名设置的，有空再研究下git文档。

后记

好了，这就是我的第一篇用MarkDown格式写的Hexo文章，我觉着把整个过程整理完整了，有缺漏或谬误之处欢迎留言进行指正赐教。

参考文档

• hexo docs
• 使用git搭建静态免费blog
• VPS配合Git搭建Hexo博客
• 通过 Git Hooks 自动部署 Hexo 到 VPS
• Hexo快速搭建静态博客并实现远程VPS自动部署
• 通过Hexo在GitHub搭站全记录
• 在VPS上搭建hexo博客，利用git更新