blog: hugo + github + typora

问题1

问题描述：github pages对应的仓未能生成index.html，本地hugo servrer可以正常显示
解决方案：

1
git submodule add https://github.com/olOwOlo/hugo-theme-even themes/even

通过submodule创建的theme在站点的github仓中为链接，并无实体，需在github workflow中开启submodules：

1
2
3
4
5
6
jobs:
  build-deploy:
    steps:
      - uses: actions/checkout@v1  # v2 does not have submodules option now
        with:
          submodules: true

问题2

问题描述：网站中的图片链接无法显示
解决方案：

图片等静态信息通常放在static目录下，而static路径下的内容会放到部署网站的根目录，所以图片的展示应如此表示：/images/RB-tree/GeneralTree.png

问题3

问题描述：typora中的图片链接无法显示
解决方案：

网站显示中通过根路径的方式访问，typora中的默认根非当前网站下的static目录，所以需要配置如下：

Mac：Format->Image->Use Image Root Path配置图片根为static

此操作会在YAML文件头描述中类似如下的配置：typora-root-url: ../../../static

问题4

问题描述：hugo不支持LaTeX的渲染
解决方案：

通过在主题的<header>段添加KaTex渲染LaTeX的能力。

拷贝主题下的themes/even/layouts/partials/head.html到layouts/partials/head.html，添加脚本片段：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.13.3/katex.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.13.3/katex.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.13.3/contrib/auto-render.min.js"></script>
<script>
  document.addEventListener("DOMContentLoaded", function() {
    renderMathInElement(document.body, {
            delimiters: [
              {left: "$$", right: "$$", display: true},
              {left: "$", right: "$", display: false},
              {left: "\\(", right: "\\)", display: false},
              {left: "\\[", right: "\\]", display: true}
            ]
        });
  });
</script>

问题5

问题描述：KaTex使用$标记的表达式按照块显示，而非inline
解决方案：

参考https://katex.org/docs/autorender.html#api的描述，使用相同的配置成功将$标记的表达式inline。

If you want to add support for inline math via $...$ , be sure to list it after $$, as in the following. (Because rules are processed in order, putting a $ rule first would catch $$ as an empty math expression.)
1
2
3
4
5
6
[
  {left: "$$", right: "$$", display: true},
  {left: "$", right: "$", display: false},
  {left: "\$", right: "\$", display: false},
  {left: "\\[", right: "\\]", display: true}
]

问题6

问题描述：配置域名
解决方案：

通过在static路径下，创建CNAME文件中包含域名地址实现
通过workflow配置

1
2
3
4
5
6
7
jobs:
  build-deploy:
    steps:
      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          cname: www.guyuemeng.com

参考资料

[1] 折腾Hugo | GitHub Pages | Github Actions自动构建发布免费个人网站。https://zhuanlan.zhihu.com/p/109057290

Contents

问题1

问题2

问题3

问题4

问题5

问题6

参考资料