由于之前Hexo的NexT主题加载实在太慢,关闭加载动画之后还是很慢。索性换一个新的博客框架。
安装Hugo
到 Hugo Releases 下载适合你的操作系统的版本。
把 hugo
(或者是 Windows 的 hugo.exe
) 放到你的 环境变量 PATH
所在的目录,因为下一步我们将会用到它。
更加完整的安装指南请参考: Installing Hugo。
配置主题
1hugo new site hugo-blog
2cd hugo-blog
3git init
4git submodule add https://github.com/razonyang/hugo-theme-bootstrap themes/hugo-theme-bootstrap
5cp -a themes/hugo-theme-bootstrap/exampleSite/* .
6hugo mod npm pack
7npm install
8hugo server
配置作者信息
1name = "jimyag"
2avatar = "images/spider-man.jpg" # static/images/spider-man.jpg
3bio = "Gopher"
4location = "Shanghai"
5
6[params]
7 #layout = "compact"
8
9[social]
10 email = "jimyag@126.com"
11 github = "jimyag"
配置全站信息
这里也顺便配置备案信息
1baseURL = "https://jimyag.cn"
2title = "步履不停"
3theme = "hugo-theme-bootstrap" # install via git submodule
4copyright = "Copyright © 2019-{year} jimyag. All Rights Reserved. 陕ICP备2020018182号-1" # 备案信息
5
6# Multilingual mode
7defaultContentLanguage = "zh-cn"
8defaultContentLanguageInSubdir = false # If you use only one language comment this option
9
10# Pagination
11paginate = 10
12
13enableRobotsTXT = true
14
15enableEmoji = true
16
17pygmentsUseClasses = true
18
19[blackfriday]
20 hrefTargetBlank = true
21
22[mediaTypes]
23 [mediaTypes."application/manifest+json"]
24 suffixes = ["json"]
25
26[outputFormats]
27 [outputFormats.MANIFEST]
28 name = "manifest"
29 baseName = "manifest"
30 mediaType = "application/manifest+json"
31
32[outputs]
33 home = ["HTML", "RSS", "JSON", "MANIFEST"]
34
35[taxonomies]
36 category = "categories"
37 series = "series"
38 tag = "tags"
39
40[build]
41 writeStats = true
配置友情连接
自定义一个友情链接
的菜单,
属性 | 类型 | 描述 |
---|---|---|
name |
String | 菜单名称。 |
identifier |
String | 菜单 ID。 |
weight |
Number | 菜单的权重,用于升序排序。 |
parent |
String | 上级菜单的 identifier 。 |
url |
String | 菜单的 URL。 |
pre |
String | 菜单名称的前置字符串。 |
post |
String | 菜单名称的拖尾字符串。 |
params |
Object | 菜单参数。 |
params.divider |
Boolean | true 表示分隔符。 |
1[[main]]
2 name = "友情链接"
3 identifier = "friends"
4 weight = 40
5 pre = '<i class="fas fa-fw fa-chevron-circle-down"></i>'
6[[main]]
7 name = "xieash"
8 identifier = "xieash"
9 parent = "friends"
10 url = "https://xieash.work/"
11 weight = 1
12[[main]]
13 name = "sunnysab"
14 identifier = "sunnysab"
15 parent = "friends"
16 url = "https://sunnysab.cn/"
17 weight = 2
18[[main]]
19 name = "wanfengcxz"
20 identifier = "wanfengcxz"
21 parent = "friends"
22 url = "https://wanfengcxz.cn/"
23 weight = 3
24[[main]]
25 name = "zhangzqs"
26 identifier = "zhangzqs"
27 parent = "friends"
28 url = "https://zhangzqs.cn/"
29 weight = 4
配置社交连接
1email = "jimyag@126.com"
2# facebook = "yourfacebookusername"
3github = "jimyag"
迁移hexo的博客内容
hexo的永久连接的字段是addlink
,但是hugo是不支持这个字段的。
大佬的永久链接生成方案是直接对时间 + 文章名生成字符串做一下 md5 然后取任意 4-12 位。想了一下,这样的 hash 冲撞概率还是挺小的,我觉得可以!
那么接下来说说怎么把这个方案应用到 Hugo 中
Hugo 在永久链接中支持一个参数:slug
。简单来说,我们可以针对每一篇文章指定一个 slug
,然后在 config.toml
中配置permalinks
包含slug
参数,就可以生成唯一的永久链接。我们的目的就是对每篇文章自动生成一个 slug。
修改archetypes/default.md
添加如下一行:
1---
2#...
3slug: {{ substr (md5 (printf "%s%s" .Date (replace .TranslationBaseName "-" " " | title))) 4 8 }}
4#...
5---
这个其实就是hugo
的博客的模板,可以在里面添加自己预设的内容。
这样在每次使用hugo new
的时候就会自动填写一个永久链接了。
之后修改config.toml
添加如下行:
1[permalinks]
2 posts = "/post/:slug"
支持letex公式
Hugo原生是不支持数学公式的这时候需要手动引入数学公式的库,
在/themes/theme-name/layouts/partials
中添加mathjax.html
文件,
1<script type="text/javascript"
2 async
3 src="https://cdn.bootcss.com/mathjax/2.7.3/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
4MathJax.Hub.Config({
5 tex2jax: {
6 inlineMath: [['$','$'], ['\\(','\\)']],
7 displayMath: [['$$','$$'], ['\[\[','\]\]']],
8 processEscapes: true,
9 processEnvironments: true,
10 skipTags: ['script', 'noscript', 'style', 'textarea', 'pre'],
11 TeX: { equationNumbers: { autoNumber: "AMS" },
12 extensions: ["AMSmath.js", "AMSsymbols.js"] }
13 }
14});
15
16MathJax.Hub.Queue(function() {
17 // Fix <code> tags after MathJax finishes running. This is a
18 // hack to overcome a shortcoming of Markdown. Discussion at
19 // https://github.com/mojombo/jekyll/issues/199
20 var all = MathJax.Hub.getAllJax(), i;
21 for(i = 0; i < all.length; i += 1) {
22 all[i].SourceElement().parentNode.className += ' has-jax';
23 }
24});
25</script>
26
27<style>
28code.has-jax {
29 font: inherit;
30 font-size: 100%;
31 background: inherit;
32 border: inherit;
33 color: #515151;
34}
35</style>
然后在head.html
中加入如下语句
1{{ partial "mathjax.html" . }}
重新安装依赖
1hugo mod npm pack
2npm install
3hugo server
部署博客
Github Actions
起初想通过GitHub actions
进行部署,使用rsync
进行同步下面是action
的配置文件
1name: deploy
2
3on:
4 # push事件
5 push:
6 # 忽略某些文件和目录,自行定义
7 paths-ignore:
8 - '.gitignore'
9 - '.gitmodules'
10 - 'README.md'
11 branches: [ master ]
12
13 # pull_request事件
14 pull_request:
15 # 忽略某些文件和目录,自行定义
16 paths-ignore:
17 - '.gitignore'
18 - '.gitmodules'
19 - 'README.md'
20 branches: [ master ]
21
22 # 支持手动运行
23 workflow_dispatch:
24
25jobs:
26 # job名称为deploy
27 deploy:
28 # 使用GitHub提供的runner
29 runs-on: ubuntu-20.04
30
31 steps:
32 # 检出代码,包括submodules,保证主题文件正常
33 - name: Checkout source
34 uses: actions/checkout@v2
35 with:
36 ref: master
37 submodules: true # Fetch Hugo themes (true OR recursive)
38 fetch-depth: 0 # Fetch all history for .GitInfo and .Lastmod
39
40 # 准备 mode
41 - name: Setup Node.js
42 uses: actions/setup-node@v2
43 with:
44 node-version: 14
45
46 # 准备Hugo环境
47 - name: Setup Hugo
48 uses: peaceiris/actions-hugo@v2
49 with:
50 hugo-version: 'latest'
51 # extended: true
52
53 # Hugo构建静态站点,默认输出到public目录下
54 - name: Build1
55 run: hugo mod npm pack
56
57
58
59 - name: Build2
60 run: npm install
61
62 - name: Build3
63 run:
64 hugo -D
65 # 将public目录下的所有内容同步到远程服务器的nginx站点路径,注意path参数的写法,'public'和'public/'是不同的
66 - name: Deploy
67 uses: burnett01/rsync-deployments@5.1
68 with:
69 switches: -avzr --delete
70 path: ./public/
71 remote_host: ${{ secrets.REMOTE_HOST }}
72 remote_port: ${{ secrets.REMOTE_PORT }}
73 remote_path: ${{ secrets.REMOTE_PATH }}
74 remote_user: ${{ secrets.REMOTE_USER }}
75 remote_key: ${{ secrets.REMOTE_KEY }}
其中的secrets.REMOTE_HOST
等五个参数需要在setting/secrets/actions
中添加,可以自行添加。这有一个好处就是它是增量更新的,只有在第一次同步的时候是全部更新,之后只更新改变的或增加的。坏处就是腾讯云
一直提醒服务器在国外被登录
,每一个同步都要发邮件提醒,很烦。
SCP
scp
命令使用很简单
1scp -r 本地文件路径 username@ip:/远程文件路径
例如
1scp -r public/* username@ip:/public/jimyag.cn/
将当前文件中的public
目录中所有的文件拷到远程主机的/public/jimyag.cn/
文件夹中。
配置https
以下均在服务器中执行。
安装nginx
1yum install nginx -y
启动nginx
1systemctl start nginx
设置开机自启
1systemctl enable nginx
修改默认配置文件,注释掉所有的
1user root; #修改用户
2worker_processes auto;
3error_log /var/log/nginx/error.log;
4pid /run/nginx.pid;
5
6# Load dynamic modules. See /usr/share/doc/nginx/README.dynamic.
7include /usr/share/nginx/modules/*.conf;
8
9events {
10 worker_connections 1024;
11}
12
13http {
14 log_format main '$remote_addr - $remote_user [$time_local] "$request" '
15 '$status $body_bytes_sent "$http_referer" '
16 '"$http_user_agent" "$http_x_forwarded_for"';
17
18 access_log /var/log/nginx/access.log main;
19
20 sendfile on;
21 tcp_nopush on;
22 tcp_nodelay on;
23 keepalive_timeout 65;
24 types_hash_max_size 4096;
25
26 include /etc/nginx/mime.types;
27 default_type application/octet-stream;
28
29 # Load modular configuration files from the /etc/nginx/conf.d directory.
30 # See http://nginx.org/en/docs/ngx_core_module.html#include
31 # for more information.
32 include /etc/nginx/conf.d/*.conf;
33 # 删除多余的内容
34}
在/etc/nginx/conf.d
中新建文件jimyag_cn_http2https.conf
,将所有的http请求rewrite到https
1server {
2 listen 80 default_server;
3 listen [::]:80 default_server;
4 server_name jimyag.cn;
5 rewrite ^(.*) https://$server_name$1 permanent;
6}
在/etc/nginx/conf.d
中新建文件jimyag_cn.conf
,监听443端口
1server {
2 listen 443 ssl http2;
3 listen [::]:443 ssl http2;
4 server_name jimyag.cn;
5
6
7 ssl_certificate /etc/ssl/certs/jimyag_cn/jimyag.cn_bundle.crt; # 证书所在文件
8 ssl_certificate_key /etc/ssl/certs/jimyag_cn/jimyag.cn.key; # 证书所在文件
9 ssl_session_cache shared:SSL:1m;
10 ssl_session_timeout 10m;
11 location /{
12 root /public/jimyag.cn/; #博客文件所在
13 index index.html;
14 }
15}
证书需要在云服务器商中申请,申请成功后下载nginx
版本就可以了,将其中的.crt
和.key
文件拷到证书所在位置即可
。
参考
快速入门 - Hugo Bootstrap (razonyang.com)