title: “我的博客搭建经验” date: 2022-05-05T00:17:58+08:00 lastmod: 2022-05-05T00:17:58+08:00

author: [“Sulv”]

keywords: categories: tags: [建站]

description: ""

weight: slug: "" draft: true # 是否为草稿 comments: true reward: true # 打赏 mermaid: true #是否开启mermaid showToc: true # 显示目录 TocOpen: true # 自动展开目录 hidemeta: false # 是否隐藏文章的元信息，如发布日期、作者等 disableShare: true # 底部不显示分享栏 showbreadcrumbs: true #顶部显示路径 cover: image: "" #图片路径例如：posts/tech/123/123.png caption: "" #图片底部描述 alt: "" relative: false

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

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 文件，丰富自己的博客内容。

2.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 第一种方法测试加载比较慢，直接引用启用「霞鹜文楷」(https://immmmm.com/lxgw-wenkai-webfont/) 在线字体博客中分享的 cdn。

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

2.3 更改代码块

2.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);
    /* 代码框按钮颜色 */
}

2.3.1 更改最大高度

修改文件 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);*/
}

2.4 添加 shortcode 支持

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

admonition 的 shortcode 语法为：

{{删除空格 }} 本站名称：有意栽花花满枝网站介绍：心中有光、点亮生活网站地址：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

author: [“Sulv”]#

description: ""#

1 快速开始#

1.1 安装 Hugo#

1.2 连接 Github#

1.3 下载博客源码#

1.4 本地构建#

1.5 部署到 Github#

2 基本使用#

2.1 修改基本信息#

2.2 更换字体#

2.3 更改代码块#

2.3.1 更改背景色#

2.3.1 更改最大高度#

2.4 添加 shortcode 支持#