






















具体文件详见 HUGO安装文档,下面主要解释一下docker部署的方式。
docker镜像地址:https://hub.docker.com/r/klakegg/hugo
github地址:https://github.com/klakegg/docker-hugo
lakegg/hugo镜像有基于Busybox、Alpine、Debian 和 Ubuntu4个系统.其中每个系统又分为normal、ext、onbuild、ci、ext-ci、ext-onbuild 6种,Busybox没有ext相关,下面简要介绍一下几种的区别
docker镜像版本如下:
| busybox | Alpine | Alpine with Asciidoctor | Alpine with Pandoc | Debian | Ubuntu | |
|---|---|---|---|---|---|---|
| normal | latest busybox |
alpine | asciidoctor | pandoc | debian | ubuntu |
| ext | - | ext-alpine | ext-asciidoctor | ext-pandoc | ext-debian | ext-ubuntu |
| ci | ci busybox-ci |
alpine-ci | asciidoctor-ci | pandoc-ci | debian-ci | ubuntu-ci |
| onbuild | onbuild busybox-onbuild |
alpine-onbuild | asciidoctor-onbuild | ext-pandoc-onbuild | debian-onbuild | ubuntu-onbuild |
| ext-ci | - | ext-alpine-ci | ext-asciidoctor-ci | ext-pandoc-ci | ext-debian-ci | ext-ubuntu-ci |
| ext-onbuild | - | ext-alpine-onbuild | ext-asciidoctor-onbuild | ext-pandoc-onbuild | ext-debian-onbuild | ext-ubuntu-onbuild |
hugo模板可以参考 https://themes.gohugo.io/
Hugo的主题主要是用了blowfish,下面主要对blowfish的使用展开简要说明
blowfish的github主要介绍了使用git submodules和Hugo的部署方式,这里主要介绍一下如何使用上面介绍的hugo docker镜像进行部署
require github.com/nunocoracao/blowfish/v2 version // indirect
[[imports]]
path = "github.com/nunocoracao/blowfish/v2"
使用blowfish搭建博客,具体参考文档
在favicon.io讲自己的图片生成为各种尺寸的icon,直接解压在favicon.io下载好的icon压缩包,并放在/static目录下即可
将自定义的svg文件放在/asserts/icons目录下,为了使ICON和主题自适应,需要在svg文件中添加属性 fill=“currentColor” 如下:
<svg>
<path fill="currentColor" d="xxx"/>
</svg>
需要在 config/_default/config.toml 中添加属性,如下:
hasCJKLanguage = true
Hugo中的评论组件/服务可以参考 Comments。这里给出了十几种开源方案,大部分方案需要Docker或者Kubernetes部署。
此外有两种需要依赖 Github Discussions 或者 Github issues 的评论组件——giscus 和 utterances。下面以giscus为例。
在 blowfish 主题中添加 comment 可以参考 blowfish-Comments。
简单描述一下,添加文件 layouts/partials/comments.html,具体的内容参考giscus 中的示例:
<script src="https://giscus.app/client.js"
data-repo="[在此输入仓库]"
data-repo-id="[在此输入仓库 ID]"
data-category="[在此输入分类名]"
data-category-id="[在此输入分类 ID]"
data-mapping="pathname"
data-strict="0"
data-reactions-enabled="1"
data-emit-metadata="0"
data-input-position="bottom"
data-theme="preferred_color_scheme"
data-lang="zh-CN"
crossorigin="anonymous"
async>
</script>
在 .github/workflows 目录下添加yml,文档参考Host on GitHub Pages,具体的yml内容示例如下:
name: Deploy Hugo site to Pages
on:
push:
branches: ["main"]
workflow_dispatch:
permissions:
contents: read
pages: write
id-token: write
concurrency:
group: "pages"
cancel-in-progress: false
# Default to bash
defaults:
run:
shell: bash
jobs:
# 构建
build:
runs-on: ubuntu-latest
env:
# Hugo 版本
HUGO_VERSION: 0.121.0
steps:
- name: Install 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: Install Dart Sass
run: sudo snap install dart-sass
- name: Checkout
uses: actions/checkout@v3
with:
submodules: recursive
- name: Setup Pages
id: pages
uses: actions/configure-pages@v3
- name: Install Node.js dependencies
run: "[[ -f package-lock.json || -f npm-shrinkwrap.json ]] && npm ci || true"
- name: Build with Hugo
env:
HUGO_ENVIRONMENT: production
HUGO_ENV: production
run: |
hugo \
--minify \
# 博客地址
--baseURL "https://example.com"
- name: Upload artifact
uses: actions/upload-pages-artifact@v2
with:
# hugo 构建后默认生成到 public 目录下
path: ./public
# 部署
deploy:
environment:
name: github-pages
# 博客地址
url: https://example.com
runs-on: ubuntu-latest
needs: build
steps:
- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages@v2
这部分写到另一个文章中了,具体可以看这个
此内容由惯性聚合(RSS阅读器)自动聚合整理,仅供阅读参考。 原文来自 — 版权归原作者所有。