Hexo+Pages搭建个人博客及相关配置

这里记录了通过hexo+pages服务搭建个人博客的一些常见问题和误区,都是血泪经验。

hexo环境搭建

Hexo基于Node.js,可以通过npm安装,具体使用可以看官网教程,很简单。推荐使用LTS版本,Mac下V8.x的nodejs安装的hexo有时候会提示module not found,所以最好用稳定版。推荐把官方文档仔细的看一遍,你要知道你自己在做什么。
hexo安装好了之后,初始化等等不在此赘述,配置好之后基本以下命令就够了:

1
2
3
4
hexo clean # 清除生成的public folder内容
hexo generate / hexo g # 生成发布的内容
hexo server / hexo s # 启动本地server
hexo deploy / hexo d # 根据repo设置部署

Pages搭建

Github Pages可以是由用户编写的、托管在github上的静态网页,因其空间免费、服务器稳定,作为Blog的托管方最为合适不过,不过需要注意的是,必须是public repo才可以。
当然也可以选择使用自己的云服务器然后用NginxApache等方式,不在本文讨论范围内,可以参考Nginx配置将其中server改成如下即可,如有问题,可以在给我发邮件:

1
2
3
4
location / {
root [your deploy dir path];
index index.html index.htm;
}

Github上需要新建一个名为[github_username].github.io的仓库,然后在settings——Github Pages选择所在分支,我这里的截图是已经绑定过自定义域名,还没绑定的话会显示Your site is published at http://[username].github.io,之后访问[username].github.io,就会自动从index.html进入,域名绑定可以参考下一小节:

Github Pages 设置

这样,当在hexo的_config.yml中设置了deploy地址之后,运行hexo d会在目录下生成一个.deploy_git文件夹,里面的内容和[username].github.io内容是同步的,只需要每次部署之后,会自动用git推送的远程仓库,这样Pages的内容就会得到更新,不必手动push。

绑定自定义域名

域名绑定,首先你需要有一个域名,无论是收费的还是免费的,都可以,我这里是使用.com的顶级域名,是在万网买的。
万网
买到之后,进入控制台,左边点击域名与网站——域名,顶级域名.com & .net现在需要实名认证,注意一下。进入域名解析,添加三条记录:
域名解析
这里两条A记录指向的是Github Pages提供的IP地址,CNMAE填写自己的*.github.io,意思是指向*.github.io这里。之后再在Github PagesCustom domain中填写自己的域名:
自定义域名
自定义域名还需要告诉服务器你所绑定的CNAME是什么,即需要写一个文件名为CNAME的文件,内容为你的域名:

1
hellohxk.com

为了使每次生成的内容都包含这样一个文件,可以将这个文件放到/source中,这样生成的内容每次都有这样一个文件。
然后等待一段时间,就好了。

Github Coding.net 双部署

由于基本都在国内,访问的人一般都是国内,github的速度还是有些慢的,尤其是如果需要加载大量图片,会一直loading。所以我这里考虑使用国内的coding.net作为主服务器,海外采用访问Github的方式。
Coding.net Pages和github没什么区别,很容易上手,注意,我这里采用了项目Pages,而没有采用用户Pages,具体差别如下:
Codig.net Pages
我采用了新建一个项目,然后部署其到coding-pages分支,具体confi如下:

1
2
3
4
5
6
7
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repo:
github: git@github.com:emptyxl/emptyxl.github.io.git,master
coding: git@git.coding.net:empty_xl/empty_xl.git,coding-pages

之后使用hexo d即可推送到coding.netgithub两端。
在进入阿里云域名解析,添加一条新的CNAME,主机记录www,记录值为pages.coding.me,之后即可在coding.netpages服务上选择绑定自定义域名。最终如下:
双线域名解析
这里发现我多了一条A记录指向103.72.145.7,只是由于在coding.net pages会自动帮你申请Let's Encrypt的SSL/LTS证书,有可能会出现无效IP地址的情况,需要添加这一条A记录,指向ping pages.coding.net的值。

使用HTTPS

——没有小绿锁的网站大概会有人访问?

Github Pages 默认不提供自定义域名的HTTPS,即只有*.github.io可以强制使用HTTPS,目前的自定义域名HTTPS方案如下:

部署方式 解决方案
Github 部署 使用CloudFare
Coding.net 部署 使用自带的Let's Encrypt

CloudFare注册之后,选择Add a Websites,然后进行扫描,之后点击continue:
add a website
扫描完后,添加record,其值为之前的的github CNAME 与A记录IP地址值,然后选择Free套餐,之后将阿里云DNS改为
DNS服务器修改
至此等待一段时间,即可看到status:Active
Crypto菜单中,可以选择SSL连接方式,不同方式区别如下:
SSL连接方式
由于github自定义域名不支持HTTPS,所以只能选择Flexible,即所谓的HTTPS只是浏览器 —>CloudFare是HTTPS 而cloudFare —> Github 还是HTTP的方式。
Page Rules中可以设置强制HTTPS,如下:
强制跳转

Next主题

推荐两个主题吧,一个是之前使用过的Hux Theme,一个是现在使用的Next,毕竟9k star,一直在维护,提issue基本热心网友都会回复,还是挺不错的,而且第三方服务也基本集成好了,用的很方便,毕竟我们是用来写文章的,而不是写博客和主题框架的。Next下载的时候推荐下载Release版本。因为会经常修改,latest branch有时候会因为修改调试而产生奇异的问题,所以还是别折腾了。本网站采用Next.Mist,大体样子如下:
样式图
常见问题和配置,可以看Next官网Next IssuesNext Wiki,常见的问题基本都有。这里我总结一下常见和比较难找的内容,放出来修改的文件路径。

Footer修改

文章底部Footer内容看起来比较别扭,可以根据自己的喜好修改:
文件路径: /themes/next/layout/_partials/footer.swig

代码块样式

Markdown格式中``中间的代码如果想自定义格式,可惜通过修改css文件更改配色:

1
2
3
4
5
6
7
8
文件路径: /themes/next/source/css/_custom/custom.styl
// Custom styles.
code {
color: #ce0c3d;
background: #f9f2f4;
margin: 2px;
}

阅读全文/Read more

第一种方式使用theme的_config.yml中提供的摘要:

1
2
3
auto_excerpt:
enable: true
length: 150

设定摘要的长度,这种方式不推荐
另一种方式,在Post中要显示的部分之后加<!--more-->,之前的部分就会在首页以摘要方式显示,而且可以确保格式正确。推荐

首页图片显示

你会发现在Post中使用[Description](url)这种方式引用的图片在首页预览摘要中看不到,其原因是由于引用路径的问题,具体可以看这里资源引用,使用相对路径引用标签插件。

1
{% asset_img example.jpg This is an example image %}

图片居中

修改生成css样式即可

1
2
3
文件路径: /themes/next/source/css/_schemes/Mist/_posts-expanded.styl
.post-body img { margin: 0 auto; }

Gitment评论

Gitment是一个基于github issues的评论框架,最主要的支持Markdown!! 感动哭,现在写东西除了md格式基本都不会了。
Gitment基本思想是调用github Issues,每一篇文章对应一个open的issue,所有comments都其实是在issues上存储的,然后进行显示。
首先在 https://github.com/settings/applications/new 中注册一个OAuth application,会生成clinent idclient secret,之后有用。
注册OAuth App

在next文件中添加如下内容:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
文件路径: /themes/next/layout/_partials/comments.swig
{# gitment #}
{% elseif theme.gitment %}
<link rel="stylesheet" href="https://imsun.github.io/gitment/style/default.css">
<script src="https://imsun.github.io/gitment/dist/gitment.browser.js"></script>
<script>
var gitment = new Gitment({
// 根据文章标题设置唯一评论id
// id: '{{page.articleID}}', // optional
owner: 'emptyxl',
repo: 'emptyxl.github.io',
oauth: {
client_id: 'fa7413e3c0207a96ae03',
client_secret: 'a599fef18d25ba5c813d2e437260892e146462a2',
}
})
gitment.render('comments')
</script>

其中第3、4行是引用资源文件,直接使用官方仓库里的可以保持最新版。之后的script里的为配置内容,需要填写:

1
2
3
4
5
id 默认值为location.href 即链接的地址,id值即为创建的issue的名称 推荐不用写
owner 仓库所有者
repo 仓库名 即这些评论(也就是这些issues)放在哪个仓库下
client_id 之前注册的OAuth App `client ID`
cliend_secret 之前注册的OAuth App `client Secret`

部署之后,使用Owner账号登陆即可进行初始化。