使用 Hugo 和阿里云ECS搭建个人站

之前个人站一直使用的是 Hexo ，时间久了一方面审美疲劳另一方面文章越来越多在 Hexo 下生成越来越慢，所以这个周末考虑迁移到 Hugo 下

总体上比较顺利，但是网上大多是在githubPage下建站，使用个人服务器的不多，故简单记录一下

 

本地配置

1 安装 Hugo

跟着 官方文档 来就行了，比如我在mac下

brew install hugo

2 建站

简单，一行命令，比如我想在本地目录/home/Mysite下建站，那就用该目录替换掉 path 即可

hugo new site path
cd path

3 安装主题

clone 一个主题配置，您可以直接clone，也可以添加git子模块，注意进入上一步建站根目录，比如我选择 papermod

直接 clone 到建站根目录下/themes/PaperMod路径

git clone https://github.com/adityatelange/hugo-PaperMod themes/PaperMod --depth=1
cd themes/PaperMod
git pull

最后在config.yaml下修改主题配置，可能建站之后得到的是.toml配置文件，看个人喜好了，我习惯写yaml所以直接格式转换过来了

theme: "PaperMod"

到这一步，本地的建站就完成了，没有任何困难

hugo server -D

可以直接预览

 

服务端配置

接下来就是网上介绍比较少的服务端配置

1 ssh 进自己的服务器

ssh root@XXX.XXX.XX.XX

2 建立 git 用户

sudo adduser git

3 安装 git

sudo apt install git

4 在服务端新建 git 仓库

注意这里建的不是 Github 仓库，是自己的服务器上的 git 仓库

• 在git目录下建立一个仓库 hugo.git
• 同时建立一个文件夹hugo用来存放仓库文件

su git
cd /home
mkdir git
cd git
git init --bare hugo.git
sudo chown -R git:git hugo.git
mkdir hugo

5 配置钩子

vim /home/git/hugo.git/hooks/post-receive

写入以下文本

git --work-tree=/home/git/hugo --git-dir=/home/git/hugo.git checkout -f

配置权限

sudo chmod +x /home/git/hugo.git/hooks/post-receive

6 配置Nginx

安装Nginx

sudo apt install nginx

修改Nginx配置文件

vim /etc/nginx/sites-available/default

只要改一个地方，把root路径从/var/www/html改成刚刚建立的存放仓库文件的/home/git/hugo

重启服务

service nginx reload
service nginx restart

7 配置SSH公钥

先在本地生成

ssh-keygen -t RSA -C "usr邮箱"
cat .ssh/id_rsa.pub

然后把 cat 内容复制到服务端的 .ssh/authorized_keys 文件内

mkdir .ssh
touch .ssh/authorized_keys
chmod 600 .ssh/authorized_keys

vim .ssh/authorized_keys

到此为止完成了服务端全部配置，以上任何一步操作如果提示缺少了什么就sudo apt install一下

 

部署本地到服务端

1 配置文件

把本地网站 config 文件内 baseURL 修改成自己的域名

baseURL: "https://wonghaotian.com/"

2 域名解析

去购买域名的地方把自己的域名解析到自己的服务器 ip

这个具体百度

3 部署

在本地运行

hugo

命令后，网站根目录内生成一个 public 文件夹，里面是静态网页文件，把这个 public文件夹整个 push 到我们刚刚在服务器端配置的 hugo.git 仓库里面

远程 git 仓库地址格式

git@[服务器 IP]:[hugo.git 路径]

如果您严格按照我刚刚说的步骤，那应该是：
git@XXX.XXX.XX.XX:/home/git/hugo.git

cd public
git init
git add .
git commit -m 'First Commit'
git remote add origin git@XXX.XXX.XX.XX:/home/git/hugo.git
git push -u origin master

如果一切顺利，那么您的个人 hugo 站点已经成功部署在云服务器上，访问域名即可显示

 

其他

1 Github 备份

将 public 文件同步备份到 Github 仓库里，可以使用一行命令再添加一个仓库

git remote set-url --add origin git@github.com:tiiaan/tiiaan.git

此时查看remote状态

$ git remote -v
origin	git@xxx.xxx.xx.xx:/home/hugo.git (fetch)
origin	git@xxx.xxx.xx.xx:/home/hugo.git (push)
origin	git@github.com:tiiaan/tiiaan.git (push)

也就是一次 push 可以同时向自己的服务端和github仓库都推一份，但是注意备份仓库上的内容没办法一次性 pull 下来，最好只在本地更改

2 脚本

每次都需要生成静态文件再推到服务端仓库，很麻烦，所以写一个脚本

网站根目录 Mysite 下新建一个 post.sh 脚本文件

cd Mysite
touch post.sh

向其中添加内容：

#!/bin/bash
hugo
cd public
git add .
git commit -m 'Update My Site'
git push -u origin master

赋予权限

sudo chmod +x post.sh

之后每次直接运行脚本即可

./post.sh

3 博客个性化配置

这一部分就因人而异了，简单说一下我的配置吧

我使用的是 PaperMod 主题，看上了它的纯白色，我喜欢简简单单的，但是有一些小细节不是很满意

• Google Analystic

创建一个账户然后新建数据流把 ID 复制到 config.yaml 里面就好

googleAnalytics: G-9X34EJGER4

以前 ID 应该是 “UA-XXXXXX” ，现在最新的 Google Analystic 4 提供的是 "G-"开头，可能有的主题不支持，官方也给出了解决办法，很容易解决

然后在 /themes/PaperMod/layouts/partials/head.html 末尾添加一行

<!-- Add GA4 support -->
{{ template "_internal/google_analytics.html" . }}

• Highlight.js 高亮

不太熟悉 Hugo 自带的高亮，所以换成了一直用的 Highlight.js，PaperMod 这个主题有个小坑，它自带的颜色定义覆盖了高亮属性，所以我们需要把自带的颜色注释掉才能正确显示高亮配色

第一步，从 Highlight.js 官网 复制下面这一段粘贴到 /themes/PaperMod/layouts/partials/head.html 这个文件末尾，高亮样式在第一行 .css 那里改

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/styles/github.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

这个时候如果预览一下会发现代码高亮很奇怪，反正绝对不是常见配色，这因为这个主题在 Highlight.js 高亮之后又渲染了一遍，覆盖掉了部分颜色，所以我们接下来要做的就是不允许它覆盖

第二步，在 /themes/PaperMod/assets/css/common/post-single.css 这个文件里找到以下这两段跟我一样注释掉对应行

.post-content pre code {
    display: block;
    margin: auto 0;
    padding: 10px;
    /* color: rgb(213, 213, 214); */
    background: 0 0;
    border-radius: 0;
    overflow-x: auto;
    word-break: break-all;
}

.post-content code {
    margin: auto 4px;
    padding: 4px 6px;
    font-size: 0.78em;
    line-height: 1.5;
    /* background: var(--code-bg); */
    border-radius: 2px;
}

第三步，在 /themes/PaperMod/assets/css/core/theme-vars.css 这个文件中注释掉以下行

    --hljs-bg: rgb(xxx, xxx, xxx);

现在，代码高亮就已经正常啦

• Valine 评论区

创建 leancloud 账户并添加实例，跟着提示很简单，不介绍了

在 config.yaml 中添加这么一段，把刚刚注册的 leancloud 里面的 Id 和 Key 复制过来

    valine:
        enable: true
        appId: 
        appKey: 
        notify: false
        verify: false
        avatar: "robohash"
        placeholder: "说点什么吧～"
        visitor: true

打开或者新建 /themes/PaperMod/layouts/partials/comments.html ，在里面添加这么一段

{{- /* Comments area start */ -}}
{{- /* to add comments read => https://gohugo.io/content-management/comments/ */ -}}
{{- if .Site.Params.valine.enable -}}
<span id="{{ .URL | relURL }}" class="leancloud_visitors" data-flag-title="{{ .Title }}">
  <i class="fas fa-eye"></i> <span class="post-meta-item-text">阅读量  </span>
  <span class="leancloud-visitors-count"></span>
  <p></p>
</span>
<div id="vcomments"></div>
<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<script src='//unpkg.com/valine/dist/Valine.min.js'></script>
<script type="text/javascript">
  new Valine({
      el: '#vcomments' ,
      appId: '{{ .Site.Params.valine.appId }}',
      appKey: '{{ .Site.Params.valine.appKey }}',
      notify: '{{ .Site.Params.valine.notify }}',
      verify: '{{ .Site.Params.valine.verify }}',
      avatar: '{{ .Site.Params.valine.avatar }}',
      placeholder: '{{ .Site.Params.valine.placeholder }}',
      visitor: '{{ .Site.Params.valine.visitor }}'
  });
</script>
{{- end }}
{{- /* Comments area end */ -}}

最后在 post 页面引入 comment.html，很多主题应该有，没有的话就在 single.html 里面加入这一段

  {{- if (.Param "comments") }}
  {{- partial "comments.html" . }}

到此为止评论区搭建完毕

• 使用Katex公示渲染引擎

新建 /themes/PaperMod/layouts/partials/math.html，向其中写入

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.15.1/dist/katex.min.css" integrity="sha384-R4558gYOUz8mP9YWpZJjofhk+zx0AS11p36HnD2ZKj/6JR5z27gSSULCNHIRReVs" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.15.1/dist/katex.min.js" integrity="sha384-z1fJDqw8ZApjGO3/unPWUPsIymfsJmyrDVWC8Tv/a1HeOtGmkwNd/7xUS0Xcnvsx" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.15.1/dist/contrib/auto-render.min.js" integrity="sha384-+XBljXPPiv+OzfbB3cVmLHf4hdUFHlWNZN5spNQ7rmHTXpd7WvJum6fIACpNNfIR" crossorigin="anonymous"
    onload="renderMathInElement(document.body);"></script>

然后打开 extend_head.html 文件，向末尾添加：

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

这样就可以正常使用 Latex 公式了

除此之外还可以在布局、颜色、icon、字体、行距、SEO等方面做一些微调，这部分就没必要展开说了，每个人审美都不一样

以上就是完整的建站流程记录，顺利的话一上午可以解决，也欢迎来逛逛我的小站 tiiaan，近期可能没什么时间，后续会整理出2021上半年的一些收获发出来