一元网络论坛

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 95|回复: 0

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

[复制链接]

3万

主题

3万

帖子

9万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
95742
发表于 2024-10-13 14:59:20 | 显示全部楼层 |阅读模式
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 中新建博客仓库,命名为[U].github.io。在本地 Git 中添加远程仓库。
git remote add origin https://github.com/[U]/[U].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

注意事项
[ol]
  • 在branches下的hugo,需修改为你存放博客的分支。
  • 两个Deploy任选其一即可,不要重复使用。
  • 若没有在 GitHub 中找到 Actions 的选项,请自行搜索‘GitHub 如何开启 Actions’。
    [/ol]
    使用 GitHub Pages
    在Settings > Pages,在Source中选择Deploy from a branch,随后选择gh_pages,点击Save按钮。稍等片刻即可看见看见顶栏有提示:
    Your site is live at https://[U].github.io/

    结束
    祝各位部署 GitHub Actions 时不报错。报错可留言。
  • 回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    Archiver|手机版|小黑屋|一元网络论坛

    GMT+8, 2024-11-25 15:44 , Processed in 0.108692 second(s), 19 queries .

    Powered by Discuz! X3.4

    Copyright © 2001-2020, Tencent Cloud.

    快速回复 返回顶部 返回列表