一、Hugo 配置 Blowfish 主题 #
1、新建一个网站根目录 #
在下载的含有 hugo.exe 文件的目录中，输入 cmd 打开命令行窗口，输入命令：
hugo new site mywebsite
这里的 mywebsite 文件夹就是我们新建的网站的根目录，牢记该目录，后续很多操作都需要在该目录下进行。
2、切换到刚刚新建的文件夹 #
3、初始化一个新的 git 仓库并将 Blowfish 添加为子模块。
#
git init
git submodule add -b main https://github.com/nunocoracao/blowfish.git themes/blowfish
4、设置主题的配置文件 #
在根目录 mywebsite 中，删除 Hugo 自动生成的 hugo.toml 文件。从主题中复制 config 文件夹中的 *.toml 文件，粘贴到 config/_default/ 目录（若没有该文件夹，可直接将主题中的 config 文件夹复制到根目录下）中。
5、基础设置 #
在刚刚安装完成，创建内容之前，有几个设置需要关注。从 hugo.toml 开始，设置 baseURL 和 languageCode 参数。languageCode参数是用来指定你创作内容的主要语言。
尽管 Blowfish 支持多语言，但是 hugo.toml 只能配置一个主语言。在 config/_default 文件夹中找到 languages.en.toml。如果你的主语言是英语，你可以直接使用此文件。否则需要重命名为主语言对应的文件名。例如，如果主语言是简体中文，那么需要将文件命名为 languages.fr.toml。然后编辑该文件内的相应部分，
**注意：**语言配置文件名中的语言代码需要与 hugo.toml 中 languageCode 相匹配，另外 Blowfish 中的为 “zh-cn”。故对 hugo.toml w 文件作出如下修改：
6、文章缩略图 #
在 content\posts\yourpostfile 目录下添加一个以 feature* 开头的特征图片（推荐使用 .png 或 .jpg），这就是 yourpostfile 目录中 index.md 的特征图片，在网站中作为缩略图使用。
实际效果如下，
7、自定义自己的网站图标 #
网站图标——Favicon 是 favorites icon 的缩写，又称为 website icon（网页图标）、page icon （页面图标）或者 url icon（URL 图标）。可以使用 https://favicon.io/favicon-generator/ 自定义生成自己喜欢的图标并下载下来。
将下载后的图标资源解压放在 static/ 文件夹中，并务必按照如下的名称命名。如果你使用了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
然后，在 config/_default/params.toml 中添加基础配置，
[params]
favicon = "favicon.ico"
接着，在根目录下新建一个文件 layouts/partials/favicons.html，在其中写入：
<!-- Apple -->
<link rel="apple-touch-icon" sizes="180x180" href="{{ "apple-touch-icon.png" | relURL }}">
<!-- PNG Favicon -->
<link rel="icon" type="image/png" sizes="32x32" href="{{ "favicon-32x32.png" | relURL }}">
<link rel="icon" type="image/png" sizes="16x16" href="{{ "favicon-16x16.png" | relURL }}">
<!-- Manifest -->
<link rel="manifest" href="{{ "site.webmanifest" | relURL }}">
<!-- Safari -->
<link rel="mask-icon" href="{{ "safari-pinned-tab.svg" | relURL }}" color="#5bbad5">
<!-- ICO fallback -->
<link rel="shortcut icon" href="{{ "favicon.ico" | relURL }}">
<!-- Windows -->
<meta name="msapplication-TileColor" content="#2b5797">
<meta name="msapplication-TileImage" content="{{ "mstile-150x150.png" | relURL }}">
<meta name="theme-color" content="#ffffff">
这样 Blowfish 原有的 head.html 会继续引入 <meta charset="utf-8"> 等必需信息，你的 favicon 代码也会插入，不会乱码。
最后，进行测试，在根目录下打开命令行窗口，输入：
hugo server -D
效果如下，
关于网站页面内的图标展示，需要修改根目录下 config/_default/languages.zh-cn.toml 中的 params.logo，这里的 logo 大小为 64*64 的 png。
二、GitHub 部署 #
参考:
[1]. 使用 Hugo 和 Github Pages 服务从零开始搭建个人博客_hugo 中文文档-CSDN 博客
[2]. https://blowfish.page/zh-cn/docs/installation/
[3]. (27 封私信 / 62 条消息) 10 分钟部署你的 blog 网站到 github pages - 知乎
1、新建一个仓库，点击 GitHub 个人主页的 New
2、输入仓库名称，以及设置为公共访问：
3、到 MyBlog 中的 Hugo.toml 中修改链接，即更换成自己的 GitHub 仓库链接，
4、保存后，MyBlog 目录中会自动生成一个 public 文件夹，
将其删除，使用 cmd 重新生成一个，
5、双击 public 打开后，使用 cmd 打开命令行窗口，输入以下代码：
git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/teliduxingdimiao/teliduxingdimiao.github.io.git
git push -u origin main
输入第三行代码报错，原因是未配置 GitHub 用户名和邮箱，解决方法如下：
拓展：GitHub 用户名与昵称 https://gitwebcn.com/47996.html
git config --global user.email "xxxxxx@xx.com" # 注册 GitHub 的邮箱
git config --global user.name "xxxxxx" # GitHub 的用户名
配置完成后，运行成功，
最后一行代码。可能需要登陆，
6、回到 GitHub 的个人仓库，可以看到我们的个人博客仓库已经建好了，点开看一些有哪些内容，
接下来，需要开启静态页面，点击 Setting，
找到左边栏 Pages，进行修改：
等待一段时间后，当前页面显示如下，个人博客即部署完成。
三、集成 Firebase 获取阅读量和点赞量 #
1、Firebase 托管 #
首先，使用您的 Google 帐户免费注册一个 Firebase 账号，https://firebase.google.com/?hl=zh-cn 点击官方链接，在首页点击右上角的 “Go to console” 控制台，
跳转到欢迎页面，然后点击 “创建新的 Firebase 项目”，
输入自己的项目名称，
然后，点击继续，直到 “配置 Google Analytics“，选择默认的账号，
接下来，需要等待一段时间，完成资源配置，
配置完成后，页面跳转到该新建项目首页，点击创建 web 按钮，
按照流程进行设置，
第二步中的 SDK 可以先不复制，完成设置后可以到项目设置里查看，
然后，win + R 输入 cmd 启动命令行窗口，输入命令 npm install -g firebase-tools 安装 Firebase CLI，注意：这里需要先安装好 Node.js 才能使用 npm。
步骤 4 中的立即部署提到的 Web 应用的根目录，指的是本机中创建的 Hugo 网站的项目根目录，例如 hugo\myblog，
设置完成后，可以看到，新建的 Web 应用以及右边的设置按钮，
点击设置，在常规页面滚轮下滑，找到 ”SDK 设置和配置“ 复制，
将其中的配置信息复制到本地项目根目录中的 config/_default/params.toml，覆盖原有的 firebase 标签，
注意，修改格式，改成等号和删除逗号，下图为示例（非严格相同），
2、配置 Authentication #
在新建的 Firebase 项目的主页面点击 “所有产品” ，再点击 Authentication，
点击开始，选择登陆方法为匿名，
然后配置 Firstore，回到项目主页面，点击所有产品，选择 Cloud Firestore 创建数据库，选择数据库位置（视情况而定，推荐选近一点的），默认以生产模式开始，
创建成功后，会跳转到以下页面，
3、检验效果 #
回到本地 Hugo 项目根目录中，打开命令行窗口，执行 hugo server访问本地网站，在首页页面中右键点击 “查看页面源代码”，可以看到先前的配置信息，
然后回到我们的本地项目根目录中的 config/_default/params.toml，找到 article.showViews 和 article.Links，将其修改为 true，才能显示文章和列表页面的阅读量。
接下来，就是将修改同步到项目根目录中的 public，即在命令行窗口中输入 hugo，然后 cd public进入到 public 目录，将修改推送到 GitHub Pages 仓库，即
git add .
git commit -m "update"
git push
访问我们的 hugo 网站就可以在文章下方看到阅读量和点赞量了。Happy！！！
四、创建文章及上传 #
1、创建一篇 Blog #
这里提供两种方法：
方法一 #
在项目根目录下，启动命令行窗口，输入一下命令，
hugo new content posts/Article01.md # 自命名文章名称
这样就可以在 content/posts 目录下生成一个 markdown 文件，使用编辑器（VS Code 或者 typora）打开，可以看到其默认生成的文件头信息（front matter），一般为创建时间、是否为草稿以及文章名称。我们需要初步修改的是将 draft = true 改成 draft = false，以便于在网站中显示该文章。
然后就可以在此文章中编辑内容了。其中图片的编辑不可避免，在这里推荐的是使用 Page Bundle 管理图片。
假设文章结构如下：
content/posts/my-post/index.md
content/posts/my-post/img/img1.jpg
content/posts/my-post/img/img2.png
这样，图片和文章一起管理，迁移方便。然后在 index.md 里直接用 HTML 标签来插入图片：
<center><img src="img\img1.jpg" width="100%" /></center>
这样可以实现更复杂的图像布局或样式，或者控制图片的大小。
方法二 #
直接在编辑器中使用 markdown 语法编辑文章，然后将其复制到 content/posts 目录中的新建的文章同名文件夹中，将其重命名为 index.md，打开文件后在文章顶部插入 front matter，图片编辑方法同方法一。
2、更新文章内容 #
在创建一个新的 blog 后，在根目录下打开 cmd 命令行窗口，输入 hugo -D，将根目录中的内容更新到 public 文件夹中（自动覆盖），
然后，输入 cd public，切换到 public 目录下，执行以下命令进行仓库 push，将需要用到的资源同步到 GitHub 仓库上，
git add .
git commit -m "update"
git push
可以看到在我们的 GitHub 仓库中，该网站的仓库的 Actions 正在执行更新，
打开我们的网站，静态部署的内容已经更新到最新的网站中了，
