hugo搭建网站

有搭建新页面的需求，尝试用hugo搭建博客。

前言

因为需要搭建一个新的网页存放一些文稿，hexo用腻了，试了试hugo，而且确实快，以后的网站可能文章会非常多，那用hugo也是很好的。

安装go

安装go，下载装就行。说明很详细。

安装hugo

官方文档 与 下载地址

说明还是比较详细的，Windows下安装要注意的是：

• 解压后的exe 可以放到任意位置，但建议新建一个路径如 D:\hugo\bin
• 将上述路径添加到系统变量内，完成全局安装（建议全局安装）
• 执行 hugo --version 检查安装情况与版本号

安装主题

先配置网页，然后安装主题。

hugo new site ./

主题：

git clone https://github.com/adityatelange/hugo-PaperMod themes/PaperMod --depth=1

如果有报错，一般是因为代理

fatal: unable to access ‘xxx’: Failed to connect to 127.0.0.1 port 1080: Connection refused

git config --global http.proxy 
git config --global --unset http.proxy

配置：

打开config.toml配置文件，在最后添加一行theme = “PaperMod”

上传准备

因为是clone的方式拉取的主题，那么在上传到仓库时，会报

hint: You've added another git repository inside your current repository.
hint: Clones of the outer repository will not contain the contents of
hint: the embedded repository and will not know how to obtain it.
hint: If you meant to add a submodule, use:
hint:
hint:   git submodule add <url> themes/PaperMod
hint:
hint: If you added this path by mistake, you can remove it from the
hint: index with:
hint:
hint:   git rm --cached themes/PaperMod
hint:
hint: See "git help submodule" for more information.

所以在建立完成后，去theme文件夹将其中的 .git 等文件夹删除。

配置

主题安装完毕后，需要配置的一些内容。

文件夹

把主题文件夹里面的一些静态文件和配置文件复制到站点目录下，可以自定义博客的样式而不会改动主题文件夹里的样式，站点目录的修改会优先覆盖主题里的配置。

主要复制的文件夹有：

• assets
• i18n
• layouts
• resources
• static

图标等

hugo 的图标等图片以及其他静态文件，放置于 static 文件夹内，其中网站的图标命名为 favicon.ico 网页生成时，会自动识别。

config.yml

hugo 官方的配置文件是 toml 格式的，但是不熟悉，可以删除了改为 yaml 模式的文件。只要有 yaml、toml、json 格式的文件，会自动读取的。

官网原文：

Hugo uses the config.toml, config.yaml, or config.json (if found in the site root) as the default site config file.

The user can choose to override that default with one or more site config files using the command-line --config switch.

具体的配置参考博客主题 PaperMod 的示例：hugo-PaperMod-config.yml 以及 hugo 官网的 configuration 一栏以及各项参数的细则：HUGO Docs Configuration

网页组织

关于网页组织的细则，查阅 HUGO Docs ，这里主要说明：content 文件夹内主要需要放置 about 、archive 、search 的布局 .md 文件如下：

---
title: "时间轴"
layout: "archives"
# url: "/archives"
summary: "archives"
---

以使渲染器了解渲染方式。其中，如果在配置中设定了多个语言页面，需要在相应的布局 .md 文件的命名内加后缀，如：archives.zh-cn.md 表中文布局。

post 文件夹内，可以添加文件夹以做直观分类，同时添加 _index.md 文件布置标题与其他展示。如：

---
title: "文学"
description: " "
hidemeta: true #隐藏文章元信息
---

运行

配置大致如上，完成后可以直接运行博客查看运行状态，hugo的一大好处就是可以在本地边编辑边展示，在终端输入 hugo server 即可预览，一般是在 loacalhost:1313

输入 hugo 则会生成网页，文件存放到 public 下。

书写博客

输入 hugo new 文章名称.md就会在 content 目录下生成 “文章名称.md” 名字的文件，所有文章都是放在 content 这个文件夹里 如果定义了分类目录，如在 content\posts 目录下有blog、philosophy等文章分类，那么在用命令生成文章的时候，如果要把文章生成到指定目录，可以用命令：hugo new posts/blog/文章名称.md，这样就会把文章生成到 blog 目录下

生成的文章内部头部配置信息包括一些文章名称，时间之类的信息，可以事先在目录 archetypes/default.md 下使用模板，这样在用命令 hugo new 生成文章后会自动加上模板里的配置，具体配置参考：hugo-FrontMatter

这里给个实例：

---
title: "{{ replace .Name "-" " " | title }}" #标题
date: {{ .Date }} #创建时间
lastmod: {{ .Date }} #更新时间
author: ["Sulv"] #作者
categories: 
- 分类1
- 分类2
tags: 
- 标签1
- 标签2
description: "" #描述
weight: # 输入1可以顶置文章，用来给文章展示排序，不填就默认按时间排序
slug: ""
draft: false # 是否为草稿
comments: false #是否展示评论
showToc: true # 显示目录
TocOpen: true # 自动展开目录
hidemeta: false # 是否隐藏文章的元信息，如发布日期、作者等
disableShare: true # 底部不显示分享栏
showbreadcrumbs: true #顶部显示当前路径
cover:
    image: "" #图片路径：posts/tech/文章1/picture.png
    caption: "" #图片底部描述
    alt: ""
    relative: false
---

github-action自动部署

示例比较多，这里贴一个大致流程以及 workflows

流程：

• 仓库下创建 .github\workflows\deploy_name.yml
• github 个人页 Settings/Developer settings/Personal access tokens/Tokens(classic) 生成新 Token，需要开启 repo 以及 workflow 权限。Token 的内容需要复制下来
• 将复制的 Token 内容放置到仓库下的 Settings/Secrets and Variables/Actions/Secrets 内，记录创建的新 secrets 名字
• 新 secrets 名字替换下面文件中的 github_token: ${{ secrets.GITHUB_TOKEN }} 的 GITHUB_TOKEN
• 完成后，就可以 git init、git add .、git commit -m ''、git push 测试了

action文件

name: Deploy Pages

on:
  push:
    branches:
      - main  # Set a branch to deploy
  pull_request:

jobs:
  deploy:
    runs-on: ubuntu-22.04
    concurrency:
      group: ${{ github.workflow }}-${{ github.ref }}
    steps:
      - uses: actions/checkout@v3
        with:
          submodules: true  # Fetch Hugo themes (true OR recursive)
          fetch-depth: 0    # Fetch all history for .GitInfo and .Lastmod

      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v2
        with:
          hugo-version: '0.110.0'
          # extended: true

      - uses: actions/cache@v2
        with:
          path: /tmp/hugo_cache
          key: ${{ runner.os }}-hugomod-${{ hashFiles('**/go.sum') }}
          restore-keys: |
            ${{ runner.os }}-hugomod-

      - name: Build
        run: hugo --minify

      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        if: ${{ github.ref == 'refs/heads/main' }}
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./public

美化

修改了不少文件、样式，但是懒得写，故暂略。

参考

HUGO Docs

PaperMod Demo

adityatelange/hugo-PaperMod

hugo-PaperMod-config.yml

Sulv’s BLOG

Alan’s BLOG Hugo PaperMod 優化

Hugo + GitHub Action，搭建你的博客自动发布系统