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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值