Hugo

概要 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....

ここでわかること VS Codeのdevcontainer機能でクリーンなhugo環境の構築 構成 Layout 事前準備(作業内容割愛) Dockerが動く環境 … 今回はUbuntu(VirtualMachine)を使います。WSLでも可 VScodeが接続するユーザでdockerコマンドが実行できること VSCodeの拡張機能にWSLもしくはRemoteSSHとdevcontainerを追加 Hugo環境構築 1. devcontainer関連ファイルを設置 on Ubuntu devcontainerテンプレートをmicrosoftリポジトリから取得して配置(gitの一部clone[sparseclone]) git clone --no-checkout --depth=1 https://github.com/microsoft/vscode-dev-containers.git cd vscode-dev-containers git sparse-checkout init git sparse-checkout add containers/hugo git checkout git checkoutすると必要なファイルだけ取得できました devcontainer関連ファイルをhugo作業フォルダとして複製し、gitリポジトリを削除します mv containers/hugo ../ rm -rf ../vscode-dev-containers 2. Hugo DevContainerの起動(on VSCode) VSCode Remote SSH or WSLでUbuntuへ接続し、コンテンツフォルダをワークスペースに追加 [ファイル] > [ワークスペースにフォルダを追加] > hugo/ ワークスペースに名前をつけて保存(devcontainer起動に必須) [ファイル] > [名前を付けてワークスペースに保存] devcontainer機能でDockerイメージの作成、及びHugo devcontainerへ接続すると、dockerイメージがビルドされ、devcontainerへVSCodeが再接続します [左下の接続バー] > [コンテナを再度開く] 左下の接続バーが[開発コンテナ: Hugo(Community)]になっていれば成功です 3. 初期コンテンツを作成(on Hugo Devcontainer) VSCodeのTerminalから以下のコマンドを実行して、テストサイト用Hugoファイル構成を作成します...