sailor0913

须知少时凌云志,曾许人间第一流

使用hugo从0搭建blog并部署到github Pages

发布于 # 博客

本教程旨在教会你使用hugo+github pages+github actions搭建一个完全免费的个人博客。其中关于一些基本概念比如git、hugo等不再过多介绍,关于hugo的具体设置也不在本教程范围内,如果你对这些概念不熟悉,建议先自行学习。重点会放在github pages和github actions的使用上。

安装

scoop install hugo # windows
brew install hugo # mac

hugo version # 验证是否正确安装

其他安装方法请参考hugo官网

初始化&安装bear主题

在这部分中,会实现初始化hugo项目并且给博客配置一个主题

hugo new site myblog # 会在本地目录创建一个名为myblog的文件夹,这个文件夹就是你的博客根目录
cd myblog
git init
git submodule add https://github.com/janraasch/hugo-bearblog.git themes/hugo-bearblog # 安装主题,这里使用submodule使博客主题作为自己项目的一个子模块方便后续维护

# 下面命令是后续同步主题修改
# git submodule update --remote

修改主题配置

将themes\hugo-bearblog\exampleSite下的content、static、hugo.toml复制到项目根目录 hugo.toml就是主题的配置文件,你可以根据自己的需求修改这个文件,具体可以查看官方文档

hugo new blog/test.md # 建立新的文章

hugo new bear.md # 建立新的页面

配置github pages + actions

一些前置知识(务必看)

配置步骤

创建key(注意这里的步骤可能随着github网站的更新有略微不同)
建立<用户名>.github.io仓库
建立博客源代码仓库
name: GitHub Pages

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

jobs:
  deploy:
    runs-on: ubuntu-20.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.126.3
          # 是否启用 hugo extend
          extended: false

      - name: Build
        run: hugo --minify

      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          # github_token: ${{ secrets.GITHUB_TOKEN }} # 该项适用于发布到源码相同repo的情况,不能用于发布到其他repo
          personal_token: ${{ secrets.ACTION_ACCESS_TOKEN }}
          external_repository: <用户名>/<用户名>.github.io # 指定目标仓库
          publish_dir: ./public
          publish_branch: main # 指定目标分支
          cname: xxx.com # 如果你有自定义域名

测试

cd myblog
hugo new blog/test.md # 建立新的文章
git add .
git commit -m "新增一篇文章"
git push