我的博客搭建经验

更新提示

博客部署最新基于github仓库+cloudflare平台构建
取消了备案，不再使用又拍云相关服务，图片存储采用路过图床

博客源码：https://github.com/hjroyal/hugo-papermod-flowers

0 前言

对于一个没有前端基础的小白来说，搭建自己的博客一直感觉是一件很遥远的事。机缘之下看到一些风格独特的个人博客和学术大牛的主页，驱动着本小白尝试复现一下类似的效果，期望也能有自己的博客记录生活学习。幸运的是，世界上最大的代码托管平台Github提供了众多的开源博客项目，这为小白快速实现demo站创造了条件。下面简单回顾折腾的几个主题，或许提供给来访者一些经验。

第一次尝试，利用Python将类Markdown语言Jemdoc生成为Html，进一步将Html文件放到Github仓库并开启Pages服务，从而实现了静态网站的构建。Jemdoc主题在学术圈很受欢迎，特点是简洁、清爽，适合一行一行条目型文字为主。不足之处就是Jemdoc语言格式和Markdown还是有细微差别，不能直接转换，对于大量文字复杂格式需求不太适用。源项目地址为Jemdoc，优化版本Jemdoc2.0，拓展版njnmdoc，优秀示例推荐Bing Tan，使用说明参考关晓英。

考虑到Jemdoc的使用特点，加之中文出现过乱码问题，图片等处理稍显复杂，因此本小白目光投向了比较成熟的主流框架Jekyll、Hexo和Hugo。其中，Jekyll基于Ruby开发，Hexo基于node.js 开发，Hugo则是基于go语言开发的。这三大框架各有千秋，上手都比较容易。本小白选择的依据主要是主题的简洁美观、功能的丰富和扩展性。其实，这三种类型的主题均尝试过，最终选择Hugo PaperMod主题构建本站正是最符合上述需求。接下来简单介绍基于Jekyll、Hexo的几个主题，提供一个搭建的思路，最后详细介绍基于Hugo PaperMod的构建过程。

首先尝试Jekyll的Allan Lab主题。Allan实验室主页个性化之后，也比较适合个人主页。Allan实验室主页提供了源码和配置说明。关于具体操作参见Jekyll博客搭建详细教程经验贴。

除了基于Jekyll的主题，基于Hexo也有很多不错的主题，比如Keep和Fluid这两种风格，另外前端老哥的自定义主题也很符合我的审美，并且非常贴心博客也开源了。关于Hexo博客的搭建、定制和优化可以参考洪卫的介绍，博客中提供了面向新手非常详细的说明。熟悉框架之后，更换主题就可以得到不同的网站风格。

一般受欢迎的主题都有配置说明，按部就班就能复现效果。如果遇到了问题，善用搜索并相信：“大概这个问题不只有我一个人遇到吧！” 实在不能解决也可以联系发布源码的博主，多沟通交流。

下面正式步入主题，详细介绍基于Hugo PaperMod搭建本站的要点。

搭建过程主要参考了官方示例网站源码和博主Kevin Xu、SeerSu、loyayz的建站经验贴，在此表示特别感谢。

1 快速开始

先完成再完美！这部分目标是实现本地成功构建demo站并部署到Github pages。主要工作包括安装依赖、主题配置以及构建部署。

1.1 安装Hugo

进入Hugo仓库release页面下载对应系统最新extended版本。本文考虑在windows系统上安装，故下载hugo_extended_0.109.0_windows-amd64.zip。

下载完成后解压，将解压后文件夹放在平常系统软件安装目录下，并将地址添加到系统环境变量。比如解压文件夹地址为C:\Users\hj\Desktop\hugo_extended_0.109.0_windows-amd64，则可以右键【此电脑】→进入【高级系统设置】→点击【环境变量】→进入【系统变量】→双击【path】进入→ 添加上述地址确定并退出。验证是否安装成功，在命令行中输入hugo version，若返回版本信息，则证明安装成功，否则重启电脑再尝试或者重新安装。

1.2 连接Github

这一步不着急部署可以忽略，考虑先在本地测试，后期再部署到Github。

Git官网下载应用程序，默认安装，文件夹下右键出现git bash here，表示安装成功。安装Git是为了将本地文件上传到Github仓库中，并且也很方便下载远程仓库的文件。

安装好Git后，创建Github账号与username.github.io仓库，并本地配置好与Github账号的连接，具体可以参考廖雪峰的Git教程。

1.3 下载博客源码

如果心仪一款博客主题，并且开源了源码，很容易在此基础上修改自定义。比如博主Kevin Xu在关于页面提供了[源码]，根据链接从Github下载sulv-hugo-papermod项目源码和主题源码。如果成功安装了Git，可以利用命令行下载。

git clone  git@github.com:xyming108/sulv-hugo-papermod.git
git clone  git@github.com:adityatelange/hugo-PaperMod.git

此时，所在文件目录下应该有两个文件夹hugo-PaperMod和sulv-hugo-papermod，前者为主题，后者是hugo网站项目框架。将hugo-PaperMod放到sulv-hugo-papermod里面的文件夹themes下面。整个项目源码结构如下所示，官网解释参见Directory Structure。具体含义和作用可以先不必研究，下面先成功构建demo站效果，增强信心。

sulv-hugo-papermod项目结构

├─.idea
├─archetypes 存放博客文章模板，预设好markdwon元数据
├─assets     存放样式css文件
│  ├─css
│  │  ├─common
│  │  ├─core
│  │  ├─extended 存放自定义扩展样式
│  │  ├─hljs
│  │  └─includes
│  └─js
├─content 存放博客文章、关于页、友链页
│  ├─posts
│  │  ├─blog
│  │  ├─life
│  │  ├─read
│  │  └─tech
│  └─tags
├─data
├─i18n
├─layouts  存放布局格式html文件
│  ├─partials
│  │  └─templates
│  ├─shortcodes   存放自定义短代码
│  └─_default
│      └─_markup
├─resources
│  └─_gen
├─static   存放字体、头像等图片
│  ├─fonts
│  └─img
└─themes   存放主题文件
    └─hugo-PaperMod
        ├─.github
        │  ├─ISSUE_TEMPLATE
        │  └─workflows
        ├─assets
        │  ├─css
        │  │  ├─common
        │  │  ├─core
        │  │  ├─extended
        │  │  ├─hljs
        │  │  └─includes
        │  └─js
        ├─i18n
        ├─images
        └─layouts
            ├─partials
            │  └─templates
            ├─shortcodes
            └─_default
                └─_markup

1.4 本地构建

成功安装hugo后，就可以在本地预览网站效果了。命令很简单，在项目sulv-hugo-papermod文件夹根目录，windows地址栏输入 cmd，导航到当前项目地址，在命令行中输入 hugo server，就会生成一个localhost地址，将地址粘贴到浏览器，就能看到demo站效果了。为了方便后续修改，可以在编辑器中打开，比如vscdoe，在终端中运行 hugo server也有同样的效果。需要构建草稿文章，使用命令hugo server -D。

对于想尝试不同主题的小伙伴，只需将hugo主题文件放在themes文件夹下，并在配置文件config.yml中填写对应主题名，比如theme: hugo-PaperMod ，则可以在本地预览各种主题效果。

1.5 部署到Github

在正常连接到github的情况下，在项目根目录命令行运行 hugo命令，就会生成public文件夹。public文件夹下的所有文件上传到github的仓库 username.github.io，等待一段时间就能通过地址https://username.github.io访问与本地预览相同的效果。其中username需替换为Github的用户名。

在此过程中，遇到一个严重问题，部署到Github Pages，渲染的网页样式丢失。根据博客，解决了该问题，需要在config.yml中assets属性添加一行disableFingerprinting: true。

# 这里的参数会被代码以 .Site.Params 的形式读取
params:

  assets:
    favicon: "img/profile.webp"
    favicon16x16: "img/profile.webp"
    favicon32x32: "img/profile.webp"
    apple_touch_icon: "img/profile.webp"
    safari_pinned_tab: "img/profile.webp"
    disableFingerprinting: true #解决部署到github pages，样式丢失问题

到此为止，基本的流程全部完成，我们已经成功搭建好了demo网站。接下来就是根据自己需要微调一些参数，然后记录、创作自己的知识和资料库了。

2 基本使用

2.1 修改基本信息

更改网站名称、主页信息等大部分内容在文件config.yml中修改对应内容。sulv-hugo-papermod项目作者注释较多，可根据说明更改为自己的信息。除此之外，修改content文件夹下面的about.md更改关于页信息，修改links.md添加友链信息，然后在content/posts下添加markdown文件，丰富自己的博客内容。

博客发布内容组织结构

│  .DS_Store
│  about.md
│  archives.md
│  links.md
│  search.md
│
├─posts
│  │  .DS_Store
│  │  _index.md
│  │
│  ├─blog
│  │      .DS_Store
│  │      blog.md
│  │      _index.md
│  │
│  ├─life
│  │  │  .DS_Store
│  │  │  life.md
│  │  │  test.md
│  │  │  _index.md
│  │  │
│  │  └─test
│  │          doll.jpg
│  │
│  ├─read
│  │      .DS_Store
│  │      read.md
│  │      _index.md
│  │
│  └─tech
│          .DS_Store
│          tech.md
│          _index.md
│
└─tags
        _index.md

2.2 创建博客

如果sulv-hugo-papermod项目博主的主题满足你的需求，不想折腾，那么并不需要管其他文件夹下面的内容，除了content文件夹。content/posts下面包含四个分区，分别对应博客的分类，在对应文件夹下创建markdown文件，后续将由此构建网页。创建博客可以通过命令行完成，比如hugo new posts/life/test.md将在life文件夹下面生成test.md。

值得注意的是，用于markdown中的本地图片，需要放在同名文件夹下。项目结构如上所示。其中，test.md有一个同名文件夹放test.md中使用的图片doll.jpg。

2.3 连接Netlify

Github国内访问受限，可考虑连接到Netlify，实现免费的CDN加速，当然效果有限，但一般比Github快一些。从Github到Netlify，只需要Github账号绑定Netlify服务即可。直观上可以由域名https://username.github.io → https://username.netlify.app。

进入Netlify官网，点击Sign up注册，通过Github方式授权登入。在Sites信息框处点击Add new site，选择Import an existing project，由Github授权进入，选择仓库username/username.github.io。然后Netlify会根据仓库构建静态网站。Site settings处可以更改域名前缀，Domain Settings可以绑定自定义域名。

2.4 使用又拍云

Netlify始终是根据Github 仓库构建的静态网站，速度方面只能说差强人意。一种低成本的解决方式是通过国内云存储和cdn加速。这里我考虑了又拍云联盟，可以有10GB免费存储空间和15GB免费 CDN 流量，对于一个小站来说一般完全够用了。值得注意的是，使用又拍云需要备案域名，否则无法加速托管到Github的Pages服务。

使用图床

一方面使用又拍云CDN加速可以改善访问速度。另一方面，又拍云还提供了每月10GB免费存储，这远远满足一个小站的图片存储需求。因此，思路是将图片存放到又拍云上，通过链接访问。直接本地图片上传会放到Github仓库中，一是空间不太大，二是访问速度慢。为了方便图床管理，搭配使用PicGo工具。下面介绍安装配置要点。

(1) 下载PicGo。

(2) 新建又拍云“云存储”服务。配置服务名称，应用场景选网页图片，类型选标准类型。新建图床操作员，记下名称和密码，需要在PicGo中配置授权访问又拍云。

(3) 又拍云图床绑定域名。新建一个图床的子域名，并解析到又拍云，申请免费SSL证书，并开启https。配置域名后，进行下一步。

(4) 配置PicGo。图床设置–又拍云下依次填写：又拍云云存储名称、操作员名称、操作员密码、图床域名、（网址后缀、存储路径）。

(5) 配置图片路径。为了方便子啊图床中管理和查看图片，最好设置好图片路径。在PicGo中，安装插件rename-file，并在插件中配置文件路径格式。

图床使用：将图片拖放到上传区，复制需要的格式，嵌入到博客文章中，就完成了图片的配置。

至此，整个博客站点的搭配是Github pages + 又拍云CDN加速 + 又拍云存储。

2.5 GitHub Action

每次生成public再上传，过程比较繁琐。此外，Github Pages 构建静态网页默认基于Jekyll，hugo生成的网页默认部署可能会产生问题。为了解决上述问题，采用 GitHub Action自动部署博客网页。这也能对源码进行版本管理，如果不想公开源码，可以设置仓库为私有模式。

详细参考文章：Hugo + GitHub Action，搭建你的博客自动发布系统

常用git命令总结：

git clone git@github.com:sjtuhj/hj-hugo-papermod-demo.git
git init
git submodule add https://github.com/adityatelange/hugo-PaperMod themes/hugo-PaperMod
git submodule update --init --recursive
git submodule update --remote
git add .
git commit -m "demo blog"
git push origin master

手动发布到Github Pages一般使用命令

hugo
cd public/

git init
git remote add origin git@github.com:yourname/yourname.github.io
git add .
git commit -m "demo blog"

git push origin master

自动发布到Github Pages一般流程

初始化本地源文件仓库，并在 Github 新建源码仓库，比如hj-hugo-papermod-demo。

新建工作流配置文件：

.github/workflows/deploy.yml

name: deploy

on:
    push:
    workflow_dispatch:
    schedule:
        # Runs everyday at 8:00 AM
        - cron: "0 0 * * *"

jobs:
    build:
        runs-on: ubuntu-latest
        steps:
            - name: Checkout
              uses: actions/checkout@v2
              with:
                  submodules: true
                  fetch-depth: 0

            - name: Setup Hugo
              uses: peaceiris/actions-hugo@v2
              with:
                  hugo-version: "latest"

            - name: Build Web
              run: hugo

            - name: Deploy Web
              uses: peaceiris/actions-gh-pages@v3
              with:
                  PERSONAL_TOKEN: ${{ secrets.PERSONAL_TOKEN }}  #密匙名称PERSONAL_TOKEN要与github上对应
                  EXTERNAL_REPOSITORY: yourname/yourname.github.io #你的仓库名
                  PUBLISH_BRANCH: master
                  PUBLISH_DIR: ./public
                  commit_message: ${{ github.event.head_commit.message }}

为了让源码仓库推送文件到外部Github Pages仓库，需要在Github建立密匙，并配置到源码仓库。由用户名处全局Setting - Developer setting - Personal access tokens下点击Generate new token，生成密匙，开启repo和workflow权限，并记录。下一步将token由博客源码Setting - Secrets and variables - Actions - New repository secret新建密匙名和放置上一步产生的token。并把密匙名和仓库命配置到deploy.yml。

使用如下命令就能将源码发布到一个仓，然后自动部署到另一个仓库。

git init
git remote add origin git@github.com:sjtuhj/hj-hugo-papermod-demo
git add .
git commit -m "demo blog source"

git push origin master

3 个性化配置

本部分记录基于sulv-hugo-papermod自定义和丰富功能中遇到的问题。

3.1 添加英文站

原版PaperMod主题支持三种语言，自然地联想设置中英双语网站。我的想法是中文站作为主要分享记录，英文站记录英语笔记提高写作能力。PaperMod主题很容易实现，并且标签、分类等元素都完全分开，互不干扰，完全相当于两个网站。

config.yml

defaultContentLanguage: cn # 最顶部首先展示的语言页面
defaultContentLanguageInSubdir: false #影响网站路径定向

languages:
  cn:
    languageName: "中文"
    languageAltTitle: Chinese
    weight: 1
    title: 有意栽花花满枝
    homeInfoParams:
      Title: "哈啰，你好！🥂"
      Content: 
    menu:
      main:
        - identifier: search
          name: 🔍 搜索
          url: search
          weight: 1
        # - identifier: home
        #   name: 🏠 主页
        #   url: /
        #   weight: 2
        # - identifier: posts
        #   name: 📚 文章
        #   url: posts
        #   weight: 3
        - identifier: tags
          name: 🧩 标签
          url: tags
          weight: 15
        - identifier: archives
          name: ⏱ 时间轴
          url: archives/
          weight: 20
        # - identifier: about
        #   name: 🙋🏻‍♂️ 关于
        #   url: about
        #   weight: 50
        - identifier: links
          name: 🤝 友链
          url: links
          weight: 60
        # - name: WiKi
        #   url: https://github.com/adityatelange/hugo-PaperMod/wiki/
        # - name: Discord
        #   url: https://discord.gg/ahpmTvhVmp

  en:
    languageName: "English"
    languageAltTitle: 英文
    weight: 2
    title: Royal Huang
    homeInfoParams:
      Title: "Hi there \U0001F44B"
      Content: 

    menu:
      main:
        - name: 🏷️Tags
          url: tags/
          weight: 3
        - name: 🗃️Series
          url: series/
          weight: 5
        - name: 📂Archives
          url: archives/
          weight: 10
        - name: 🔍️Search
          url: search/
          weight: 1
        # - name: NullLink
        #   url: "#"
taxonomies: #最外层
  category: categories
  tag: tags
  series: series

配置的地方主要包括 config.yml的语言属性。其他地方要注意的是，因为开通了中英双站，一些地址需要加cn。比如本文封面图片地址为：

cover:
    image: "cn/posts/projects/2020-09-myblog/hugo.png" 
    #图片路径例如：cn/posts/tech/123/123.png 
    #英文站同样使用cn主站地址                                   
    caption: "" #图片底部描述
    alt: ""
    relative: false

补充：想配置完全中英文互译的站点，可以参加博主AimerNeige的博客源码。

多语言版本，重定向路径问题参考：Hugo 多语言站点中 404 页面的重定向规则

3.2 更换字体

方式1

一个好的字体对阅读的舒适感提升很有帮助，本站采用的是开源可免费商用字体霞鹜文楷。落霞与孤鹜齐飞，秋水共长天一色，字如其名。改动的地方有3处。

首先需要从霞鹜文楷仓库下载后缀名为ttf的字体文件放到如下地址static\fonts\LXGWWenKai-Regular.ttf。

然后在此处assets/css/extended/fonts.css添加导入字体。

@font-face {
    font-family: "LXGWWenKai-Light";
    src: url("/fonts/LXGWWenKai-Light.ttf") format("truetype");
}
@font-face {
    font-family: "LXGWWenKai-Regular";
    src: url("/fonts/LXGWWenKai-Regular.ttf") format("truetype");
}

最后在assets\css\extended\blank.css中添加字体。

.post-content {
    font-family: LXGWWenKai-Regular, LXGWWenKai-Light, Verdana, sans-serif;

}
body {
    font-size: 18px;
    line-height: 1.6;
    font-family: LXGWWenKai-Regular, LXGWWenKai-Light, Verdana, sans-serif;

}

也别忘了在assets\css\extended\admonition.css处修改admonition注释框中的字体。

body,
.admonition {

    font-family: LXGWWenKai-Regular, LXGWWenKai-Light, sans-serif, Arial
}

方式2

第一种方法测试加载比较慢，直接引用启用「霞鹜文楷」在线字体博客中分享的cdn。

在layouts_default\baseof.html处，加入如下代码，并在方法1中的地方加入字体名称"LXGW WenKai Screen"。

<body>

<link rel="stylesheet" href="https://cdn.staticfile.org/lxgw-wenkai-screen-webfont/1.6.0/lxgwwenkaiscreen.css" media="print" onload="this.media='all'">

</body>

3.3 更改代码块

3.3.1 更改背景色

原版代码块日间模式背景色为黑色，稍显突兀，故修改代码块背景颜色为浅色。更改文件assets\css\common\post-single.css下述位置color和background参数。

.post-content pre code {
    display: block;
    margin: auto 0;
    padding: 10px;
    /* color: rgb(213, 213, 214); */
    /* 代码颜色color */
    color: rgb(12, 12, 14);
    background: var(--hljs-bg) !important;
    /* 代码框背景色hljs-bg*/
    border-radius: var(--radius);
    overflow-x: auto;
    word-break: break-all;
}

此外，由于调整了背景色，代码框按钮颜色也需要调整。修改assets\css\includes\scroll-bar.css文件，下述位置。

.post-content :not(table) ::-webkit-scrollbar-thumb {
    border: 2px solid var(--hljs-bg);
    /* background: rgb(113, 113, 117); */
    background: rgb(198, 198, 201);
    /* 代码框按钮颜色 */
}

3.3.2 更改最大高度

修改文件assets\css\extended\code.css，下述位置对应参数。

.post-content pre code {
    max-height: 40em;
    /* 控制日间模式最大代码行高度 */
    margin-bottom: 2%;
    /* background: var(--tag); */
    /*box-shadow: 5px 5px 5px rgb(68 68 68 / 60%);*/
    background: var(--entry);
    /*border: 2px 2px 2px 0px solid black;*/
    /* background: rgb(225, 232, 240); */
}

.dark .post-content pre code {
    max-height: 40em;
    /* 控制夜间模式最大代码行高度 */
    margin-bottom: 2%;
    /* color: rgba(180, 181, 182, 0.8); */
    color: #0b0c0c;
    /*box-shadow: 5px 5px 5px rgb(68 68 68 / 60%);*/
    background: var(--hljs-bg);
    /* border: 2px 2px 2px 0px solid black; */
    /*background: var(--tertiary);*/
}

注：换回了黑色底色，护眼也挺好的~

3.4 添加shortcode支持

admonition折叠框

Hugo添加admonition支持，参考文章：移植admonition到Papermod。

admonition的shortcode语法为：

{{< admonition type=quote title=“我的链接” open=true >}}
本站名称: 有意栽花花满枝
网站介绍：心中有光、点亮生活
网站地址：https://blog.hjroyal.top
网站头像：https://blog.hjroyal.top/img/profile.webp
{{< /admonition >}}

效果如下：

我的链接

本站名称: 有意栽花花满枝
网站介绍：心中有光、点亮生活
网站地址：https://blog.hjroyal.top
网站头像：https://blog.hjroyal.top/img/profile.webp

admonition背景框有多种变体，type可选参数为：tip、note、abstract、info、success、question、warning、failure、danger、bug、example、quote共12种，移植于DoIt系列主题。

其他

实现其他shortcode功能参考博客： Hugo shortcodes 短代码、Hugo博客自定义shortcodes、Hugo Shortcodes 示例

3.5 添加网页特效

在项目根目录layouts/_default/baseof.html下述位置body标签处添加雪花特效代码。

layouts/_default/baseof.html

<!DOCTYPE html>
<html lang="{{ .Site.Language }}" dir="{{ .Language.LanguageDirection | default "auto" }}">
<head>
    {{- partial "head.html" . }}
</head>
<body class="
{{- if (or (ne .Kind `page` ) (eq .Layout `archives`) (eq .Layout `search`) (eq .Layout `tags`) (eq .Layout `about`) (eq .Layout `links`)) -}}
{{- print "list" -}}
{{- end -}}
{{- if eq $.Site.Params.defaultTheme `dark` -}}
{{- print " dark" }}
{{- end -}}
" id="top">
{{- partialCached "header.html" . .Page -}}
<main class="main {{- if (eq .Kind `page`) -}}{{- print " page" -}}{{- end -}}">
{{- block "main" . }}{{ end }}
</main>
{{ partialCached "footer.html" . .Layout .Kind (.Param "hideFooter") (.Param "ShowCodeCopyButtons") -}}

<!-- 添加下雪特效 -->
<script src="https://unpkg.com/magic-snowflakes/dist/snowflakes.min.js"></script>
<script>
    var sf = new Snowflakes({
        speed: 0.5
    });
</script>
<!-- 添加下雪特效 -->

</body>

</html>

其他特效参见接口：韩小韩API接口站。

3.6 添加评论系统

参考：Hugo博客添加Twikoo评论

特别注意！根据上述视频和方法配置后，需要科学上网才能加载评论区。为了方便国内访问，需要绑定vercel域名，也就是更换id为国内的域名。

操作方法为：

进入vercel评论系统项目，如twikoo-api，进入settings。
点击侧栏Domains，为评论项目绑定国内域名，如vercel.hjroyal.top。
添加后，根据cname，解析到主域名下。
hugo配置文件中，更改id，如https://vercel.hjroyal.top。

3.7 添加Latex支持

参考博客：在Hugo PaperMod主题中加入数学支持的最简方式

测试 $$ x^2+y^3+z^t=z^p $$

3.8 添加license

参考博主loyayz博客源码。

3.9 添加随机图片

参考文章：PaperModx 模板：随机显示图片

因 Hugo 会自动解析模板，这里 {{ 和 < 之间有个空格，使用时记得删除

最简方式

完整参数

{{ < random_image width=“940” height=“278” topic=“cat” class="" >}}

3.10 新标签页外链

参考：Hugo 用新标签页打开外部链接

再也不用鼠标右键新建标签页打开链接了，改善阅读体验。

3.11 面包屑导航

参考：PaperMod 文章页底部添加面包屑导航。

文章底部显示分类信息。

3.12 添加文章标识

参考：PaperMod 列表文章标题后添加标识

通过设置front matter参数weight: 1和outer: false 可为列表中的文章添加对应的置顶和转载标识：[top]、[outer]。

3.13 分类合并到搜索页

参考文章：PaperModx 定制搜索页

搜索页添加系列和标签，精简分类。

4 心得体会

从2020年就有想法建设自己的站点，期间一直断断续续尝试不同主题，现在最终确定了基于Hugo PaperMod的主题，满足本人功能可扩展、具有清爽风格的需求。其实，博客主题适合自己就好，最重要的还是坚持记录输出内容。不过，搭建好框架也是很重要的一步。正如俗话说，万事开头难。我的第一步也是不容易。由于不是专业的网络开发者、前端工程师，因此很多地方不是很懂，需要交叉对比，不断本地预览效果。采取这种笨方法建立起了本站。

倒腾的时间也没白费，了解到了不少网络开发内容。更重要的是，建立起个人网站打好了框架，也能够驱动自己以后不断总结学习工作生活中的经验、感悟。给自己一个机会和理由，找个地方静下心来思考，也是一件美妙的事情。

5 致谢

博客成功搭建参考了许多经验贴和开源博客主题，对此表示诚挚的谢意。

0 前言#

1 快速开始#

1.1 安装Hugo#

1.2 连接Github#

1.3 下载博客源码#

1.4 本地构建#

1.5 部署到Github#

2 基本使用#

2.1 修改基本信息#

2.2 创建博客#

2.3 连接Netlify#

2.4 使用又拍云#

2.5 GitHub Action#

3 个性化配置#

3.1 添加英文站#

3.2 更换字体#

3.3 更改代码块#

3.4 添加shortcode支持#

3.5 添加网页特效#

3.6 添加评论系统#

3.7 添加Latex支持#

3.8 添加license#

3.9 添加随机图片#

3.10 新标签页外链#

3.11 面包屑导航#

3.12 添加文章标识#

3.13 分类合并到搜索页#

4 心得体会#

5 致谢#

0 前言

1 快速开始

1.1 安装Hugo

1.2 连接Github

1.3 下载博客源码

1.4 本地构建

1.5 部署到Github

2 基本使用

2.1 修改基本信息

2.2 创建博客

2.3 连接Netlify

2.4 使用又拍云

2.5 GitHub Action

3 个性化配置

3.1 添加英文站

3.2 更换字体

3.3 更改代码块

3.4 添加shortcode支持

3.5 添加网页特效

3.6 添加评论系统

3.7 添加Latex支持

3.8 添加license

3.9 添加随机图片

3.10 新标签页外链

3.11 面包屑导航

3.12 添加文章标识

3.13 分类合并到搜索页

4 心得体会

5 致谢