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

自分用のメモ

参考になるリンク

とても参考になる。

Hugo + GitLab Pagesでブログを始める

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

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

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

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

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

前提

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

  • Node.js
  • npm

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

node -v
npm -v

手順

  1. .gitignoreファイル内のpublic/をコメントアウトして、puglicフォルダ以下をgit管理に追加する
  2. Visual Studio Codeのターミナル(powershell)で以下を実行する
npm install autoprefixer postcss-cli
$env:HUGO_ENV="production"
hugo

Hugoのアップデート方法

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

アップデート方法

  1. PowerShellを管理者権限で起動する
  2. 以下の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


スポンサーリンク