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

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

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

brew install hugo 

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

hugo new site path cd path 

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 

可以直接预览

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

ssh root@XXX.XXX.XX.XX 

sudo adduser git 

sudo apt install 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 

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

写入以下文本

配置权限

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

安装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 

先在本地生成

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一下

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

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

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

这个具体百度

在本地运行

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 站点已经成功部署在云服务器上，访问域名即可显示

将 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 下来，最好只在本地更改

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

网站根目录 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 

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

• Google Analystic

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

googleAnalytics: G-9X34EJGER4 

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

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

 {{ 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;  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;  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 里面加入这一段

到此为止评论区搭建完毕

• 使用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上半年的一些收获发出来

原文链接：https://blog.csdn.net/BAR_WORKSHOP/article/details/121078946?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522165934458816782248570098%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=165934458816782248570098&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~times_rank-13-121078946-null-null.nonecase&utm_term=%E8%87%AA%E5%BB%BAcdn