博客由hexo迁移至hugo，两者使用下来，hugo生成静态网页的速度明显优于hexo，博客数量越多体验越明显，同时在Mac系统下两者的使用体验要优于Windows。hugo的不足之处在于开箱即用的主题不如hexo丰富。

迁移前第一步选一个喜欢的hugo博客主题，这里以 blowfish为例。

安装hugo

#

首先从GitHub上下载 hugo。

Windows

根据自己的电脑下载相应的版本，下载下来后解压到一个文件目录（出于习惯最好选择全英文路径下吧）然后将hugo文件所在的路径地址添加到系统环境变量path中就可以使用了。

Mac

brew install hugo

验证

hugo version

出现下面语句证明hugo可以正常使用了。

hugo v0.123.4-db083b05f16c945fec04f745f0ca8640560cf1ec+extended darwin/amd64 BuildDate=2024-03-20T11:40:10Z VendorInfo=brew

注册GitHub账号

#

新建一个空仓库，仓库名称：username.github.io，为后面的GitHub pages做准备，如果随便起名，后面就不能把博客部署到GitHub Pages上了。

安装Git

#

Windows

基本上下载下来一路下一步就可以了。

Mac

可以跳过这一步，系统内带有git。

然后将把git和你的仓库进行连接，相关设置可参考。

添加文章简码时，链接路径和文件名都不能包含中文。

创建博客静态网页

#

建立一个新站点

#

hugo new site xxx # xxx为你博客的所有文件存放的文件夹

克隆blowfish主题到本地

#

使用博客主题的一般流程是克隆主题到博客themes目录，将主题示例文件夹内的文件，复制粘贴到博客根目录，然后hugo生成就可以了。但是对于blowfish主题来讲，这样操作下来整个博客文件夹大小会增至1GB大小左右，也会多出很多官方示例内容。

由于我将整个博客文件夹放在了iCloud，空间有限，这里克隆时可以选择另一空白文件夹。在终端打开该文件夹：

git init

git submodule add -b main https://github.com/nunocoracao/blowfish.git themes/blowfish

克隆到新建的文件夹后，只需将themes文件夹里的blowfish文件夹复制到博客根目录/themes内，然后复制blowfish/exampleSite里的archetypes和config文件夹到博客根目录，此时exampleSite文件夹就可以删除了，这样可以大大缩减整个博客文件夹的大小。hugo以后大小在90MB左右，配置完博客头像、背景和一些文章后，文件大小在100MB左右，缺点是后续升级不太方便，我暂时没有升级的计划。

Previous Nextsads

这里只选取blowfish示例文件夹内config文件夹复制到博客根目录即可，后续设置都是围绕这个文件夹里的配置文件进行的。

blowfish主题配置

#

打开xxx/config/_default/hugo.toml文件，修改博客地址。不然生成本地文件会有异常。

正常

Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)

异常

Web Server is available at /localhost:1313/ (bind address 127.0.0.1)

替换生成博客的默认格式文件

#

如果生成博客时出现错误，需要查看archetypes文件夹是否已经替换。

新建一篇博客

#

hugo new posts/xxx.md

这样就会在content文件夹下生成posts文件夹，然后就会在该文件夹下生成markdown格式xxx.md文件，在里面写博客内容就行了。

部署博客

#

Windows

在博客根目录下用cmd命令或直接git bash here 输入：

hugo

Mac

在终端里打开博客根目录

hugo

会在博客根目录生成public文件夹，里面的文件就是我们要推送到仓库的文件，在该目录下git bash here ，第一次推送要先与仓库地址建立联系。

git init

git commit -m "first commit"

git branch -M main

git remote add origin https://github.com/usename/usename.github.io.git
# **注：这里要改成你的仓库地址**

git push -u origin main

以后添加文章：在public文件夹下操作

git add .

git commit -m "add blogs" #引号里的内容是本次上传说明

git push

至此你的博客基本上就搭建好了。

如何更改网站图标, 浏览器配置？

apple-touch-icon.png (180x180)
favicon-32x32.png (32x32)
favicon-16x16.png (16x16)
mstile-150x150.png (150x150)
android-chrome-192x192.png (192x192)
android-chrome-512x512.png (512x512)

放在博客根目录 /static 目录即可， 可以在 https://realfavicongenerator.net/ 网站上将图片生成这些文件，部署到GitHub pages上时可能不会立即生效。

域名购买

购买域名可以让博客地址更简洁，但是需要添加解析。

出现这种情况，可以将ssl设置为严格。

不蒜子

#

这里只是简单地使用不蒜子用来显示网站访问量，更高阶的应用请自行探索。

博客主题使用的是blowfish，这里以blowfish为例，在<博客根目录>/themes/blowfish/layouts/partials/footer.html里添加不蒜子代码。

<br />
      <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
      <span id="busuanzi_container_site_pv">本站访问量：<span id="busuanzi_value_site_pv"></span> 次 ฅ/ᐠ ‧̫‧ ᐟ\ฅ </span><span id="busuanzi_container_site_uv">您是本站第：<span id="busuanzi_value_site_uv"></span> 位访问者</span><br>

<br />用于换行显示。

添加位置：

{{/* Copyright */}}
    {{ if .Site.Params.footer.showCopyright | default true }}
    <p class="text-sm text-neutral-500 dark:text-neutral-400">
      {{- with replace .Site.Params.copyright "{ year }" now.Year  }}
      {{ . | emojify | markdownify }}
      {{- else }}
      &copy;
      {{ now.Format "2006" }}
      {{ .Site.Author.name | markdownify | emojify }}
      {{- end }}
      <br />
      <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
      <span id="busuanzi_container_site_pv">本站访问量：<span id="busuanzi_value_site_pv"></span> 次 ฅ/ᐠ ‧̫‧ ᐟ\ฅ </span><span id="busuanzi_container_site_uv">您是本站第：<span id="busuanzi_value_site_uv"></span> 位访问者</span><br>
    </p>
    {{ end }}

示例：

添加归档页面（测试版）

#

打开博客根目录/themes/blowfish/layouts/_default复制single.html并命名为archives.html，修改archives.html文件：

{{ .Content | emojify }}

替换为：

{{ range (.Site.RegularPages.GroupByDate "2006") }}
  <h3>{{ .Key }}</h3>
    <ul class="archive-list">
      {{ range (where .Pages "Type" "posts") }}
        <li>
          {{ .PublishDate.Format "2006-01-02" }}
          ·
          <a href="{{ .RelPermalink }}">{{ .Title }}</a>
        </li>
      {{ end }}
    </ul>
{{ end }}

全局设置某篇文章是否显示日期、评论等

#

在生成归档页面时，效果和预想的不一样，于是把某些多余显示的信息给关闭隐藏。

修改themes/blowfish/layouts/index.html文件。

{{ define "main" }}
  {{ $partial := print "partials/home/" .Site.Params.homepage.layout ".html" }}
  {{ if templates.Exists $partial }}
    {{ partial $partial . }}
  {{ else }}
    {{ partial "partials/home/profile.html" . }}
  {{ end }}

  <!-- 文章显示设置 -->

  {{ if .Site.Params.ShowDate }}
  <!-- 显示日期的代码 -->
  <p>{{ .Date }}</p>
  {{ end }}

  {{ if .Site.Params.showWordCount }}
  <!-- 显示字数统计 -->
  <p>{{ .WordCount }}</p>
  {{ end }}

  {{ if .Site.Params.showReadingTime }}
  <!-- 显示阅读花费时长 -->
  <p>{{ .ReadingTime }}</p>
  {{ end }}

  {{ if .Site.Params.showViews }}
  <!-- 显示文章阅读量 -->
  <p>{{ .Views }}</p>
  {{ end }}

  {{ if .Site.Params.showLikes }}
  <!-- 显示文章点赞量 -->
  <p>{{ .Likes }}</p>
  {{ end }}

  {{ if .Site.Params.showAuthor }}
  <!-- 显示文章作者信息 -->
  <p>{{ .Author }}</p>
  {{ end }}

  {{ if .Site.Params.showComments }}
  <!-- 显示评论 -->
  <p>{{ .Comments }}</p>
  {{ end }}

  {{ if .Site.Params.showRelatedContent }}
  <!-- 显示最近文章 -->
  <p>{{ .RelatedContent }}</p>
  {{ end }}

{{ end }}

在文章.md头部添加打开true或关闭false这里的优先级要高于配置文件里的优先级。

title: "测试"

showDate: false
showWordCount: false
showReadingTime: false
showViews: false
showLikes: true
showAuthor: false
showRelatedContent: false

重点突出

#

keyword 组件可用于在视觉上突出显示某些重要的单词或短语，例如专业技能等。 keywordList 简码可用于将多个 keyword 组合在一起。每个组件可以具有以下参数。

输入内容是用 Markdown 编写的，因此您可以根据需要设置其格式。

例1 :

例2 :

GitHub 卡片

#

github 允许您快速链接到 github Repo，同时显示和更新有关它的实时统计信息，例如它的 star 和 fork 数。

格式：

KaTeX

#

katex 简码可用于使用 KaTeX 包向文章内容添加数学表达式。有关可用语法，请参阅 支持的 TeX 函数 的在线参考。

要在文章中加入数学表达式，只需将简码放在任意位置即可。每篇文章只需加入一次，KaTeX 将自动呈现该页面上的任何标记。支持内联和块表示法。

可以通过将表达式包装在 \\( 和 \\) 分隔符中来生成内联表示法。或者，可以使用 $$ 分隔符生成块符号。

例如：

\(f(a,b,c) = (a^2+b^2+c^2)^3\)

时间线

#

timeline 创建了一个可视化时间线，用于展示专业经验、项目成就等。 timeline 简码依赖于 timelineItem 子简码来定义主时间线中的每个项目。每个项目可以具有以下属性。

1. header

   badge test

   subheader

   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus non magna ex. Donec sollicitudin ut lorem quis lobortis. Nam ac ipsum libero. Sed a ex eget ipsum tincidunt venenatis quis sed nisl. Pellentesque sed urna vel odio consequat tincidunt id ut purus. Nam sollicitudin est sed dui interdum rhoncus.

2. Another Awesome Header

   date - present

   Awesome Subheader

   With html code

   • Coffee
   • Tea
   • Milk

3. Shortcodes

   AWESOME

   With other shortcodes

   

TypeIt

#

TypeIt 是用于创建打字机效果的最通用的 JavaScript 工具。通过简单的配置，它允许您键入单个或多个断行、删除和相互替换的字符串，甚至可以处理包含复杂 HTML 的字符串。

Blowfish 使用简码实现 TypeIt 功能的子集。在 typeit 简码中编写文本，并使用以下参数来配置您想要的行为。

例1:

例2:

例3:

画廊

#

carousel 用于生成可交互且具有视觉吸引力的方式展示多个图像的画廊。这允许用户滑动浏览多个图像，同时仅占用单个图像的垂直空间。 所有图像均使用父组件的完整宽度并使用预定义的宽高比 16:9 、 21:9 或 32:9 之一显示。

格式：

Previous Nextsads