之前个人站一直使用的是 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
原创文章，作者：优速盾-小U，如若转载，请注明出处：https://www.cdnb.net/bbs/archives/6344
