在 GitHub Pages 上托管
GitHub提供了免费且快速的静态SSL托管服务,可直接从GitHub仓库中的个人、组织或项目页面使用其GitHub Pages服务,并使用GitHub Actions自动化开发工作流程和构建过程。
先决条件
- 创建GitHub账号
- 安装Git
- 创建Hugo网站 ,并使用
hugo server
在本地进行测试。
网站类型
GitHub Pages有三种类型的网站:项目网站、用户网站和组织网站。项目网站与GitHub上托管的特定项目相关联。用户和组织网站与GitHub.com上特定账号相关联。
步骤
- 步骤1
- 创建一个GitHub仓库。
- 步骤2
- 将本地仓库推送到GitHub。
- 步骤3
- 访问您的GitHub仓库。从主菜单选择设置 > Pages。您的屏幕中央会显示如下内容:
- 步骤4
- 将Source更改为
GitHub Actions
。更改是即时的,无需按下保存按钮。
- 步骤5
- 在本地仓库中创建一个空文件。
.github/workflows/hugo.yaml
- 步骤6
- 将下面的YAML代码复制并粘贴到您创建的文件中。根据需要更改分支名称和Hugo版本。
.github/workflows/hugo.yaml
# 用于构建和部署Hugo网站到GitHub Pages的示例工作流程
name: 发布Hugo网站到Pages
on:
# 在目标为默认分支的推送上运行
push:
branches:
- main
# 允许您手动从“Actions”标签运行此工作流程
workflow_dispatch:
# 设置GITHUB_TOKEN的权限,以允许部署到GitHub Pages
permissions:
contents: read
pages: write
id-token: write
# 仅允许一个并发部署,跳过在进行中的运行与最新排队的运行之间排队的运行。
# 但是,请不要取消进行中的运行,因为我们希望这些生产部署能够完成。
concurrency:
group: "pages"
cancel-in-progress: false
# 默认使用bash
defaults:
run:
shell: bash
jobs:
# 构建作业
build:
runs-on: ubuntu-latest
env:
HUGO_VERSION: 0.120.2
steps:
- name: 安装Hugo CLI
run: |
wget -O ${{ runner.temp }}/hugo.deb https://github.com/gohugoio/hugo/releases/download/v${HUGO_VERSION}/hugo_extended_${HUGO_VERSION}_linux-amd64.deb \
&& sudo dpkg -i ${{ runner.temp }}/hugo.deb
- name: 安装Dart Sass
run: sudo snap install dart-sass
- name: 检出
uses: actions/checkout@v4
with:
submodules: recursive
fetch-depth: 0
- name: 设置Pages
id: pages
uses: actions/configure-pages@v3
- name: 安装Node.js依赖
run: "[[ -f package-lock.json || -f npm-shrinkwrap.json ]] && npm ci || true"
- name: 使用Hugo构建
env:
# 为了与Hugo模块的最大向后兼容性
HUGO_ENVIRONMENT: production
HUGO_ENV: production
run: |
hugo \
--gc \
--minify \
--baseURL "${{ steps.pages.outputs.base_url }}/"
- name: 上传构建产物
uses: actions/upload-pages-artifact@v2
with:
path: ./public
# 部署作业
deploy:
environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }}
runs-on: ubuntu-latest
needs: build
steps:
- name: 部署到GitHub Pages
id: deployment
uses: actions/deploy-pages@v2
- 步骤7
- 使用类似"Add workflow"的提交消息将更改提交到本地仓库,并推送到GitHub。
- 步骤8
- 从GitHub的主菜单中选择Actions。你会看到如下内容:
- 步骤9
- 当GitHub完成构建和部署您的站点后,状态指示器的颜色将变为绿色。
- 步骤10
- 点击上面的提交消息。您会看到如下内容:
在部署步骤下,您将看到链接到您的在线站点的链接。
将来,每当您从本地仓库推送更改时,GitHub都会重新构建您的站点并部署更改。
自定义工作流程
上面的示例工作流程包括以下步骤,通常需要10-15秒:
- name: 安装Dart Sass
run: sudo snap install dart-sass
如果您的站点、主题和模块不使用Dart Sass转译Sass到CSS,您可以删除此步骤。