Hugo配置

Author

January 01, 2023

Hugo 搭建个人网站

使用的是mainroad 主题

安装Hugo 软件

先下载 hugo-extend 版本 https://github.com/gohugoio/hugo/releases?spm=a2c6h.12873639.article-detail.10.74325ec5MXurIA , 并设置环境变量

创建站点

#新建一个usrname文件夹
hugo new site usrname  
cd  usrname
（hugo会自动生成此文件夹：
包含archetypes、content、layouts、static、config.toml）

#加入git进行管理
git init
#添加主题
git submodule add https://github.com/vimux/mainroad themes/mainroad  
（或者可以在github网页下载zip文件，在theme文件夹内解压）

#创建新文件
hugo new post/index.md 
（新文件地址在usrname/content/post文件夹下） 
（新文件的模板在usrname/archtypes/default.md)

#设置 config.toml 文件（下一步讲，如果不设置toml文件，自动生成的网站一片空白）

#测试生成的网页
hugo server -D -p 8080 #在浏览器中访问 http://127.0.0.1:8080 即可测试站点是否工作

配置

编辑 config.toml,此处参考的他人的配置文件 https://migueltek.com/posts/refresh-my-blog/ 和 https://39.105.69.237/en/posts/linux/migrate_wordpress_blog_to_hugo/

# 站点名称
title = "hugo site"
# 站点 URL
baseURL = "/"  #在这里填入自己的网站名/github pages
# 使用 themes/ 中的哪个主题, 注意大小写
theme = "mainroad"

# hugo 发布设置, 发布生成的文件夹路径
publishDir = "../publish"  #参考的博客此处将../publish 改为 ../public
# 是否清理发布文件夹中多余的文件
cleanDestinationDir = true

生成静态页面

注意！！！此处进行之前，一定要修改config.toml文件里的baseURL。

#生成静态页面，
hugo
(此时会生成一个public文件夹，里面会生成多个文件，即为静态网站页面，进入public文件夹，使用git上传文件）
cd public
git init    #初始化仓库
git remote add origin https://github.com/caecarxu/caecarxu.github.io.git    #链接远程仓库
git add .
git commit -m "first commit"
git push -u origin master

此时，如果搭建了个人域名的GitHub page页面时，需要单独创建一个CNAME文件，文件内容为你的username.github.io或者个人域名，不加http，然后上传至github。否则，个人域名无法与githu.io.git 的内容连接起来。由于每次使用hugo命令在/public子目录生成静态网页的时候该CNAME文件都会被删除，所以最好将该文件放在usrname/static子目录中，这样运行hugo后该CNAME文件将自动复制到/public目录中。

更新文章

在此之后更新文章，先使用hugo new 创建新的目录,然后按照格式撰写。可以打开hugo server 预览, 边写边修改样式。

生成新的静态页面，并使用git push进行同步

#切换到public文件夹下
cd public
git add .
git commit -m "add blog post"
git push origin master

提示以下，commit -m 后面的东西是此次提交的备注，通常用来说明提交人的名字

文章资源管理

将文章与资源 (图片/附件等) 放在一起管理, 这样写 md 时轻松一点, 且可以看出资源文件和文章的关系.

例如:

content/posts/post-title/index.md
content/posts/post-title/figure.jpg

Hugo新建归档功能

参考https://xbc.me/how-to-create-an-archives-page-with-hugo/

1. 新建archives 文档

hugo new posts/archives.md

2. 新建archives 模板

在文件夹themes/mainload/layouts/_default文件夹下，复制single.html为archives.html。（我自己用的主题为mainload）

找到{{ .Content }} 这句话替换为下面的内容，注意缩进:

  {{ $type := .Type }}
    {{ $.Scratch.Set "count" 1 }}

  {{ range (.Site.RegularPages.GroupByDate "2006") }}
    {{ if and (gt .Key 1) (gt (where .Pages "Type" $type) 0) }}

    {{ range (where .Pages "Type" $type) }}
      {{ if (eq ($.Scratch.Get "count") 1) }}
      {{ $.Scratch.Set "count" 0 }}
      <h1 class="title is-4 has-text-weight-normal">{{ .Date.Format "2006" }}</h1>
      {{ end }}
    {{ end }}

    {{ $.Scratch.Set "count" 1 }}

      <ul class="article__list">
      {{ range (where .Pages "Type" $type) }}
      {{ if (ne .Params.hidden true) }}
        <li>
        <a class="is-block" href="{{ .RelPermalink }}">
          <span class="has-text-grey-dark">{{ .PublishDate.Format "2006-01-02"  }}</span> — {{ .Title }}
        </a>
        </li>
      {{ end }}
      {{ end }}
      </ul>
  {{ end }}
  {{ end }}

此时，运行hugo server 就可以看到归档的目录了。

注意事项：

发布的话，draft 要为 false 格式。
关键词需要copy 已有的格式的，然后再自行修改，否则不会被识别
图片路径要跟文档在一个目录下
Hugo 图片插入问题 hugo图片插入，大多数人的做法大多是将其放在一个目录下，比如说static. 更简单的解决方法就是，不直接生成md文件作为某一篇post，而 hugo new 新建文件夹 ，然后在其中创建文件夹，文件夹中存放index.md才是post的内容，多了一层。这样的好处就是，在这个post目录下，图片的pic文件夹就和md文件同级，可以引用，同时，hugo也会生成相应的目录，完美解决了图片的问题。