admin 发表于 2024-10-13 14:59:20

使用Hugo搭建Blog,并利用GitHub Actions实现自动化部署。

Hugo 介绍

Hugo 是世界上最快的构建网页的框架。
——Hugo 官网

安装 Hugo
Arch Linux:
sudo pacman -S hugo

其他发行版请自行使用包管理器搜索并安装。

开始使用
首先创建一个空白网站
hugo new site

该操作会创建一个包含 Hugo 默认文件的文件夹。

安装主题
在 Hugo 的 主题网站 中查找你喜欢的主题。
建议选择更新日期较近的主题,以避免使用废弃的主题。

点击Download按钮跳转至 GitHub 页面,查看README.md文件以了解主题的安装方法。

FixIt 主题示例
FixIt 主题网站:FixIt 主题网站,你可以查看文档。
FixIt GitHub 页面:GitHub 页面,你可以提出 issue 和 pull request 以解决问题和完善文档。

安装 FixIt 主题
切换到博客目录,执行:
git init

初始化一个空的 Git 存储库,用于 GitHub Actions 自动构建部署网站。

将 FixIt 主题作为 Git 子模块添加到你的项目中的themes目录。
git submodule add https://github.com/hugo-fixit/FixIt.git themes/FixIt

备份目录中的hugo.toml文件,并将主题中的hugo.toml文件复制出来。
mv hugo.toml hugo.toml.back && cp /themes/FixIt/hugo.toml ./

在站点配置文件中添加一行,指定当前主题。
echo "theme = 'FixIt'" >> hugo.toml

在站点配置文件中添加一行,指定默认的内容语言。
echo "defaultContentLanguage = 'zh-cn'" >> hugo.toml

启动 Hugo 开发服务器以查看站点。
hugo server

写文章
你需要将 Markdown 文章放入content/posts文件夹中,然后执行:
hugo

构建网站。这并不会在本地启动开发服务器,而是将构建后的网页文件放在public文件夹下。

使用草稿
在 Hugo 中,你可以使用draft参数来表示该文章是草稿。
---
title: 我的第一篇文章
date: 2024-03-01T17:10:04+08:00
draft: true
# ...
---

若想连草稿一起构建,请执行:
hugo -D

同理,也可以在开发服务器中使用-D。

使用 GitHub Actions 实现自动部署博客
首先,在 GitHub 中新建博客仓库,命名为.github.io。在本地 Git 中添加远程仓库。
git remote add origin https://github.com//.github.io.git

新建文件夹:
mkdir .github/workflows

新建一个 YAML 文件,文件名随意,输入以下内容。
# 使用GitHub Actions自动部署Hugo博客
name: Hugo-Build
on:
push:
    branches:
      - Hugo
permissions:
contents: write
jobs:
build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout repo
      uses: actions/checkout@v4
      - name: Install Hugo
      uses: peaceiris/actions-hugo@v3
      with:
          hugo-version: '0.129.0'
          extended: true
      - name: Hugo Build
      run: |
          git submodule update --init --remote --merge themes/FixIt
          hugo
      - name: Deploy
      uses: JamesIves/github-pages-deploy-action@v4
      with:
          branch: gh-pages
          folder: public

注意事项

[*]在branches下的hugo,需修改为你存放博客的分支。
[*]两个Deploy任选其一即可,不要重复使用。
[*]若没有在 GitHub 中找到 Actions 的选项,请自行搜索‘GitHub 如何开启 Actions’。

使用 GitHub Pages
在Settings > Pages,在Source中选择Deploy from a branch,随后选择gh_pages,点击Save按钮。稍等片刻即可看见看见顶栏有提示:
Your site is live at https://.github.io/

结束
祝各位部署 GitHub Actions 时不报错。报错可留言。
页: [1]
查看完整版本: 使用Hugo搭建Blog,并利用GitHub Actions实现自动化部署。