博客搭建笔记
Wordpress
最开始没多想，就决定用最方便（臃肿）的 Wordpress。
买服务器
aws 注册以后获得免费 ec2 实例 * 1个 * 1年。安装 Ubuntu Server 18.04 LTS 并下载私钥用于 SSH 登录。
配服务器
安装 LEMP + Wordpress 组合。可以参照这篇教程：
其中包括了 LEMP 的配置教程：
How To Install Linux, Nginx, MySQL, PHP (LEMP stack) on Ubuntu 18.04
然后可以配置一下 TLS，用 Let’s Encrypt 的 Certbot 就可以。直接在官网照步骤走就好：
可以搭配下 CDN 用于加速（减速）网站的访问。我选择了 Cloudflare 的免费 CDN 套餐：
然后在 Certbot 中就可以很方便的配置 TLS 通配符（wildcard）证书了。Certbot 页面选择 wildcard 的 tab，同样按照教程走就好。以下是我用的指令：
1sudo certbot \
2 --dns-cloudflare \
3 --dns-cloudflare-credentials ~/.secrets/certbot/cloudflare.ini \
4 -d stevehawk.tk -d *.stevehawk.tk \
5 -i nginx配博客
服务器端配置完成以后就是简单的在网页管理界面操作一切了。
Hugo
可恨，Wordpress 竟然不是原生支持 Markdown，插件又渲染的一坨屎。于是决定换成 Hugo。
配服务器
可以继续参考上面的教程，不过可以跳过 Mysql，PHP 和 Wordpress 的安装。只需要 Nginx 即可。
Hugo 的安装是大坑。官方教程提供了三种安装方法：
其中，apt 上的安装包非常老，在我配置服务器的时候，官方最新版是 0.56.0，而 apt 上的版本竟然还在 0.40.0，一个 2018 年 4 月的 Release…. 所以不要用 apt 了。
然后试着装了 Linuxbrew，以为能方便的一键安装，结果它给我下了个 Golang，下了 Hugo 的源码，然后开始从头编译…. 再见。
最终用 Snap 装上了。Snap 大法好。
1snap install hugo --channel=extended配博客
Hugo 的特点就是简洁（简陋），甚至没有个网页管理界面，所有管理都用 CLI 完成。依旧按照官方教程走：
常用的指令：
1# 创建网站文件夹
2hugo new site site_name
3# 创建一篇文章 会出现在 ./content/posts/ 下
4hugo new posts/post_name.md
5# 生成静态文件 会出现在 ./public 文件夹中
6hugo生成静态文件后把 nginx 服务器配置块中的 root 指向 public 文件夹即可。
注意，hugo 每次生成的时候不会删除 public 文件夹中原本的内容，所以记得先删除 public 再生成以防出问题。
注意，Snap 安装的 Hugo 无法在 ~ 之外的路径中操作文件，所以这里最方便的操作就是把网站文件夹放在 ~ 目录下。参考：Issue with the snap installed version
配 Mathjax
Hugo 虽然支持了 Markdown，但是不支持 Latex 数学公式。所以需要另外配置一下 Mathjax 用于渲染公式。官方提供的方案：
但是这个方案貌似会出现奇怪的语法错误。可以使用改进方案：
这个方案中，把所有的修改并成同一个文件 layouts/partials/mathjax.html ，内容如下：
1<script type="text/javascript"
2 async
3 src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
4MathJax.Hub.Config({
5 tex2jax: {
6 inlineMath: [['$','$'], ['\\(','\\)']],
7 displayMath: [['$$','$$'], ['\[\[','\]\]']],
8 processEscapes: true,
9 processEnvironments: true,
10 skipTags: ['script', 'noscript', 'style', 'textarea', 'pre'],
11 TeX: { equationNumbers: { autoNumber: "AMS" },
12 extensions: ["AMSmath.js", "AMSsymbols.js"] }
13 }
14});
15
16MathJax.Hub.Queue(function() {
17 // Fix <code> tags after MathJax finishes running. This is a
18 // hack to overcome a shortcoming of Markdown. Discussion at
19 // https://github.com/mojombo/jekyll/issues/199
20 var all = MathJax.Hub.getAllJax(), i;
21 for(i = 0; i < all.length; i += 1) {
22 all[i].SourceElement().parentNode.className += ' has-jax';
23 }
24});
25</script>
26
27<style>
28code.has-jax {
29 font: inherit;
30 font-size: 100%;
31 background: inherit;
32 border: inherit;
33 color: #e8eef2;
34}
35</style>其中的 Mathjax CDN 地址也可以换成国内源：
https://cdn.bootcss.com/mathjax/2.7.3/MathJax.js?config=TeX-AMS-MML_HTMLorMML
最后的 CSS 里，color 需要替换成博客的 body 类的颜色，我的这个主题是 #e8eef2 。
最后把这个 partial 模板添加到每个页面中即可，比如加入 footer 中。
1{{ partial "mathjax.html" . }}在 Hugo 渲染的时候，layouts/ 中的文件优先级是高于 themes/***/layouts/ 中文件的优先级的。为了避免直接修改主题中的代码，可以把对应的文件复制到 layouts/ 中的对应位置，然后对其修改，就可以在生成时覆盖原主题的文件。
而我用的 Hermit 主题中，可以使用额外的 extra-head.html 和 extra-foot.html 植入额外代码，更加方便。
配不蒜子
虽然 Hugo 的确提供了 Google Analytics 的原生支持，但是毕竟受限于国情，而且 Google Analytics 没法在网页上显示访客数量。这时候就可以使用不蒜子进行访客计数支持。
不蒜子的配置非常简单，官方宣称两行代码搞定计数。
1<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
2<span id="busuanzi_container_site_pv">本站总访问量<span id="busuanzi_value_site_pv"></span>次</span>实际操作时，第一行引入 js 代码同之前的 Mathjax 一样添加到每个页面中，比如添加到 footer 里。
第二行代码可以在 layouts/partials/ 下新建文件 busuanzi.html 然后放入其中。可以做些自定义，如下：
1<span id="busuanzi_container_page_pv">
2 <code>本文阅读量 <span id="busuanzi_value_page_pv"></span></code><br>
3</span>
4<span id="busuanzi_container_site_uv">
5 <code>本站访客量 <span id="busuanzi_value_site_uv"></span></code><br>
6</span>随后找到 posts 渲染的模板文件，Hermit 主题的模板对应位置在 themes/hermit/layouts/posts/single.html 。复制到 layouts/posts/ 下，然后在需要的位置插入以下代码即可：
1{{ partial "busuanzi.html" . }}配 utterance
Hugo 原生支持 Disqus 作为评论系统，但是 Disqus 在国内被墙了……
如果不在乎被屏蔽的问题，配置 Disqus 非常容易。如果主题支持原生的评论模板渲染，只需要到 Disqus 中注册账号并且配置好，然后在 config.toml 中设置这一个属性即可：
1disqusShortname = "yourdiscussshortname"Disqus 非常成熟，评论 UI 也很好看，可惜被隔绝在高墙之外。替代品在官方文档里也列出来很多，只要是支持静态博客的评论系统基本都可以用上。（毕竟就是改个模板的事情）
选择博客评论系统有四大标准：安全，好看，方便，便宜。然而安全和便宜基本上是和方便互斥了，因为安全且免费通常意味着需要自行在服务器上配置数据库和评论服务，不像 Wordpress 内置本地评论，在 Hugo 这里显然需要花不少功夫去配置和维护。
我最终选择了 utterance 作为我的博客评论系统。utterance 是一个轻量级并且开源的评论系统，非常有创意的使用了 Github issue 作为评论的存储和显示方式，于是同时达到了免费和好看，安全性也有保障。唯一缺点是不支持匿名评论，但是评论需要的账号是 Github 账号（第一次需要授权 utterance-bot），考虑到会来看我博客的人不太可能没有 Github 账号，所以也不是大问题。
配置非常简单。首先新建一个 public repo 用于存放评论，需要启用 issues 并安装 utterance app 。
在 config.toml 中添加对应的配置信息：
1[params.utterances] # utteranc is a comment system based on GitHub issues. see https://utteranc.es
2 owner = "xxxx" # github username
3 repo = "yyyy" # The repo to store comments
4 issueTerm = "pathname"
5 theme = "github-light"配置的可选项可以在官方文档里找到：https://utteranc.es/
然后在 layouts/partials/ 下新建 utterance.html，放入以下代码：
1<script src="https://utteranc.es/client.js"
2 repo="{{ .Site.Params.utterances.owner }}/{{ .Site.Params.utterances.repo }}"
3 issue-term="{{ .Site.Params.utterances.issueTerm }}"
4 theme="{{ .Site.Params.utterances.theme }}"
5 crossorigin="anonymous"
6 async>
7</script>
8<noscript>Please enable JavaScript to view the comments powered by <a href="https://github.com/utterance">utterances</a>.</noscript>把 themes 中的 comments.html 复制到 layouts/partials/ 下，并插入以下代码：
1{{- if .Site.Params.utterances.owner}}
2{{ partial "utterance.html" . }}
3{{- end }}完工。
#tech notes
本文总字数 2434
本文阅读量
本站访客量