もともとは、他のBLOGの記事をベースに書いていた記事があったのですが、 参考サイトがなくなってしまったため、すべてを書く必要が生じました。 そのため、前提条件を含めて記載します。なお、本記事はWindows環境下を前提にしています。

※ なお、この記事はまだ作成を進めているので、予告なく変更されます。

レポジトリ構成

この記事では次のレポジトリ構成を想定しています。

  • BLOG用メインレポジトリ
  • 記事公開用レポジトリ

記事公開用レポジトリはサブモジュールとして、BLOG用メインレポジトリに組み込みます。したがって、全体のディレクトリ構成は以下のようになります。

/ - root
| - archetypes
| - content
| - post
| - layouts
| - public
| - static
| - theme

記事公開用レポジトリはpublicに組み込みます。 テーマ管理用レポジトリはthemeの配下に組み込みます。

使用したツール

名称
Visual Studio Code
cmd
scoop

必要なツールの取得

scoopのインストール

  1. スタートからPowerShellを起動する

  2. PowerShellの設定変更

    Set-ExecutionPolicy RemoteSigned -scope CurrentUser

  3. PowerShellからのScoopのインストール

    iex (new-object net.webclient).downloadstring('https://get.scoop.sh')

gitのインストール

scoop install git

hugoのインストール

scoop install hugo-extended

テーマの準備

テーマは https://themes.gohugo.io/ から探されるといいと思います。 テーマに対する小幅な変更はlayouts以下に同構造でファイルを複製して修正することになります。これにより、themes以下を直接修正しなくても良くなります。 本アーティクルでは、hugo-PaperModの使用を前提として進めます。

BLOG用メインレポジトリの準備

を以下のコマンドで準備します。

hugo new site <my_site>

BLOG用のディレクトリが出来たら git init後、github等適当なところにpushします。 テーマは適当にsubmodule addします。submodule addするポイントはthemes以下となります。

git add submodule <theme>

記事公開用レポジトリの準備

本稿では出来た成果物はNetlifyで公開することを前提にしています。 ブログの公開には、記事を管理するメインレポジトリとは別に、記事の公開専用レポジトリを作成します。具体的な流れは以下のとおりです。

  1. 記事公開用のレポジトリを作成

BLOGのディレクトリとは別の場所に public 用のディレクトリを作成し、そこで git init を実行して、新しいGit管理下のレポジトリを作ります。

  1. リモートレポジトリにプッシュ

作成した public 用のレポジトリをGitHubなどのリモートリポジトリに登録し、最初のコミットをプッシュします。

  1. BLOGのメインレポジトリに組み込み

先ほど作成した public 用のレポジトリを、BLOGのメインレポジトリの public/ フォルダ内にサブモジュールとして追加します。

git submodule add <リモートレポジトリURL> public

このように、記事の管理と記事の公開を分離することで、メインレポジトリと公開レポジトリを独立して管理できるようになります。

記事の準備

記事は以下のコマンドでアーキテイプから作成します。

hugo new post/<記事ファイル名>.md

記事の作成

アーキタイプから変更して、Markdown型式で記事を作成します。 作成中にはdraft: trueにしたままですと、単純なビルドでは記事はビルドされません。ただし、以下のコマンドで記事を確認するとpublic以下に記事が作成されるので注意が必要です。

hugo serve -D

また、–cleanDestinationDirでクリアしてしまうと、faviconとかを置いてある場合、それもクリアされてしまうので注意が必要です。

従って、私の場合には以下のような専用のスクリプトを用意しています。かなり雑ですが、とりあえず、間違って展開される恐れはだいぶ減ります。

pushd public
rmdir /s about
rmdir /s assets
rmdir /s categories
rmdir /s images
rmdir /s page
rmdir /s post
rmdir /s tags
del 404.html
del index.html
del index.xml