前言

突发奇想想做个博客，受到 Dejavu 的启发选择了 Hugo + PaperMod 。因为想要做到真正的高可用，所以选择了 Cloudflare Pages1 。实际上，在使用过程中，Cloudflare Pages 的编译和发布速度都相当的快。

安装 Hugo

我使用的是 Ubuntu 下的snap进行快速安装

$ snap install hugo

在 Windows 系统下，我还是建议 使用 scoop 管理 Windows 下的软件和开发环境，安装 Hugo 也很简单

$ scoop install hugo-extended

初始化博客

这步是在本地新建一个 blog目录存放博客相关的文件，并初始化 git

$ hugo new site blog
$ cd blog  &&  git init

设置默认分支为 main

$ git config --global init.defaultBranch main

安装主题

博客使用 git 进行版本管理，所以如果使用 git 方式安装主题的话，要将主题添加给 git 子模块

## Git 方式安装主题
$ git clone https://github.com/adityatelange/hugo-PaperMod themes/PaperMod --depth=1
# 添加 Hugo-Papermod 主题为子模块
$ git submodule add https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod
# 如果以后从 Git 托管平台克隆博客的时候，子模块可能不会被克隆（比如 GitHub）
# 修改子模块中的文件在`git commit`时无效
$ git submodule update --init --recursive

现在这个博客路径如下

blog:.
│   .gitmodules      # Git 子模块
│   config.toml      # Hugo 配置文件，建议转换成 Yaml 格式
├───archetypes     # 模板，类似于 Hexo 的 scaffolds
│       default.md   # 默认模板
├───content        # 内容路径，文章和页面的 Markdown 文件都放这里
├───data           # 储存供模板调用的数据文件？暂时用不上不管它
├───layouts        # 布局目录
├───static         # 静态文件目录(构建时全部拷贝到 /public 里，相当于网站资源的根目录)
└───themes         # 主题目录

修改配置

博主习惯使用yaml而不是默认的toml，所以使用了config.yaml并删除了原有的config.toml

$ rm config.toml
$ touch config.yaml
$ vim config.yaml #使用 vim 编辑，你也可以选择使用 vi, nano 等

配置文件

#基础配置
baseURL: "https://www.cestlavie.moe"#站点地址
title: "C'est la vie"#站点标题
languageCode: "zh" # 语 言 编 码 (如 简 体 中 文 : zh)
DefaultContentLanguage: "zh"
hasCJKLanguage: true  # 检 测  CJK
paginate: 6           # 每 个 分 页 文 章 数
paginatePath: "page"
permalinks:           # 永 久 连 结 格 式
        post: /:slug/
        page: /:filename/
theme: "PaperMod"#使用的主题
enableInlineShortcodes: true # 短 代 码 支 持
enableRobotsTXT: true # 启 用  Robots.txt
buildDrafts: false #不生成标记为草稿的文章
buildFuture: false
buildExpired: false
enableEmoji: true
enableGitInfo: true
pygmentsUseClasses: true

#高级配置
outputs:
        home:
                - HTML
                - JSON
                - RSS 
params:
        ShowFullTextinRSS: true #启用 RSS
        env: production
        defaultTheme: auto
        disableScrollToTop: false
        ShowWordCount: true
        ShowShareButtons: true
        ShareButtons: ['telegram'] #显示分享按钮 可选 twitter, linkedin, reddit, facebook, whatsapp, telegram
        socialIcons: #社交平台小图标 支持列表 https://adityatelange.github.io/hugo-PaperMod/posts/papermod/papermod-icons/
                - name: 'github'
                  url: https://www.github.com/Jonathan523
                - name: 'telegram'
                  url: https://t.me/azureforstudent
                - name: 'email'
                  url: mailto:admin@cestlavie.moe
                - name: 'rss'
                  url: https://www.cestlavie.moe/index.xml
                - name: 'pgp'
                  url: https://pgp.cestlavie.moe/
        homeInfoParams:
                Title: "Hi there \U0001F44B" #博客主页上的大标题
                Content: I am **Jonathan Zhang**. Welcome
to my personal blog! Here I share my **thoughts**, **opinions** and **life journal** #博客主页上的介绍

其他的配置参考 Hugo 文档 & Papermod 主题文档 就好啦~

添加评论系统

在配置文件中添加启用评论。

params:
  comments: true

选择评论系统

博主此处选择的是支持支持多语言、自定义主题、高级配置的giscus。

配置评论系统

创建用于存储评论的 GitHub 存储库

我们需要创建一个公开的 GitHub 存储库并在存储库设置中启用Discussions功能。

安装 Giscus App

打开浏览器，点击 安装 Giscus App，如果不想授权所有 GitHub 存储库，可以只选择用于评论的存储库。 在 Giscus Website 设置语言、GitHub 存储库和个性化配置，博主使用的是 pathname 在下面可以看到启用 Giscus 的配置，比如我的就是：

<script src="https://giscus.app/client.js"
        data-repo="Jonathan523/CestlavieMoe"
        data-repo-id="R_kgDOIsRLLA"
        data-category="General"
        data-category-id="DIC_kwDOIsRLLM4CTTw2"
        data-mapping="pathname"
        data-strict="1"
        data-reactions-enabled="1"
        data-emit-metadata="1"
        data-input-position="top"
        data-theme="preferred_color_scheme"
        data-lang="zh-CN"
        data-loading="lazy"
        crossorigin="anonymous"
        async>
</script>

配置 Hugo

只需要在博客根目录的/layouts/partials/ 下新建一个 comments.html 文件，将上一步启用 Giscus 时的配置粘贴进去保存

$ mkdir -p /layouts/partials/
$ vim comments.html

创建菜单

配置文件中添加以下内容

menu:
        main:
                - identifier: home
                  name: 首页
                  url: /
                  weight: 0
                - identifier: categories
                  name: 分类
                  url: /categories/
                  weight: 2
                - identifier: tags
                  name: 标签
                  url: /tags/
                  weight: 3
                - identifier: archives
                  name: 归档
                  url: /archives/
                  weight: 1
                - identifier: search
                  name: 搜索
                  url: /search/
                  weight: 6
                - identifier: links
                  name: 友链
                  url: /links/
                  weight: 5
                - identifier: about
                  name: 关于
                  url: /about/
                  weight: 4

然后生成对应文件，tags和categories无需生成 在博客根目录下运行

$ hugo new archives.md
$ hugo new search.md

然后在 /content/archives.md 写入

---
title: "归档"
layout: "archives"
url: "/archives/"
summary: archives
---

在 /content/search.md 写入

---
title: "搜索" # in any language you want
layout: "search" # is necessary
url: "/search"
description: "输入关键词以检索内容"
summary: "search"
placeholder: "搜索"
---

配置菜单页的中文标题

默认情况下，菜单也中的分类和标签页的默认标题为英文。为了将其自定义为中文，我们需要在/content目录中新建/tags和/categories目录，并配置好_index.md。 例如

---
title: "标签"
---

完成后提交生成即可

参考文献

  1. Cloudflare Pages还有无限流量、部署方便快速、全球低延迟访问的特点 ↩︎