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