設定 | gkzz.dev

アコーディオンメニューを Hugo で作ったこのブログ(gkzz.dev)で使いたい

1.この記事で達成したいことアコーディオンメニューをHugoで作ったこのブログ(gkzz.dev)で使いたいアコーディオンとは、長い説明やサンプルコードを折りたたむようにすることで、見たいときだけクリックして見ることができるナビゲーションメニューのひとつ参考：アコーディオンメニュー（accordion menu）とは - IT用語辞典 e-Words アコーディオンの一例青空文庫から「こころ」の冒頭を抜粋します。私わたくしはその人を常に先生と呼んでいた。だからここでもただ先生と書くだけで本名は打ち明けない。これは世間を憚はばかる遠慮というよりも、その方が私にとって自然だからである。私はその人の記憶を呼び起すごとに、すぐ「先生」といいたくなる。筆を執とっても心持は同じ事である。よそよそしい頭文字かしらもじなどはとても使う気にならない。私が先生と知り合いになったのは鎌倉かまくらである。その時私はまだ若々しい書生であった。暑中休暇を利用して海水浴に行った友達からぜひ来いという端書はがきを受け取ったので、私は多少の金を工面くめんして、出掛ける事にした。私は金の工面に二に、三日さんちを費やした。出所：https://www.aozora.gr.jp/cards/000148/files/773_14560.html 2.方針アコーディオン（アコーディオンメニュー）をHTMLのdetailsタグとsummaryタグを使って実装する c.f. https://developer.mozilla.org/ja/docs/Web/HTML/Element/details 3.環境情報 $ grep VERSION /etc/os-release VERSION="20.04.3 LTS (Focal Fossa)" VERSION_ID="20.04" VERSION_CODENAME=focal ※ アコーディオンをHugoで使う上で求められる技術はHTML/CSSです。Hugoの推奨バージョンはドキュメントを読むかぎり、記載されていおりませんでした。私の環境では以下の2つのバージョンで動作確認をしております。ご参考までに。 $ hugo version hugo v0.88.1-5BC54738+extended linux/amd64 BuildDate=2021-09-04T09:39:19Z VendorInfo=gohugoio $ $ hugo version hugo v0.88.1-5BC54738 linux/amd64 BuildDate=2021-09-04T09:39:19Z VendorInfo=gohugoio $ 4.アコーディオンの設定方法 Hugoのテーマを使っていない場合、layouts/shortcodes/accordion.htmlを作成 e.g.：layouts/shortcodes/accordion.html `※ Markdownでアコーディオンを使う場合、layouts/shortcodes/配下に作ったアコーディオンの設定ファイル名(accordion.html)をMarkdownで指定する Hugoのテーマを使っている場合、themes//layouts/shortcodes/accordion.htmlを作成 Hugoのテーマはsubmoduleとして扱っていれば、themes/*/layouts/shortcodes配下にファイルを置いてもHugoプロジェクト（自分のブログ）のリポジトリにpushすることが難しいです。 $ vi layouts/shortcodes/accordion.html <details> <summary>{{ .Get "title" | default "e.g." }}</summary> {{ .Inner | markdownify }} </details> 設定は完了したので、Markdownから使ってみるアコーディオンの中括弧( { } )は二重で囲ってください！下記はMarkdownで書いてもアコーディオンが有効とならないように、あえて中括弧をひとつで囲っています。 {< accordion title="ここをクリックしてみて" >} 青空文庫から「こころ」の冒頭を抜粋します。 > 私わたくしはその人を常に先生と呼んでいた。だからここでもただ先生と書くだけで本名は打ち明けない。これは世間を憚はばかる遠慮というよりも、その方が私にとって自然だからである。私はその人の記憶を呼び起すごとに、すぐ「先生」といいたくなる。筆を執とっても心持は同じ事である。よそよそしい頭文字かしらもじなどはとても使う気にならない。 >　私が先生と知り合いになったのは鎌倉かまくらである。その時私はまだ若々しい書生であった。暑中休暇を利用して海水浴に行った友達からぜひ来いという端書はがきを受け取ったので、私は多少の金を工面くめんして、出掛ける事にした。私は金の工面に二に、三日さんちを費やした。出所：https://www.aozora.gr.jp/cards/000148/files/773_14560.html {< /accordion >} ※ こちらで書かれているやりかたはうまくいかなかった。cssを用意する必要があるように思うけど、cssのサンプルコードが見当たらなかった。そこで上記のとおり、detailsタグとsummaryタグを使ってアコーディオンを実装することとした。 ...

Google Analytics 4 から採用された Measurement ID(e.g. G-00000XXXXX) を Hugo で設定する

1.この記事で達成したいこと Google Analytics 4から採用された　Measurement ID(e.g. G-00000XXXXX) の設定をHugoでしたい Tracking ID(e.g. UA-000000-2)を使ってGoogle Analyticsの設定をする方法は多く紹介されている Measurement IDの解説記事はあっても修正するファイルのパスが間違っていたりしていたので書こうと思った ※Google Analytics v4を使っている場合でも、Measurement IDとTracking ID(e.g. UA-000000-2)を併用することはできる。 ※詳細は「おまけ.Google Search Consoleを使うためにTracking IDも設定する」で書いているので最後まで読んでほしい。 2.前提 Measurement IDの取得方法については解説せず、以下の記事に譲りたい What happened to my Tracking ID? - Analytics Help　3.設定方法以下を参考に進める Installation · adityatelange/hugo-PaperMod Wiki Google Analytics 4 Implementation in Hugo config.ymlを修正パスは/path/to/${BLOG_DIR}/config.yml params: # Hugoにおける"production"の意味合いは、Hugoで立ち上げているウェブサイトがググって見つけることができるぐらいのニュアンス # 余談だが、ローカルで"Hugo server -D"を実行した場合のenvは"development" env: production googleAnalyticsID: <G-00000XXXXX> analytics-gtag.htmlを以下のパスに新たに作成 /path/to/${BLOG_DIR}/layouts/partials/analytics-gtag.html $ mkdir -p layouts/partials $ touch layouts/partials/analytics-gtag.html  <script async src="https://www.googletagmanager.com/gtag/js?id={{ .Site.Params.GoogleAnalyticsID }}"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', '{{ .Site.Params.GoogleAnalyticsID }}'); </script> PaperModが用意しているbaseof.htmlを以下のパスにコピーして修正 /path/to/${BLOG_DIR}/layouts/_default/baseof.html $ mkdir -p layouts/_default $ cp themes/PaperMod/layouts/_default/baseof.html layouts/_default/ $ find ./ -type f -name 'baseof.html' ./themes/PaperMod/layouts/_default/baseof.html ./layouts/_default/baseof.html <head>  {{ if .Site.Params.GoogleAnalyticsID }} {{ partial "analytics-gtag.html" . }} {{ end }}  {{- partial "head.html" . }} </head> 4.設定ができたか確認するデプロイしてからGoogle Analyticsでアクセスがとれているか確認する以外の方法を考えてみたので書き残しておく。 ...

Firebase Hosting と Google Domains で購入したカスタムドメインを接続する

この記事で達成したいこと購入した独自ドメインのサブドメインをFirebase Hostingで使いたい前提カスタムドメインはgkzz.devとし、購入先はGoogle Domains Firebase Hostingではgkzz.devのサブドメインであるblogs.gkzz.devを指定する設定がうまくできず、Firebase Hostingではgkzz.devを指定するように変更 blog.gkzz.devにアクセスが飛んできた場合はgkzz.devへリダイレクトするようにした以下のFirebaseのドキュメントを参考に進める。 Connect a custom domain | Firebase Firebase Hostingの画面でカスタムドメインを登録 https://console.firebase.google.com からFirebaseのコンソール画面へログイン Firebase Hostingで使うプロジェクトを選択するか、新規に作成ここでは既存のプロジェクトを選択している画面左の Hosting をクリック Add custom domain をクリックするとポップアップ画面が表示されるポップアップ画面から Qucik setup 、 Aレコードを選択したら、デプロイ先となるカスタムドメイン名を入力し、IPアドレスをコピーしておく https://domains.google.com の画面左側の DNS をクリック Custom recordsにて左からデプロイしたいカスタムドメイン名、A 、先ほどコピーした IPアドレスを入力していく以上で、Firebase HostingとGoogle Domainで購入したカスタムドメインとの設定は完了した。 ※接続が確認できた画面は、自分のブログの画面しか確認できていない。Firebase HostingとGoogle Domainで購入したカスタムドメインとの設定のみした場合、どういう画面になるのかサンプルの資料はない。。 P.S. TXTレコードはGoogle Domainsで登録することなく終わったけど。。 TXTレコードはGoogle Domainsで登録することなく、Firebase HostingとGoogle Domainsで購入したカスタムドメインとの設定が終わってしまった。 ...

Firebase HostingとGithub Actionsで独自ドメインのHugoプロジェクトのブログを自動デプロイする

1.この記事で達成したいこと独自ドメインのHugoプロジェクトのブログを作ってみたいそのブログがこれ！ –> https://gkzz.dev ブログはHugo + Firebase Hostingで構成し、デプロイはGithub Actionsで自動化したいこれまでローカルからデプロイという運用対処としていた、、 ※Hugoのインストール手順はこちらに書いてあるのでどうぞ。最新のHugoをインストールする方法とHugoの設定ファイルをtomlフォーマット以外にする方法 | gkzz.dev 2.前提 HugoのテーマはPaperMod Firebase HostingとGoogle Domainsで購入したカスタムドメインを接続する方法は以下のとおり実施している Firebase HostingとGoogle Domainsで購入したカスタムドメインを接続する | gkzz.dev ドメインはgkzz.devとする 3.環境情報 $ grep Ubuntu /etc/os-release NAME="Ubuntu" PRETTY_NAME="Ubuntu 20.04.2 LTS" $ hugo version hugo v0.87.0-B0C541E4 linux/amd64 BuildDate=2021-08-03T10:57:28Z VendorInfo=gohugoio $ 4.PaperModの導入以下のPaperModのインストール手順を参考に進める https://github.com/adityatelange/hugo-PaperMod/wiki/Installation#method-2 ※ https://github.com/adityatelange/hugo-PaperMod をサブモジュールとする点がミソ！「6.GitHub Actionsの設定ファイル(.github/workflows/*.yml)を用意」で活きてくる！ $ hugo new site ${BLOG_DIR} -f yml $ cd ${BLOG_DIR} $ git init $ git submodule add --depth=1 https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod config.ymlのbaseURLにFirebase Hostingでホストしているカスタムドメインを指定 $ vi config.yml # https://github.com/adityatelange/hugo-PaperMod/wiki/Installation baseURL: https://gkzz.dev/ #languageCode: en-us title: gkzz.dev paginate: 5 theme: PaperMod 記事を書いてローカルサーバーにデプロイしてみる http://localhost:1313で接続できる $ hugo new posts/<記事のファイル名>.md $ hugo server -D 5.Firebaseのインストールと初期設定以下のFirebase CLIのインストール手順を参考に進める Firebase CLI reference $ curl -sL https://firebase.tools | bash $ firebase login 略 Visit this URL on this device to log in: ******** <--- 表示されるURLからログイン認証を終える Waiting for authentication... ✔ Success! Logged in as ******** Firebase CLIからGithubのログイン認証を終え、またfirebaseServiceAccountというサービスアカウントを作成対話形式で進んでいく firebaseServiceAccountはGithub Actions上でFirebase CLIが使うもの ## 改めて設定し直したい場合 $ firebase init hosting:github $ firebase init hosting $ firebase init hosting You're about to initialize a Firebase project in this directory: /path/to/${BLOG_DIR} === Project Setup First, let's associate this project directory with a Firebase project. You can create multiple project aliases by running firebase use --add, but for now we'll just set up a default project. ? Please select an option: Use an existing project ? Select a default Firebase project for this directory: i Using project ${GCP_PROJECT_ID} === Hosting Setup Your public directory is the folder (relative to your project directory) that will contain Hosting assets to be uploaded with firebase deploy. If you have a build process for your assets, use your build's output directory. ## ${BLOG_DIR}からみた相対パス。PaperModの場合、public ? What do you want to use as your public directory? public ## シングルページではないのでNo ? Configure as a single-page app (rewrite all urls to /index.html)? No ## Yes ? Set up automatic builds and deploys with GitHub? Yes ✔ Wrote public/404.html ✔ Wrote public/index.html i Detected a .git folder at /path/to/${BLOG_DIR} i Authorizing with GitHub to upload your service account to a GitHub repository's secrets store. Visit this URL on this device to log in: ******** <--- 表示されるURLからFirebase CLIからGithubのログイン認証を終える Waiting for authentication... ✔ Success! Logged into GitHub as ${GITHUB_USERNAME} ##　${GITHUB_USERNAME}/${BLOG_DIR} ? For which GitHub repository would you like to set up a GitHub workflow? (format: user/repository) ${GITHUB_USERNAME}/${BLOG_DIR} ✔ Created service account ******** with Firebase Hosting admin permissions. ✔ Uploaded service account JSON to GitHub as secret ******** i You can manage your secrets at https://github.com/${GITHUB_USERNAME}/${BLOG_DIR}/settings/secrets. ## 後ほど自分で書くのでNo ? Set up the workflow to run a build script before every deploy? No ✔ Created workflow file /path/to/${BLOG_DIR}/.github/workflows/firebase-hosting-pull-request.yml ## Yes ? Set up automatic deployment to your site's live channel when a PR is merged? Yes ## main (Firebase Hostingへデプロイするときのブランチ) ? What is the name of the GitHub branch associated with your site's live channel? main ✔ Created workflow file /path/to/${BLOG_DIR}/.github/workflows/firebase-hosting-merge.yml i Action required: Visit this URL to revoke authorization for the Firebase CLI GitHub OAuth App: ******** i Action required: Push any new workflow file(s) to your repo i Writing configuration info to firebase.json... i Writing project information to .firebaserc... ✔ Firebase initialization complete! ここまでくると、Github Actions上でFirebase CLIが使うfirebaseServiceAccountというサービスアカウントがご自身のブログのリポジトリの「settings > secrets」のページから登録されていることが確認できる。 ...