Empty Space - 折腾hugo

最近折腾了一下hugo，有点中毒，咸鱼了几天在搞这个，网课都没怎么上。

感觉花在折腾上的时间太多了。

安装Hugo

由于国内特殊的网络环境，本来很简单的东西变得有点麻烦，必须用一些旁敲侧击的方法。从GitHub下载release的速度很慢，所以只好自己编译。从码云的镜像仓库clone下来，然后按照官网的步骤自己编译。

首先安装go。得益于go的国内镜像，下载速度还算快。
然后编译安装hugo
```
go install --tags extended
```
如果不要Sass/Scss支持的话可以把后面的选项去掉。
试试hugo能不能用，应该是可以了。

找个主题

几经挑选，找到了这个主题（cactus-plus）。

不得不说，这步可能是第二花时间的。

一点配置

数学公式

这样弄完之后发现数学公式没法渲染，于是乎添加KaTex的支持。

在theme/layouts/partials里添加一个katex.html，内容如下：

<script>
    document.addEventListener("DOMContentLoaded", function() {
        renderMathInElement(document.body, {
            delimiters: [
              {left: "$$", right: "$$", display: true},
              {left: "$", right: "$", display: false}
            ]
        });
    });
</script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css" integrity="sha384-zB1R0rpPzHqg7Kpt0Aljp8JPLqbXI3bhnPWROx27a9N0Ll6ZP/+DiW/UqRcLbRjq" crossorigin="anonymous">
<!-- The loading of KaTeX is deferred to speed up page rendering -->
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.js" integrity="sha384-y23I5Q6l+B6vatafAwxRu/0oK/79VlbSz7Q9aiSZUvyWYIYsd+qj+o24G5ZU2zJz" crossorigin="anonymous"></script>
<!-- To automatically render math in text elements, include the auto-render extension: -->
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/contrib/auto-render.min.js" integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" crossorigin="anonymous" onload="renderMathInElement(document.body);"></script>

当然也可以使用国内bootcdn的镜像，加载（理论上）更快。

然后在head.html中添加：

{% raw %}

{{ if or .Params.katex .Site.Params.katex }}
{{ partial "katex.html" . }}
{{ end }}

{% endraw %}

当渲染的页面当中有数学公式的时候，就在Front Matter里面加上katex: true即可。

ps: 还是有一点问题，\\、_、<这些符号还是不能直接使用，即使按照网上某些教程的说法，把渲染器改成mmark也不行，似乎也没有什么简洁的处理方法，只能在用的时候注意。

对主题的微调

这个主题并不是尽如人意，有些地方还是得自己调整，这是最花时间的。

首先是代码块的样式有点丑。这个主题使用了highlight.js进行代码高亮，但却没有禁用hugo自带的高亮，就会出来一些奇奇怪怪的问题，比如代码块的圆角之外会有黑角，因为hugo默认采用monokai作为高亮主题，背景是暗色的。在配置文件中加入以下片段来禁用hugo自带的高亮。

[markup]
  [markup.highlight]
    codeFences = false
    lineNos =  false

然后我几乎把所有元素的border-radius都改成了0px。（吐血

改动了footer和navbar，更符合我的喜好。

把字体替换成了Noto Sans SC，等宽字体替换成了Roboto Mono。用了Google Font。在head.html加入：

<link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC|Noto+Serif+SC|Roboto+Mono&display=swap" rel="stylesheet">

用Javascript自动替换插图路径

我习惯使用Typora作为markdown编辑器。当我把图片粘贴进来是，Typora就会把图片从剪贴板保存到./${filename}中，很方便，但是这样与hugo查找图片的方式冲突了。

为了方便，只好用Js。现学了一点js后，编写了以下代码。虽然此策不优雅，但是还算能用。

在static/js里面添加一个js文件：

// replace image source
window.onload = function() {
    var imgs = this.document.getElementsByTagName('img');
    for (let i = 0; i < imgs.length; i++) {
        var img = imgs[i];
        var temp_arr = img.src.split('/');
        var repl = '';
        var flag = false;
        for(let j = 0;j < temp_arr.length;j++) {
            if(j >= 2 && temp_arr[j-2] == 'posts' && temp_arr[j] == temp_arr[j-1]) {
                flag = true;
                continue;
            }
            repl = repl + temp_arr[j]
            if(j != temp_arr.length - 1) { 
                repl = repl + '/';
            }
        }
        if(flag) {
            console.log('replace ' + img.src + ' to ' + repl);
            img.src = repl;
        }
    }
}

然后把它添加到配置文件的customJs中，即可。

其他

诸如替换头像、添加email图标之类的，此不再赘述，要么调配置，要么改主题模板。

部署

一开始先尝试了一下gitee pages，但是会出现莫名其妙的404问题。于是干脆搞到自己的云服务器上，用git部署。

搭建git服务器

参考下面的某条链接……由于是在ubuntu上弄，所以比较顺利。

大概就是：新建git用户，添加公钥，修改/etc/passwd，新建裸仓库。

（半）自动部署

利用git钩子，如果愿意的话可以在服务器上装上hugo，然后自动构建、部署。但是我不想再装一次了。于是效法很多挂到github page的静态网页，分支master 专门管理源码，分支gh-pages专门管理构建好的网页。参考下面某条链接……

在要放网页文件的地方克隆gh-pages分支。然后在裸仓库的hook里面添加post-update文件，内容大致如下：

unset GIT_DIR
echo "Hello!"
DEPLOY_PATH="放网页的目录"
cd $DEPLOY_PATH
git pull origin gh-pages

下次push时就会自动把网页拉到这里来了。

为了更自动化一些，本地也添加一个脚本deploy.sh。

hugo
cd public
git add .
git commit -m "Update - `date +%Y-%m-%d`"
cd ..
git push origin gh-pages
git add .
git commit -a
git push origin master

下次写完博文，直接

sh deploy.sh

或者双击脚本即可。

静态网站的搭建

使用nginx，此不赘述。

一些链接

安装hugo

https://gohugo.io/getting-started/installing/
搭建git服务器

https://www.liaoxuefeng.com/wiki/896043488029600/899998870925664
git钩子

https://blog.csdn.net/u010837612/article/details/70825225

https://git-scm.com/book/zh/v2/%E8%87%AA%E5%AE%9A%E4%B9%89-Git-Git-%E9%92%A9%E5%AD%90
gh-pages

https://gohugo.io/hosting-and-deployment/hosting-on-github/

一些未解决也暂时懒得解决的问题：

about页面不显示头像

about页面内容不居中

tasklist的checkbox前会有一点