关于配置
查看这个 repo来参考里面的 hugo.toml
进行配置。
事先声明:
作为 blog 搭建……大概5代目,自己搭建的WordPress,白嫖的hexo,CSDN,飞书,或者直接typora 本地存盘都有过。不过可持续性非常烂,导致那么多年基本上没什么存档下来 😭
所以本人比较在意可持续性和存档性。个人搭建 VPS 的缺点在于,一段时间懒惰不续费之后,没有转移的资料丢了就是丢了(看向 WordPress
如果太难编辑,比如需要自己手动上传图片到图床,再粘贴链接什么的……也不利于持续性的blog写作(一开始觉得没问题总有一天会咆哮很麻烦!)
无法私有平台固然不错,但是限制太多,还是把资料掌握在自己手里最好!比如我的CSDN账号是什么来着? 因此又跑回来折腾啦!这次有GitHub作为存档保底,自动集成,VSC 的 markdown 支持 主要是能够复制粘贴图片 顺便搞定一下墙内访问就完事大吉~
仅供参考
可以查看这个示例配置,不过具体配置都在下面贴的很清楚啦!要是有什么结构问题再来看看这个示例站点吧~
太长不看快速上手版
确保你安装了最新的 hugo with extended,配置好 git,新建了 <用户名>.github.io 仓库(比如我的是 acyanbird.github.io)在setting 里面配置 pages - source - github actions。点击进入仓库,请使用命令 [email protected]:acyanbird/acyanbird.github.io.git
不要使用 ZIP,这样无法加载 submodule 会导致错误
可以将进入这个目录(比如你重命名为了my-blog),那么在my-blog下面打开终端,输入
rm -rf .git
git init
git add .
git commit -m "init"
git branch -M main
git remote add origin 你的 URL
git push -u origin main
之后应该能看到上线啦! 如果因为忘记设置 source - github actions,也可以设置完后手动 re-run 失败的action,在主页点击叉叉,然后右上角 re-run 就好!之后请到添加 post 章节查看怎么写 blog!
搭建站点
按照官方教程的 quickstart,首先确认安装了 git 和 hugo,hugo 的话最好在 GitHub release 安装最新的 with extended 版本,包管理器安装的也许会过老。
我们先用官方教程确保站点被正常启动
hugo new site example-blog
cd example-blog
git init
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke
echo "theme = 'ananke'" >> hugo.toml
hugo server
嘛 ananke 主题是比较简单不需要很多配置的,所以可以用这个检测是否能跑通。
这个时候就可以用 VS Code 打开站点文件夹 —— 这里就是 example 文件夹,尝试创建一个 blog,在终端里使用 hugo new content content/posts/my-first-post.md
你可以在 content 里面看到创建的 post,这里使用了 archetype 的参数
还是 draft 的时候显示不出来,我们加点什么再把 draft 设置成 false
到此就算是测试完毕,接下来我们接入 GitHub 主题
添加主题
大家不一定要使用我选择的主题,可以在官网搜索自己想要的主题进行添加,但注意每个主题的配置都各不相同,这一段只对 github-style 这个 theme 有效。直接添加主题 git submodule add [email protected]:MeiK2333/github-style.git themes/github-style
作者是给了一份配置参考,当然我也进行了一些修改,大家可以照抄我的配置,启用了本地搜索功能
baseURL = "/"
languageCode = "zh-cn"
title = "Nighthawk's nest"
theme = "github-style"
pygmentsCodeFences = true # 启动代码高亮
pygmentsUseClasses = false
buildDrafts = false
PygmentsStyle = "tango"
enableEmoji = true # 支持 emoji
# 在 md 里面启用 HTML
[markup]
[markup.goldmark]
[markup.goldmark.renderer]
unsafe = true
[params]
author = "你的名字"
description = "你的描述"
github = "GitHub ID"
email = "邮箱"
url = "个人网站地址"
# keywords = "blog, google analytics"
# rss = true
# userStatusEmoji = "😀"
favicon = "/images/ava_c_trans.png" #标签页的那个小图标
avatar = "/images/ava_c.png"
headerIcon = "/images/ava_c.png"
location = "Shenzhen, China"
enableGitalk = false
# 支持本地搜索,这里与下面的 outputs
enableSearch = true
[outputs]
home = ["html", "json"]
[outputFormats.json]
mediaType = "application/json"
baseName = "index"
isPlainText = false
# [params.gitalk]
# clientID = ""
# clientSecret = ""
# repo = "存放评论的 repo 名"
# owner = "你的GitHub ID"
# admin = "你的GitHub ID"
# id = "decodeURI(location.pathname)"
# labels = "gitalk"
# perPage = 15
# pagerDirection = "last"
# createIssueManually = false
# distractionFreeMode = false
[[params.links]]
title = "bilibili"
href = "https://space.bilibili.com/205319947"
icon = "/images/bilibili.svg"
[[params.links]]
title = "QQ Group"
icon = "/images/qq.svg"
href = "https://qm.qq.com/q/cXb0hh1uC"
[[params.links]]
title = "ebird"
href = "https://ebird.org/profile/MjQ3NDIyOQ/world"
icon = "/images/ebirdicon.png"
lastmod = true
[frontmatter]
lastmod = ["lastmod", ":fileModTime", ":default"]
# [services]
# [services.googleAnalytics]
# ID = "UA-123456-789"
将images放置在 static下,就像 static/images/image.png 这样,hugo 才能够索引到图片。这个主题接受 content 下的一个 readme.md 以及 content/post/ 文件夹下的 md 文件(所以之前创建的 posts 文件夹要重命名)。
为了更整齐地归纳 post 里面的图片,我选择给每一个 post 创建一个文件夹。
在 archetypes 文件夹下再建立模版文件
---
title: "{{ replace .Name "-" " " | title }}"
date: {{ .Date }}
draft: false
author: "acyanbird"
# 显示在首页的总结
summary: "{{ replace .Name "-" " " | title }}"
# tags: [""]
---
添加 post
由于我们使用了 archetype,所以可以用 hugo new post/[你的题目] --kind git
初始化一个blog,这样之后的图片放在这个文件夹下就可以啦~ 至于首页的显示也是md文档,请在 content 目录下面新建 readme.md 文档,在里面编辑就可以。
在我个人感觉里,有一个能够方便进行写作的工具是很重要的,今天在这里推荐 VS Code 加上几个插件:
Markdown Shortcuts 此插件主要是提供了粗体、斜体、行内代码、代码块的快捷键。
Markdown All in One 哎呀看这个名字就知道,全家桶,装就完事了!
要达成的效果就是可以直接截图粘贴到 blog 里面,不需要再传一次啦!
ctrl+k 再+v 可以分屏预览
Readme 文档的写作格式网上有很多资料,也比较方便入门,在此就不赘述啦!
写完之后直接一个 git add . && git commit -m "更新笔记" && git push
走起~
目前问题:似乎 last mod 功能消失了,到时候找找是哪里出问题()
上线博客
我们使用 github Page 服务进行托管,这个主题目前(可能我会修咕咕咕)有个问题,不支持在有子目录的情况下显示头像图片。所以我们需要使用 <用户名>.github.io 的repo。创建这个名字的repo名称,添加这个 repo。就比如我的GitHub ID 是 acyanbird,所以我的 repo 名是 acyanbird.github.io
git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin 你的URL
git push -u origin main
之后启动 GitHub Page,这里官方文档写的很清楚了,setting - pages
在根目录创建 .github/workflows 文件夹,创建 hugo.yaml
mkdir -p .github/workflows
touch hugo.yaml
照抄一下官方文档就好
# Sample workflow for building and deploying a Hugo site to GitHub Pages
name: Deploy Hugo site to Pages
on:
# Runs on pushes targeting the default branch
push:
branches:
- main
# Allows you to run this workflow manually from the Actions tab
workflow_dispatch:
# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
permissions:
contents: read
pages: write
id-token: write
# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
concurrency:
group: "pages"
cancel-in-progress: false
# Default to bash
defaults:
run:
shell: bash
jobs:
# Build job
build:
runs-on: ubuntu-latest
env:
HUGO_VERSION: 0.137.1
steps:
- name: Install Hugo CLI
run: |
wget -O ${{ runner.temp }}/hugo.deb https://github.com/gohugoio/hugo/releases/download/v${HUGO_VERSION}/hugo_extended_${HUGO_VERSION}_linux-amd64.deb \
&& sudo dpkg -i ${{ runner.temp }}/hugo.deb
- name: Install Dart Sass
run: sudo snap install dart-sass
- name: Checkout
uses: actions/checkout@v4
with:
submodules: recursive
fetch-depth: 0
- name: Setup Pages
id: pages
uses: actions/configure-pages@v5
- name: Install Node.js dependencies
run: "[[ -f package-lock.json || -f npm-shrinkwrap.json ]] && npm ci || true"
- name: Build with Hugo
env:
HUGO_CACHEDIR: ${{ runner.temp }}/hugo_cache
HUGO_ENVIRONMENT: production
TZ: America/Los_Angeles
run: |
hugo \
--gc \
--minify \
--baseURL "${{ steps.pages.outputs.base_url }}/"
- name: Upload artifact
uses: actions/upload-pages-artifact@v3
with:
path: ./public
# Deployment job
deploy:
environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }}
runs-on: ubuntu-latest
needs: build
steps:
- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages@v4
顺手优化: 这个选做,这样发布是不需要 public 文件夹的,我们可以让git忽略这个文件夹,来加快每次上传的速度。在根目录下创建 .gitignore 文件,加入 public/ ,如果之前 add 过这个文件夹那么在根目录下 git rm -r --cached public
,再提交(git add . && git commit -m "commit message"
)
到此你的 blog 已经可以上线并访问啦!耶!不过还有能够改进的地方,如果还有兴趣就向下看看吧~
私人域名&墙内访问
目前的 github.io 网站被墙屏蔽,我使用的是私人域名+Cloudflare来配置。在你喜欢的域名提供商(国内的比较麻烦,推荐国外),或者直接用 GitHub 学生认证赠送的来白嫖一个。然后在你的 GitHub 个人 setting - pages 里面认证(如果不验证也可以,但是会不能使用 https)之后会有详细步骤(就是添加 txt 认证什么的),再到你个人repo里把域名进行更改为你想要的,可以是我这种 acyanbird.tech 也可以是子域名,详情参考文档。
之后再添加其他的 DNS 解析,如果是子域名(比如 blog.acyanbird.tech),那么进行 CNAME 记录,值为 acyanbird.github.io
在验证 DNS 的时候要记得把代理状态取消!橙色的云变灰之后才能验证,不然会出现 https 验证失败。
最后不要忘记修改 hugo.toml
里的 baseURL,比如我就修改为 baseURL = "https://acyanbird.tech/"
enable 评论
这个主题适配了 gitalk 组建,所以就使用这个啦~ 因为需要 callback URL 所以需要上线之后才能使用。进入到 Github 的 Setting - Developer setting - OAuth Apps
记得新建一个公开的 repo 存储 issue,因为 gitalk 使用 issue 来存储。这里注意把你的域名写在 callback URL 里,如果你是免费的域名就是 <你的ID>.github.io
之后在 hugo.toml
里取消注释
[params.gitalk]
clientID =
clientSecret =
repo = "存放评论的 repo 名"
owner = "你的GitHub ID"
admin = "你的GitHub ID"
id = "decodeURI(location.pathname)"# 注意这个,可能会出现超长 label 导致 invalid
labels = "gitalk"
perPage = 15
pagerDirection = "last"
createIssueManually = false
distractionFreeMode = false
之后在每个 post 下面就有评论区,等待初始化就可以了~如果要管理评论,进入到填写的 github repo 的 issue 区删除就 OK。
差不多这样了
差不多就是这样了,如果有问题欢迎在评论区找我qwq