How to build this blog

Introduction

尝试过虚拟机上 Arch Linux 的部署，但是由于 VMware workstation 12.0 的 bug，系统爆炸了呜呜呜。

所以本文要讲的是 Windows 上基于 Git & Github Pages 的部署。

Quick Start

安装 Git Bash，下载 Hugo extended Windows，并正确设置环境变量。

选择路径 dir 作为 Hugo Blog 的存储路径。

cd dir
hugo new site .
git init

如果没有报错的话，dir 内是这样的：

archetypes/  content/    static/  config.toml  data/     
layouts/     resources/  themes/

这里简要的说明一下，themes 用于接下来存放选择的主题，而 config.toml 是 blog 的配置文件。注意 hugo 是没有默认主题的，因此需要手动选择主题。

在官方网站上选择中意的主题后 clone 下来。

git clone https://github.com/AmazingRise/hugo-theme-diary themes/diary

改一改配置文件，或者直接用 themes/diary/exampleSite/config.toml，这里给出我的配置文件

baseURL = "https://tommy0103.github.io/"
DefaultContentLanguage = "zh" # Theme's display language, supports: en, fr, zh, zh-hant
languageCode = "zh-CN"
title = "Candy Life"
copyright = "tommy0103，本站遵循 CC BY-NC-SA 4.0 协议"
theme = "diary"
# googleAnalytics = "UA-154017714-2"

hasCJKLanguage = true
# googleAnalytics = "UA-123-45"

[markup]
  [markup.highlight]
    codeFences = true
    guessSyntax = false
    hl_Lines = ""
    lineNoStart = 1
    lineNos = false
    lineNumbersInTable = true
    noClasses = true
    style = "perldoc"
    tabWidth = 4

[params]
subtitle = "Some thinking."
enableGitalk = true
enableMathJax = true
enableAutoDarkMode = true
enableReadingTime = true
customCSS = true
customJS = true

# Twitter Card and Open Graph settings
enableOpenGraph = true
enableTwitterCards = true
title = "Candy Life" # will set 'og:site_name'
description = "My HomePage Description"  # will set 'og:description'

[params.gitalk]
  owner = "tommy0103"
  repo = "blog_comment"
  client_id = "secret" # need your own client_id instead of "secret"
  client_secret = "secret" # need your own client_secret instead of "secret"
[taxonomies]
   tag = "tags"
   sections = "sections"
   series = "series"
   category = "categories"

# [[menu.main]]
# url = "/categories/"
# name = "Categories"
# weight = 2
[[menu.main]]
url = "/posts/"
name = "Archive"
weight = 1
[[menu.main]]
url = "/tags/"
name = "Tags"
weight = 3
[[menu.main]]
url = "/friends/"
name = "Friends"
weight = 4
[[menu.main]]
url = "/about/"
name = "About"
weight = 4
[[menu.main]]
url = "/index.xml"
name = "RSS Feed"
weight = 6

还需要新建一个 .md 才能正常生成 blog

hugo new posts/first.md

现在可以生成 blog 了qwq。

# Generate static site
hugo -D 
# Generate & Preview site just in LAN 
hugo server -D

接下来需要部署 blog，即将 blog 放在云服务上运行。这里 $\texttt{tommy}$ 选择了 Github Pages，你也可以选择其他的。

初次部署需要 init 以及新建 origin

# /dir/deploy.sh

# if you deploy your blog for the first time
git init
git remote add origin git@github.com:tommy0103/tommy0103.github.io.git

# for all cases
git add .
git commit -m "msg"
git push -f --set-upstream origin master

到这里部署就告一段落了。可以写一个 .sh 脚本，这样每次就可以一键部署了。

Some Problem

整个过程中 $\texttt{tommy}$ 遇到过很多神奇的问题，这里记录一下。

本地预览没有任何问题，在远端提交后浏览 blog 发现网站 style 炸裂

请修改 config.toml 中的 baseUrl 为 blog 地址。

在 git push -f ... 时出现 git@github.com: Permission denied (publickey)

~~连 rsa 都没配置你在干什么（tommy：伞兵竟是我自己，senioria：tommy 傻傻配额快用完了~~

git config --global user.name ""
git config --global user.email ""
ssh-keygen -t rsa -C ""

拷贝公钥至 github.com/username 的 Setting 中即可。然后 ssh -T git@github.com 检查是否成功。

Gitalk 评论区无法正常输入

这多半不是你的问题，是浏览器的锅，换个浏览器试试吧。

Gitalk 显示需要初始化 issue

这不是 bug，这是 feature，直接使用你授权的 github 账号登录即可。

mathJax 无法正常使用

这个问题很好解决。

首先检查是否正确的配置了 config.toml。

# config.toml
enableMathJax = true

然后查看 themes/diary/layouts/partials/head.html

{{ if or .Site.Params.enableMathJax }}
  {{ partial "mathjax.html" . }}
{{ end }}

如果不是这样的，改成这样。

重新 deploy 就可以正常渲染了。但是 \\ 转义的问题解决不了，所以

$$
\begin{aligned}
e^{i\theta}=\cos \theta + i \sin \theta
\\\\
qwq
\end{aligned}
$$

只能用 \\\\ 来起到换行的效果（悲

最后修改于 2021-08-08