Hexo博客Git-VPS部署完整记录
很长时间没有料理博客了,算算上一次正儿八经写篇文章居然是年初...今天偶尔打开,居然没有要写点什么的欲望。
看久了WordPress,突然有点厌倦了.正好最近喜欢上MarkDown文档格式,脑子一热,索性就把WordPress舍弃了,折腾下Hexo,极简风格看上去也不错。日常就记录点打杂琐事,分享个好用的软件,完全能满足一个半吊子打杂工的需求。
Hexo博客部署方案
- 本地编写MarkDown文档→本地Hexo解析成静态页→提交到VPS上的Git和GitHub等多仓库→Nginx对外服务→用户访问
- 本地编写MarkDown文档→本地Hexo解析成静态页→提交到GitHub→直接用GitHub Page资源→用户访问
- 本地编写MarkDown文档→同步到VPS并安装Hexo服务解析成静态页→Nginx对外服务→用户访问
- 本地编写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
静态页到网站根目录
- 自动从Git上
写文档的电脑要用到
- Node.js
- Hexo基于Node.js写的,需要提供Hexo依赖环境
- Git
- Git客户端,将静态页提交到GitHub等仓库托管服务商
Hexo d
命令也用到 git 命令,能自动提交到对应的仓库
- Hexo
- MarkDown解析编译成静态页
- MarkDown编辑器
实施步骤
GitHub设置
创建个仓库,仓库命名格式必须为:GitHub用户名.github.io,然后根据提示一直下一步即可。等有静态页提交到这个仓库就可以使用Github Pages静态主页,免费的静态站点不要白不要。
Head over to GitHub and create a new repository named
username.github.io
, whereusername
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
yum install git-core
#早期Git名称被占用,所以Git只能叫Git-core了,不过现在可以直接用Git名安装了
yum install git
git用户设置
装好后,创建个git用户(这个用户名不能乱改)
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 '[email protected]'
git config --global user.name 'yourusername'
ssh-keygen -t rsa -C '[email protected]'
#一般默认就可以了,`.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:
/~/hexo.git 示例
deploy:
type: git
repo:
github: https://github.com/GitHubusername/example.github.io.git #同步到GitHub
vps: ssh://[email protected]: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
npm info underscore
#如果上面配置正确这个命令会有字符串response
如果是因为被墙的问题,用上面的命令改成淘宝源或使用代理。 最后的最后,翻到主题作者页的评论的n层,原来说要安装python,而且是 python2.7
!!!
订阅
安装订阅插件
npm install hexo-generator-feed --save
关于页面
maupassant
主题里有个关于导航菜单,默认点进去是不行的,需要自己新建个。
hexo new page about
或者手动在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文章,我觉着把整个过程整理完整了,有缺漏或谬误之处欢迎留言进行指正赐教。