第一篇文章说下我的博客如何搭建

序言 #

本博客主要由Hugo构建，博客网站样式基于Congo配置。

假定读者已经对Hugo一定的了解，本文主要侧重介绍Congo的自定义配置内容。

安装Hugo #

go的安装方式自行搜索，官方安装教程：https://go.dev/doc/install

Linux环境执行如下命令即可安装（后续涉及的命令均在Linux环境执行）

CGO_ENABLED=1 go install -tags extended github.com/gohugoio/hugo@v0.145.0

使用指定版本的原因是：使用Congo主题后，最新版本的Hugo会报错Error: html/template:_shortcodes/figure.html:2:14: no such template "_internal/shortcodes/figure.html"。详细见Congo github issues#1049

执行hugo new site demosite生成名为demosite静态网站项目，其目录结构如下：

.
├── archetypes
│   └── default.md
├── assets
├── content
├── data
├── hugo.toml
├── i18n
├── layouts
├── static
└── themes

安装Congo #

安装Congo主题

cd demosite
git init
git submodule add -b stable https://github.com/jpanther/congo.git themes/congo
# 博主没有使用git子模块的形式，直接下载congo

配置Congo #

复制Congo默认配置文件

cd demosite
rm hugo.toml
mkdir -p config/_default/
cp themes/congo/config/_default/*.toml config/_default/
# .
# ├── hugo.toml
# ├── languages.en.toml
# ├── markup.toml
# ├── menus.en.toml
# ├── module.toml # 只有hugo module方式安装的Congo需要，复制后可以直接删除！
# └── params.toml

中文化 #

重名英文语言配置文件

cd config/_default/
mv languages.en.toml languages.zh-Hans.toml
mv menus.en.toml menus.zh-Hans.toml

修改hugo.toml

# defaultContentLanguage = "en"
defaultContentLanguage = "zh-Hans"

修改languages.zh-Hans.toml

# languageCode = "en"
# languageName = "English"
languageCode = "zh-Hans"
languageName = "简体中文"

导航栏菜单中文化，修改menus.zh-Hans.toml（菜单增删、链接也是在此配置）

# [[main]]
#   name = "Blog"

[[main]]
  name = "文章"

如果你想自定义中文翻译，可以复制zh-Hans.yaml文件到hugo博客项目(demosite)根目录下的i18n/目录下，并修改其内容即可生效

cp themes/congo/i18n/zh-Hans.yaml i18n/

基础配置 #

设置文章日期格式，修改languages.zh-Hans.toml

[params]
  # dateFormat = "2 January 2006"
  # https://pkg.go.dev/time#Layout
  dateFormat = "2006年01月02日"

设置博客部署后的访问地址，修改hugo.toml

# baseURL = "https://your_domain.com/"
# ex.
baseURL = "https://15ho.github.io/"

设置博文末尾头像，修改languages.zh-Hans.toml

[params.author]
  image = "img/author.jpg" # 图片实际路径: assets/img/author.jpg

设置博客网站Logo的favicon文件，可借由在线工具favicon.io生成，并放置static/目录下。包含的文件如下：

.
├── android-chrome-192x192.png
├── android-chrome-512x512.png
├── apple-touch-icon.png
├── favicon-16x16.png
├── favicon-32x32.png
├── favicon.ico
└── site.webmanifest

设置博文末尾作者链接，修改languages.zh-Hans.toml

[params.author]
  links = [
    { email = "mailto:fifteenho@163.com" },
    { github = "https://github.com/15ho" },
    # 自定义链接及其图标
    # 图标路径: assets/icons/zhihu.svg
    { zhihu = "https://www.zhihu.com/people/15ho-" }
  ]

设置首页展示最近的文章，修改params.toml

[homepage]
  showRecent = true

设置站内搜索，修改params.toml

enableSearch = true

# 注意：有效前提是hugo.toml添加了如下配置
# [outputs]
#   home = ["HTML", "RSS", "JSON"]

设置文章目录展示，修改params.toml

[article]
  showTableOfContents = true

部署 #

部署生成的静态网站到Github Page，总共分两步：

创建公开的Github仓库，仓库名必须以<你的github用户名>.github.io规则命名
在hugo博客项目(demosite)根目录下执行hugo命令，将public/目录下生成的所有文件复制到第1步的仓库内并提交推送

以上流程可借助Github Action实现自动化。