情景描述

使用 WordPress 写博客有一个学期了,博客没写几篇,Nginx 和 WordPress 倒是折腾了不少。也是嘛,如果不是折腾了一个学期的 Nginx,这次学校网络更新架构,要给城市热点的服务分配域名,然后那个端口问题还真搞不定了。

不过,WordPress 的写作体验是真的不太好。不仅没有 MarkDown 写着舒服,每天还要担心有没有人进行网络渗透。WordPress 的速度的确不算快,我上了缓存插件,直接生成静态页面,然后还配置了 tmpfs。

现在,我决定迁移到 Hugo,纯静态网站,你来入侵啊。Hugo 生成的网站文件,我还给放到了 tmpfs 里,起飞吧,哔u哔u。

安装相关软件

首先是安装 Hugo,这个建议不要使用包管理器直接安装,建议到 GitHub 下载编译好的二进制安装包,实在不行,自己编译也好。

可以到 Hugo Release 页面 下载。

以 DEB 系的 32位 Linux 为例,首先下载 deb 包:

wget https://github.com/gohugoio/hugo/releases/download/v0.47.1/hugo_0.47.1_Linux-32bit.deb

然后进行安装

sudo dpkg -i hugo_0.47.1_Linux-32bit.deb

然后安装 Git、Nginx,这个直接安装就好

sudo apt install -y git nginx

配置 MathJax

我使用的 Hugo 主题已经支持了 MathJax,不过是从 CDN 那里加载的 MathJax 文件。而我想让所有的文件都在我自己的服务器上,于是我就魔改了一下下主题。这里对其他 Hugo 用户应该也有些参考价值。

首先是下载 MathJax,从 GitHub 下载。

wget https://github.com/mathjax/MathJax/archive/master.zip

解压这个压缩包,然后将这个压缩包里 unpacked文件夹移动到你的 Hugo 网站的目录下,最好这个文件夹重命名为 MathJax

然后,移动压缩包里的 fonts 文件夹,到 Hugo 网站的目录下,应该与 MathJax 文件夹在同一级目录里。

我将这两个文件夹放在了 static/lib/ 下面,最终生成网站后,应该在 /lib/ 下面。也就是 /lib/ 下面应该存在两个文件夹,/lib/MathJax/lib/fonts

然后你要想办法在你的生成的静态 Html 文件里加上如下几行:

<script type="text/javascript">
    window.MathJax = {
      tex2jax: {
            inlineMath: [['$','$'], ['\\(','\\)']],
            displayMath: [['$$','$$'], ["\\[","\\]"]],
            processEscapes: true
        },
      TeX: {equationNumbers: {autoNumber: "AMS"}},
      showProcessingMessages: true,
      messageStyle: 'normal'
    };
  </script>
  <script type="text/javascript" async src="/lib/MathJax/MathJax.js?config=TeX-AMS_HTML"></script>

注意最后那个引用 MathJax 的链接,建议你查查 MathJax 的文档。这里的配置是使用 Tex 语法书写公式,使用 Html 和 Css 渲染公式。

以下是一个测试,数学公式: \sum_1^2

行内显示公式:$ \sum_1^2 $

块显示公式:

$$ \sum_1^2 $$

使用 Git 发布文章

首先配置一下服务器端的 Git。我的做法是直接上传本地的 Git 配置文件。毕竟这个配置用了两年了。但是,仅仅这样还是不够的。

在服务器上找个目录放你的网站,然后:

git init
git add -A
git commit -m "迁移博客到 Hugo"

这些都是常规操作了。不过这个时候,本地的 push 操作是失败的。没错,之所以说使用本地的配置不够是因为,本地的配置少了一些。

[core]
  autocrlf = input
[receive]
  denyCurrentBranch = ignore

第一个配置是转换 Linux 的换行符与 Windows 的换行符,否则就会一直提示,很烦的。第二个配置是关键。进行 push 时,如果远程库是非 bare 库,本地 push 会被禁止。所以,加上这个配置,本地的 push 会同步过去,但是远程仓库工作区的文件内容不会更改。

其实,到了这里就结束了。

之后,本地的更改直接 push 就好了,然后 ssh 到服务器,直接检出、合并、构建就完事了。

这里提一下具体操作

git log
git status
git reset --hard dca8b26
hugo

首先查看我们提交的历史,以及版本号。然后我们看看此时仓库的状态。可以看到我们提交成功了,并且已经到了暂存区里,但是工作区还未同步。现在我们既可以让暂存区同步到工作区,也可以直接回滚到提交记录中去。

所以我们使用 reset --hard 强制使工作区回到 dca8b26 这次提交的状态去。

事实上,这里这样做更方便,操作是完全等价的。而且还可以做成钩子,实现 commit 后自动构建。

git reset --hard HEAD
hugo

因为 HEAD 是指向最新的 commit 的,所以 reset 到 HEAD 和 reset 到指定的 commit 在我们这里的情形下是完全等价的,因为我们指定的 commit 就是最新的那一个。

使用 Nginx 部署网站

一个静态网站,有啥好配置的。直接贴出来。

server {
    listen 0.0.0.0:443 ssl http2;
    listen [::]:443 ssl http2;
    ssl_certificate /website/nginx/sslcert/www.pem;
    ssl_certificate_key /website/nginx/sslcert/www.key;
    ssl_session_timeout 5m;
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;

    server_name www.huanggefan.cn;
    root /website/www.git/public;
    index index.html;

    access_log /website/log/www-access.log main;
    error_log /website/log/www-error.log;

    location ~* \.(jpg|jpeg|png|icon|bmp|gif|tty|js|css)$ {
        access_log off;
        log_not_found off;
    }

    error_page  404 403 500 502 503 504  /404.html;
}

使用内存进行加速

Hugo 默认会把构建的静态网站文件放到 public 目录下,我觉得这样挺好的,也没有更改路径。Ubuntu 有一个特性,就是 /dev/shm 其实是个目录,而且,是在内存里的一个目录,这个目录有内存的一半大。所以,我就直接在这里创建一个目录,通过软链接,链接到 public。这样,public 其实就在内存里了。Hugo 也就是把静态网站文件放到了内存里了。

阿里云 ECS 的磁盘性能不是很好,不过内存性能很好,这样算是进行了最大化的性能优化。