概要 HugoのGoogle Analytics 4への対応方法はいろいろな記事に記載されているが、公式サイトに記載されているガイドに沿って対応する ※この記事ではThemeにPaperModを利用している為、その他のThemeによっては設定する内容が異なる可能性があります。 執筆時点のHugo及びTheme Version Hugo: 0.120.4 PaperMod: v7.0 このページでわかること 公式サイトの解説ガイドに沿ったHugoのGoogle Analytics 4対応 参考サイト Hugo Templates > Internal templates https://gohugo.io/templates/internal/ 1. ディレクトリ構成 今回修正するファイルは以下になります - / - hugo.toml - layouts/ - partials/ - extend_head.html 2. 実装手順 2-1. hugo設定ファイルへGoogle Analytics 4 ID設定 公式ガイドに沿ってhugo.tomlへGoogle Analytics 4のIDを設定します hugo.toml or config.toml [services] [services.googleAnalytics] ID = 'G-xxxxxxxxxx' 2-2. extend_head.html(Theme: PaperModの場合)を上書きする 全てのページへ反映する為、extend_head.htmlを修正する_internal/google_analytics.htmlを読み込む設定を記載 layouts/partials/extend_head.html {{ template "_internal/google_analytics.html" . }} 3. 反映確認 Hugoの各ページのソースを確認し、googletagmanager.comのタグが追記されていることを確認

概要 Hugo開発を自身の端末に作らずに、どこからでも気軽にHugoのテンプレート変更や記事の確認などを行いたい。 Killercodaという学習用プラットフォームサービスでHugo用デバッグ環境を用意する方法を記載します。 Killercoda過去記事 KillercodaとGithubリポジトリを同期させる方法 Killercodaのオリジナルシナリオの作成方法 このページでわかること KillerCodaを使ったHugo開発環境の作り方 1. Killercoda Hugoシナリオ ディレクトリ構成 - / - Hugo/ - index.json - background.sh - foreground.sh - intro.md - finish.md - step1.md 2. 実装解説 2-1. foreground foregroundにスクリプトを定義すると、シナリオ実行時にスクリプトを呼び出すことができます。 実装以下 /tmp/background-finishedというファイルを作成するまでloop foreground.sh while [ ! -f /tmp/background-finished ]; do sleep 5; echo 'check file'; done echo Hello and Welcom to this scenario! 2-2. background backgroundにスクリプトを定義すると、foregroundとは別にスクリプトを呼び出すことができます。 実装は以下 hugoのインストール Githubから自身のhugoリポジトリの取得及びgit submoduleによるthemeの設置のでは /tmp/background-finishedというファイルを作成 background.sh snap install hugo git clone https://github....

概要 KillerCodaはあらかじめ登録されたProfile以外に自分のGithubリポジトリを同期し、オリジナルのプロファイルを読み込ませることができます。 その手順を紹介します。 前回ではKillerCodaと自身のGithubリポジトリの同期設定を行いましたので、ここでは実際にシナリオ作成を行っていきます。 このページでわかること KillerCodaの一番シンプルなシナリオ作成方法 公式に公開されているサンプルで、複数ページの構成方法 verify機能の確認 1. 一番シンプルなシナリオ 1-1. １ページだけのシンプルなシナリオ https://killercoda.com/creators に記載されているOSイメージを起動するだけの一番シンプルなシナリオを作成してみます。 1-2. ディレクトリ構成 各シナリオはディレクトリ単位で分割します。 最小構成はindex.jsonのみで構成が可能です。 - / - scenario01/ - index.json 1-3. index.jsonの各パラメータ title: 記載した情報がKillerCodaで表示されるシナリオ名になります imageid: creatorsページのEnvironmentsに記載されているイメージを利用することができます { "title": "Ubuntu simple", "backend": { "imageid": "ubuntu" } } 1-4. Githubリポジトリへアップロードし反映 サンプルプログラムの一部クローン方法を記載しておきます git clone --filter=blob:none --sparse https://github.com/killercoda/scenario-examples.git git sparse-checkout set kubernetes-2node-multi-step-verification 上記構成をGithubへpushすると、GithubのpushイベントによりKillerCodaへwebhookが実行され、KillerCoda側からGithubのリポジトリの情報が取得されます。 Ubuntu simpleシナリオに移動するとUbuntuが立ち上がりました。 2. Kubernetesサンプルシナリオを作成 2-1. kubernetesサンプルシナリオ作成 https://killercoda.com/creatorsに記載されているkubernetesサンプルシナリオを参考に、複数ページ構成による学習コンテンツを作成します。 公開されているサンプルコンテンツのリポジトリは以下になります。 https://github.com/killercoda/scenario-examples/tree/main/kubernetes-2node-multi-step-verification 2-2. index.jsonの構成 index.jsonのdetailsでは"intro", “steps”, “finish"の３構成に分かれています。 introとfinishは１ファイルしかMarkdownファイルを呼び出せませんが、まstepsは複数のMarkdownファイルを呼び出すことができます。 { "title": "Kubernetes 2node multi-step verification", "description": "Uses a two node Kubernetes cluster and performs user input verification in all steps", "details": { "intro": { // 初回に呼び出される "text": "intro....

概要 KillerCodaはあらかじめ登録されたProfile以外に自分のGithubリポジトリを同期し、オリジナルのプロファイルを読み込ませることができます。 その手順を紹介します。 流れ Githubにリポジトリを作成(文中では省略) KillerCodaにアカウントを作成(文中では省略) GithubのリポジトリをKillerCodaに登録 KillerCodaで発行されたDeployKeyを、Githubリポジトリへ登録 KillerCodaで発行されたWebhookを、Githubリポジトリへ登録 KillerCodaとGithubリポジトリの同期確認 3. GithubのリポジトリをKillerCodaに登録 KillerCodaへログインし、[Creater]>[Repository]へ移動します。 Step1: で以下の図のようにRepoName: 及び Branch:にKillerCodaと同期したいGithubリポジトリの情報を登録します。 4. KillerCodaで発行されたDeployKeyを、Githubリポジトリへ登録 Step2に記載されているDeploy Keyをコピーします Githubで自身のリポジトリの[Settings]>[Deploy Keys]>[Add Deploy Key]へ移動し、先ほどコピーしたDeploy Keyを登録します。 5. KillerCodaで発行されたWebhookを、Githubリポジトリへ登録 Step3に記載されているWebhook URL及びSecretをコピーします Githubで自身のリポジトリの[Settings]>[Webhooks]>[Add Webhook]へ移動し、先ほどコピーしたWebhookURL、Secretを登録します。 Webhook登録完了後に、登録したWebhookの左端にチェックがつき、Successfulのメッセージが表示されていれば問題なくWebhookがKillerCodaに飛んでいます。 6. KillerCodaとGithubリポジトリの同期確認 KillerCodaへログインし、[Creater]>[MyScenarios]へ移動します。 Update Statusの時刻が最新化されていれば成功です。 次の記事ではオリジナルシナリオを作ります。

ここでわかること VS Codeのdevcontainer機能でhugo環境を構築 devcontainerで環境を構築する意味 ■hugo環境をローカル用意するメリット, デメリット メリット デバッグ実行速度 デメリット 開発端末の環境が汚れる(色々なコンポーネントや設定が行われ、端末変更などで再現が大変) 複数のバージョンを切り替えれない など開発環境の可搬性に問題があります。 どこでも、記事の執筆とプレビューできる環境を用意する為に [Remote SSH] + [VS Code Server] + [devcontainer(Hugo開発・デバッグ環境)] により、SSH接続できる環境を用意すれば継続開発ができます。 Hugo用devcontainer template devcontainerはmicrosoftリポジトリにありますので、自身で作成は不要。 devcontainerリポジトリ https://github.com/microsoft/vscode-dev-containers/tree/main/containers/hugo DevContainer(Hugo)の起動 “DevContainers: Add Dev Container Configuration File.” を選択 “全ての定義を表示” を選択 “Hugo コミュニティ” を選択 Hugoデバッグ方法 VS Codeから以下のコマンドでhugo serverを立ち上げる hugo server -D VS Code実行端末でhttp://localhost:1313へアクセス 注: themeの変更の場合は再起動が必要

結論 以下２点が重要 .gitmodulesを触らない オリジナルリポジトリのgit履歴からも削除 方法 サブモジュール自体を削除する場合は.git/modules/<submodule_name>/も削除する必要がある .gitmodulesからも消えないのはgit rm -rでサブモジュールを削除していないから # サブモジュールを解除 $ git submodule deinit submodule-A Cleared directory 'submodule-A' # git履歴から削除(※これ重要で.gitmodulesから消えてくれる) $ git rm -r submodule-A/ # .git以下からも削除(※これ重要。面倒くさい) $ rm -rf .git/modules/submodule-A 正しく削除できていない時に発生するエラー その１ 'submodule-A' already exists in the index その2 "submodule" already exists in the index

参考 git-scm.com git-submodule git-scm.com - 7.11 Git のさまざまなツール - サブモジュール git submoduleコマンドオプション一覧 add … サブモジュールを追加 .gitsubmodulesファイルに追記される(存在しなければ生成) タグ指定やコミットハッシュ指定ができないので注意 $ git submodule add --name submodule-A --branch main --depth 1 https://github.com/example/submodule-A.git $ cat .gitmodules [submodule "submodule-A"] path = submodule-A url = https://github.com/example/submodule-A.git branch = main タグ、コミットハッシュ指定する 参考: https://stackoverflow.com/questions/1777854/how-can-i-specify-a-branch-tag-when-adding-a-git-submodule $ cd submodule-A git checkout v1.0 cd .. git add submodule-A git commit -m "moved submodule to v1.0" git push [発生するエラー] 既に追加されている(.submodulesから手動削除しても) 'submodule-A' already exists in the index 手動で削除したりすると怒られる。空ファイルを作成して再実行 please make sure that the ....