Docker/VSCode/Hugo/Bitbucket/Netlifyでブログを書く技術

音楽ブログ を数年書いているのですが、安いWindows11環境で、以下のような技術スタックで書いています。 前回 の続編です。

• 秘密鍵/公開鍵は難しいけど、頑張って！
• netlify.toml がハマりどころ

• Rancher Desktop で Docker/仮想環境を作る
• Visual Studio Code (所謂)“VSCode” を使って Markdown で書く
• Bitbucket にコミット/プッシュ
• Netlify で公開

これ、一回慣れてしまうと簡単なんですけど、それまでが四苦八苦だったので、備忘録代わりに書いておきます。

1. Git for Windows も、事前にインストールしておきましょう
2. 拡張機能 日本語拡張 と Dev Containers は必須でしょうね。

1. Rancher Desktop をインストールする際、最近はWSL2/Ubuntuが自動で入るみたいですね

1. プライベートリボジトリで作るのが良いでしょう
2. ローカルにクローンします。 これがプロジェクトになります。

1. WSL2の中身はUbuntuなので、ターミナルから、Ubuntuを選び、以下で鍵ペアが作れるのではないでしょうか
   • ユーザー名はC:Users配下の、自分のディレクトリを参照して下さい
2. bitbucketに公開鍵を登録するのは、公式手順に従うのが良いでしょう
   • Windows で個人用 SSH キーをセットアップする | Bitbucket Cloud | アトラシアン サポート

sudo ssh-keygen
ls -la /root/.ssh/
# 公開鍵を表示
sudo cat /root/.ssh/id_rsa.pub
# 秘密鍵をローカルにコピー
sudo cp /root/.ssh/id_rsa /mnt/c/Users/(ユーザー名)

1. プロジェクトのトップに .devcontainer と言うディレクトリを作ります
2. 以下に3つのファイル id_rsa devcontainer.json Dockerfile を置きます

上記で作った秘密鍵 id_rsa を .devcontainer 配下にコピーします

{
  "name": "blog",
  "build": {
    "dockerfile": "Dockerfile"
  },
  "customizations": {
    "vscode": {
      "extensions": [
        "ms-ceintl.vscode-language-pack-ja"
      ],
      "settings": {}
    }
  }
}

本当に最小限の拡張して入っていないので extensions や settings は色々弄ったら楽しいと思います。

# 拡張機能入りdokcer image
FROM klakegg/hugo:0.111.3-ext-debian
COPY id_rsa /root/.ssh/
RUN apt update && apt -y install nodejs git && \
    chmod 600 /root/.ssh/id_rsa && \
    ssh-keyscan -H bitbucket.org >> /root/.ssh/known_hosts

この Dockerfile の肝心なところは、以下です。

• 拡張機能を入れたHugoのDockerイメージを使っています
  • ターミナル使うなら、debianが良いですよね
  • 最近のHugoは、拡張機能を入れられるようになったので、テンプレートによっては、Node.jsをインストールしないと、ビルドができなかったりします
• ホスト(手元のWinマシン)から、リモート(Docker/仮想環境)に 秘密鍵 id_rsa をコピーし、権限を限定させ、ホストに鍵を認識させる ssh-keyscan コマンドを打つ設定を入れています。
  • これがないと、リモートのターミナルから、Gitのプッシュも出来なかったりします

これが一番のハマりどころ

プロジェクトトップに netlify.toml と言うファイルを作っておくのです

[build]
publish = "public"

[context.production.environment]
HUGO_VERSION = "0.111.3"
HUGO_ENV = "production"
HUGO_ENABLEGITINFO = "true"

netlifyのデフォルトのHugoのヴァージョン、とにかく古いので、最近のテンプレートを使うと、ビルドが普通にコケます。 なので。 HUGO_VERSION = "0.111.3" 等、指定してあげると、普通にビルドされます。