如何构建我的hugo博客-这是一个系列

• Hugo博客搭建_基础 😊 👈 你在这里
• Hugo博客搭建_配置 🚀
• Hugo博客搭建_主题优化 🤤

前言

以往总是东一笔西一笔写自己的一些内容，也尝试过用MKDOCS来搭建自己的知识库，前段时间看到很多人用Hugo搭建博客，于是也想尝试一下，在这里记录一下搭建与配置的过程。

安装环境

我最近也在将日常的工作娱乐环境转向linux，所以说选择了archlinux作为我的安装环境，之后应该会出一系列我的archlinux的配置。

本文涉及环境以及工具的网站：

• Hugo↗
• Github↗

Hugo安装及基础配置

Hugo安装

我是用的是archlinux，所以直接用pacman安装：

$ sudo pacman -S hugo

安装完之后，可以通过以下命令查看版本：

$ hugo version

Hugo初始化

通过上述命令安装hugo程序后，可以在选定的目录下通过hugo new site $YOUR_SITE_NAME创建你的博客目录：

如果不特殊申明，本文接下来的命令行操作都是在$YOUR_SITE_NAME目录下进行的。

$ hugo new site DHugo                      
Congratulations! Your new Hugo site was created in /home/dm/Test/DHugo.

Just a few more steps...

1. Change the current directory to /home/dm/Test/DHugo.
2. Create or install a theme:
   - Create a new theme with the command "hugo new theme <THEMENAME>"
   - Or, install a theme from https://themes.gohugo.io/
3. Edit hugo.toml, setting the "theme" property to the theme name.
4. Create new content with the command "hugo new content <SECTIONNAME>/<FILENAME>.<FORMAT>".
5. Start the embedded web server with the command "hugo server --buildDrafts".

See documentation at https://gohugo.io/.

可以使用tree指令对我们创建的博客目录进行查看

$ tree                            
.
├── archetypes
│   └── default.md # 博客模板文件
├── assets # 存放静态资源文件
├── content # 存放博客文章
├── data # 存放数据文件  
├── hugo.toml  # 博客配置文件，可以修改为hugo.yaml，支持JSON、YAML、TOML三种不同配置文件
├── i18n  # 多语言配置
├── layouts  # 存放布局配置文件
├── static  # 存放静态资源文件，图片、css、js等
└── themes  # 存放不同主题

9 directories, 2 files

配置主题

我们在此处的主题选择 PaperMod↗ ，这是一个Star比较高的主题，简约的并且功能较为丰富。当然，你也可以自己选择主题：

• 官方的主题网址： https://themes.gohugo.io/↗

在此处，官方推荐将我们选择的主题fork一个到自己的账户，并使用git submodule进行仓库的链接，这样以便后续主题的单独维护，避免当自己对主题进行修改之后，后续版本管理和更新会与原先主题产生冲突。

当然了，我并没有fork一个主题并进行修改，我们通常是将themes/$THEME/对应目录下的文件拷贝一份到我们的项目目录$YOUR_SITE_NAME中对应的文件夹下，相对目录需要相同，以便我们复制的文件可以覆盖他的默认配置。

$ git init
$ git submodule add https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod

之后在hugo.yaml中添加新的一行启用新主题，同时为了后续的部署到Github我们需要在config.yaml中添加baseURL配置：

theme: "PaperMod"
baseURL: "https://downmars.github.io“

新建博客

我们可以使用hugo new path/to/your.md来创建你的第一个博客啦！

$ hugo new posts/test.md

---
title: "Test"
date: 2022-10-21T19:00:43+08:00
draft: true
---

这个命令会在content目录下创建posts目录，并在生成posts/test.md，博文使用Markdown语法完成，我们用默认模板生成的博客是草稿状态，可以将draft设置为false，这样文章就可以发表了。

我们接下来就可以使用hugo server进行本地预览了，通过访问 http://localhost:1313/↗ 可以在本地预览我们创建的博客了。

$ hugo server --disableFastRender 

但是我们现在只能够本地预览，如果想要发布到Github Pages，还需要借助Action来完成。

Github Action自动化部署

Github Pages 本质上是一个静态网站托管系统，你可以使用它为你的每一个仓库制作一个静态网页入口，我可以借助Action来完成部署界面。

创建Github仓库

• Your respository/New/Create a new repository 创建Github仓库
• 此处Repository name一定得是[你的github账号名].github.io，如Downmars.github.io，然后[Create Repository]即可。

创建ci.yml文件

Github进行自动化部署需要一个ci.yml文件，位于.github/workflows/ci.yaml，步骤如下：

$ mkdir .github/workflows
$ touch .github/workflows/ci.yml

name: Deploy Hugo site

on:
  push:
    branches:
      - main
  workflow_dispatch:

permissions:  # 添加这个权限配置
  contents: write

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
        with:
          submodules: true
          
      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v2
        with:
          hugo-version: 'latest'

      - name: Build
        run: hugo --minify

      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}  # 使用默认令牌
          publish_dir: ./public

使用gh-pages部署网页

$ git remote add origin https://github.com/jianzhnie/jianzhnie.github.io.git # 将本地目录链接到远程服务器的代码仓库
$ git add .
$ git commit -m "WOW！"
$ git push origin main

此时，我们的博客就已经部署到了Github Pages上了，可以通过https://[你的github账号名].github.io来访问你的博客了。

我一开始创建的时候会在我的博客网址看不见我的网页，后来查询之后得知需要在Downmars.github.io/Settings/pages/Branch 将分支切换为gh-pages即可