HugoウェブサイトのにGoogle Analyticsのトラッキングコードを設定

Hugo WebサイトにGoogle Analyticsのトラッキングコード追加 はじめに Webサイトへのアクセス状況を解析するためのツールにGoogleアナリティクスを設定する 前提条件 Googleアカウントを事前に作成しておく GitHubのアカウントを事前に作成しておく Hugoの自動デプロイワークフローを作成している 手順 Google Analyticsのトラッキングコードを取得する。 Hugoプロジェクトのconfig.tomlファイルを編集する。 Githubの"Secrets and variables"を設定する。 G-XXXXXXXXXXを置換をワークフローに追加する Hugoウェブサイトをビルドしてください。 Google Analyticsのトラッキングが正しく設定されているか確認 Google Analyticsのトラッキングコードを取得 こちらからアクセスする。 Hugoプロジェクトのconfig.tomlファイルを編集 config.toml googleAnalytics = "G-XXXXXXXXXX" にトラッキングコードを追加する Githubの"Secrets and variables"を設定 [settings]-[Secrets and variables]-[Actions]-[Variables]-[New repository variable] GOOGLE_ANALYTICS_TRACKING_CODEを作成してGoogle Analyticsのトラッキングコードを入力する。 G-XXXXXXXXXXを置換する G-XXXXXXXXXXを${{ vars.GOOGLE_ANALYTICS_TRACKING_CODE }}に置換する - name: To set up Google Analytics tracking code in a Hugo website's config.toml file. run: | sed -i s/G-XXXXXXXXXX/${{ vars.GOOGLE_ANALYTICS_TRACKING_CODE }}/ config.toml Google Analyticsのトラッキングの確認方法 > hugo 上記コマンドでビルドするとpublicフォルダが作成される。 index.

Read More

Hugo + PlantUML + GitHub/Actionsで画像に変更して表示する

Hugo + PlantUML + GitHub/ActionsでPlantUML画像を表示する はじめに Hugoのワークフロー(hugo.yml)内でPlantUMLワークフローを呼び出す: Hugoのワークフロー内で、PlantUMLを画像に変換し、成果物を生成するPlantUMLワークフロー(plantuml.yml)を呼び出します。これにより、PlantUMLの実行と成果物の生成がトリガーされます。 PlantUMLワークフロー(plantuml.yml)の実行: PlantUMLワークフロー内で、PlantUMLコードを画像に変換し、生成された画像を成果物としてアップロードします。PlantUMLワークフロー内で実行するステップは次のようになります: PlantUMLコードを画像に変換 生成された画像を成果物として保存 Hugoワークフローで成果物をダウンロード: Hugoのワークフロー内で、PlantUMLワークフローで生成された成果物をダウンロードします。GitHub Actionsの仕様により、同じワークフロー内で生成された成果物は他のステップから利用できます。 アップロードされた成果物の活用: ダウンロードした成果物は、Hugoを使用して構築されたウェブサイトのコンテンツとして活用できます。生成されたPlantUMLの画像は、ウェブページ上に表示されたり、ドキュメントとして利用される可能性があります。 これにより、GitHub Actionsを介してPlantUMLを使用して画像を生成し、それをウェブサイトの成果物として活用する一連の手順が実現されます。 ディレクトリ構成 ├── content │ ├── posts │ | └── plantuml │ │ ├── test.puml │ │ └── test.png ①test.pumlから画像に変換(plantuml.yml) │ └── images │ └── plantuml │ └── test.png ③成果物をダウンロード(hugo.yml) ├── artifact │ └── test.png ②成果物として保存(plantuml.yml) ワークフロー図 手順 plantuml.yml作成: PlantUMLの画像を生成しアップロードするためのワークフローファイル(例: .github/workflows/plantuml.yml)を作成します。 name: PlantUML to Image and Artifact on: workflow_call: env: PLANT_UML_PATH: content/plantuml IMGES_PATH: content/images ARTIFACT: artifact # Default to bash defaults: run: shell: bash jobs: # Generate plantuml diagrams job generate_puml_diagrams: runs-on: ubuntu-latest steps: - name: Checkout uses: actions/checkout@v3 - name: Generate PlantUML Diagrams uses: holowinski/plantuml-github-action@main with: args: -v -tpng ${PLANT_UML_PATH}/*.

Read More