HugoとDocsyとGitLabを使ってサイトを公開するための自分用メモ

自分用のメモ

参考になるリンク

とても参考になる。

Git-based Jamstackなブログ環境を構築するならプラットフォームは「Hugo + GitLab Pages」
「GitLabの方は、無料アカウントでありながらprivateリポジトリに対応」している点に着目している事に親近感を感じます。

新しい記事を追加する

hugo new パス名とする。

hugo new content/ja/blog/sample.md

ローカル環境でサイトを確認する

hugo server

GitLab CI用の`.gitlab-ci.yml`の中身

2023年1月にHugo (v0.109.0)やDocsy (v0.6.0)のバージョン上げました。
そのために、いくつか変更したので書いておきます。

Docsyのテーマを利用する際にGit submoduleではなく、Hugo Modulesを利用するように変更しました
Hugo Modulesを利用するための前提条件であるGoをインストールするべく、apk add goの記述を追加しました
Git submodule方式をやめたので、GIT_SUBMODULE_STRATEGY: recursiveの関連の記述を削除しました

image: registry.gitlab.com/pages/hugo/hugo_extended:latest

pages:
  stage: deploy
  environment: production
  script:
  - apk add git nodejs npm go
  - git --version
  - node -v
  - npm -v
  - go version
  - npm install autoprefixer
  - npm install postcss-cli
  - env HUGO_ENV="production" hugo

  artifacts:
    paths:
    - public

# # No action edition
# pages:
#   stage: deploy
#   environment: production
#   script:
#   - echo "no action"

#   artifacts:
#     paths:
#     - public

以前のgit submodule時代の記述

image: registry.gitlab.com/pages/hugo/hugo_extended:latest

variables:
  GIT_SUBMODULE_STRATEGY: recursive

pages:
  stage: deploy
  environment: production
  script:
  - apk add git nodejs npm
  - git --version
  - node -v
  - npm -v
  - npm install autoprefixer
  - npm install postcss-cli
  - env HUGO_ENV="production" hugo

  artifacts:
    paths:
    - public

imageはhugoではなく、hugo_extendedを使用する。

apk add --update-cache git npmの部分は、
以前はapk add --update-cache git nodejs nodejs-npmとしていたが、
エラーが出るようになり変更しました。
nodejs-npm が npm に名称変更？したのかもしれない。

shortcodeのエラーが出た場合の対策

ローカル環境でhugo serverを実行しようとして、下記のようなエラーが出た場合
failed to extract shortcode: template for shortcode "blocks/cover" not found

git submoduleでサブモジュールを更新してみると直った。
git submodule update --init --recursive

Google Search Consoleでサイトマップを登録しよう

Hugoで静的サイトを生成すると、sitemap.xmlが出力されている。
サイトの構造や更新を検索エンジンに伝えるために、
Google Search Consoleに、そのファイルを登録しよう。

ローカルでビルドするには

GitlabのCIがうまく動かなくなったとき用メモ。

前提

以下がインストールされていること。

Node.js
npm

インストールされているか、確認するには以下のコマンドで確認する。

node -v
npm -v

手順

.gitignoreファイル内のpublic/をコメントアウトして、puglicフォルダ以下をgit管理に追加する
Visual Studio Codeのターミナル(powershell)で以下を実行する

npm install autoprefixer postcss-cli
$env:HUGO_ENV="production"
hugo

Hugoのアップデート方法

Chocolatey・Scoopを使用している場合は簡単。
以下はChocolateyの場合。

アップデート方法

PowerShellを管理者権限で起動する
以下のChocolateyのコマンドを実行する

choco upgrade hugo-extended

※以前はupdateコマンドだったはずだが変更された。

インストール済みパッケージの確認方法

choco list

Docsyのモジュールをアップデートする方法

以下の通り

hugo mod get -u github.com/google/docsy

参考リンク

Update your Docsy Hugo Module

docsyのバージョンを0.6.0から0.7.0へアップグレードしてみました | miajimyu.com