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

Posted on | Post modified | In

这里记录了通过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才可以。
当然也可以选择使用自己的云服务器然后用Nginx或Apache等方式，不在本文讨论范围内，可以参考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 Pages的Custom 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: [email protected]:emptyxl/emptyxl.github.io.git,master
    coding: [email protected]:empty_xl/empty_xl.git,coding-pages

之后使用hexo d即可推送到coding.net 和 github两端。
在进入阿里云域名解析，添加一条新的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 Issues、Next 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 id和client 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账号登陆即可进行初始化。