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

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

看久了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 为例,其他操作系统请自行更换命令。

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

git用户设置

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

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

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

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

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

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

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

1
2
3
4
5
6
7
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登录一直出现需要密码,或者复制的密钥总是不对,那试试下面的方法,也推荐直接用命令拷贝

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

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

git自动部署脚本

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

1
2
3
cd /home/wwwroot
mkdir hexo
chown git:git -R /home/wwwroot/hexo

创建git仓库

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

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

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

输入如下内容

1
2
3
4
5
6
7
8
9
#!/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}

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

1
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。

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

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

1
npm install hexo-server --save

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

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

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

1
2
3
4
5
6
7
8
.
├── _config.yml
├── package.json
├── scaffolds
├── source
| ├── _drafts
| └── _posts
└── themes

更多说明详见Hexo官方文档

体验Hexo

Hexo设置

安装喜欢的主题

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

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

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

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

1
2
3
4
# 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配置

1
2
3
4
5
6
7
8
9
10
11
12
# 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常用命令:

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

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

迁移WordPress文章

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

1
npm install hexo-migrator-wordpress --save

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

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

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

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

常见问题及其解决方案

Hexo启动失败

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

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

样式错乱

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

1
2
3
4
npm uninstall hexo-renderer-sass
npm uninstall hexo-renderer-jade
npm install hexo-renderer-jade --save
npm install hexo-renderer-sass --save

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

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

1
2
3
4
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年,估计作者都不维护了,建议 按此方法换个插件替代 最终解决。

订阅

安装订阅插件

1
npm install hexo-generator-feed --save

关于页面

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

1
2
3
4
5
6
---
title: 关于本站
layout: page
comments: false
---
这里写自己的关于介绍...

多说评论框

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

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

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

免密码登录

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

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

多仓库提交

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

1
2
3
4
5
6
7
[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了,不想去找配置就用下面这条命令解决

1
git config --bool core.bare true

Git和VPS自动同步部署

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

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

后记

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

参考文档