1. 文章/

博客搭建简述

·1600 字·4 分钟
编程框架
Weaxs
作者
Weaxs

Hugo 及其镜像
#

  具体文件详见 HUGO安装文档,下面主要解释一下docker部署的方式。

docker镜像地址:https://hub.docker.com/r/klakegg/hugo
github地址:https://github.com/klakegg/docker-hugo

  lakegg/hugo镜像有基于 Busybox Alpine DebianUbuntu4个系统.其中每个系统又分为normal、ext、onbuild、ci、ext-ci、ext-onbuild 6种,Busybox没有ext相关,下面简要介绍一下几种的区别

  • normal:只有基础的hugo命令。默认Entrypoint是hugo,所以common只需要写server,即可执行hogu server
  • ext:拓展版,在normal基础上添加了go、git、nodejs等拓展工具 (推荐)
  • ci: 主要用于持续集成/部署。在normal基础上,新增了环境变量HUGO_ENV,去掉了默认Entrypoint,需要自行添加容器运行命令
  • onbuild: 此版本主要用于编译构建并可以分开源码和产出。默认源码文件夹是/src,产出文件夹是.target,可以通过HUGO_DIR和HUGO_DESTINATION_ARG进行自定义设置。

docker镜像版本如下:

busyboxAlpineAlpine with AsciidoctorAlpine with PandocDebianUbuntu
normallatest
busybox
alpineasciidoctorpandocdebianubuntu
ext-ext-alpineext-asciidoctorext-pandocext-debianext-ubuntu
cici
busybox-ci
alpine-ciasciidoctor-cipandoc-cidebian-ciubuntu-ci
onbuildonbuild
busybox-onbuild
alpine-onbuildasciidoctor-onbuildext-pandoc-onbuilddebian-onbuildubuntu-onbuild
ext-ci-ext-alpine-ciext-asciidoctor-ciext-pandoc-ciext-debian-ciext-ubuntu-ci
ext-onbuild-ext-alpine-onbuildext-asciidoctor-onbuildext-pandoc-onbuildext-debian-onbuildext-ubuntu-onbuild

hugo模板可以参考 https://themes.gohugo.io/

Blowfish模板使用
#

  Hugo的主题主要是用了blowfish,下面主要对blowfish的使用展开简要说明

  blowfish的github主要介绍了使用git submodules和Hugo的部署方式,这里主要介绍一下如何使用上面介绍的hugo docker镜像进行部署

  1. go.mod中添加blowfish
require github.com/nunocoracao/blowfish/v2 version // indirect
  1. config/_default/module.toml文件添加:
[[imports]]
path = "github.com/nunocoracao/blowfish/v2"
  1. 将根目录引用到镜像内的/src目录下,启动docker即可

  使用blowfish搭建博客,具体参考 文档

自定义浏览器角标
#

  在 favicon.io讲自己的图片生成为各种尺寸的icon,直接解压在favicon.io下载好的icon压缩包,并放在/static目录下即可

自定义ICON
#

  将自定义的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 的评论组件—— giscusutterances。下面以 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 Page 部署 Hugo
#

  在 .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