hugo

レベルが低かろうと技術ブログという矜持を持つ 最終更新日を付与したい。 というのも技術ブログにおいて更新日はとても大きな意味を持つ。 ちゃんと更新されている記事であれば、たとえ公開日が古かろうと問題ない。 ということで、このブログにも更新日を付与することにした。 HogoのテーマであるPagermodのカスタマイズ 当然、サブモジュールとしてインストールしたファイルをカスタマイズすると、本家の更新時に上書きされる。 これはみんな大好きwordpressと同様。 wordpressで子テーマを作るのと同様に、Hugoではサイト名\layouts\partials\というフォルダを用意して、そこにカスタマイズしたいファイルを持ってくる。 更新日を付与する 今回であれば、post_meta.htmlに投稿日の記述等があったので、このファイルをカスタマイズする。 そのため\layouts\partials\post_meta.htmlを作成し、 {{- if not .Date.IsZero -}} {{- $scratch.Add "meta" (slice (printf "<span title="%s" >%s</span >" (.Date) (.Date | time.Format (default "January 2, 2006" site.Params.DateFormat)))) }} {{- end }} という元記述を {{- if not .Date.IsZero -}} {{- $scratch.Add "meta" (slice "投稿日" (.Date.Format (default "2006-01-02" .Site.Params.DateFormat)) "更新日" (.Lastmod.Format (default "2006-01-02"))) }} {{- end }} に変更した。ついでに日本語にした。 最後にhugo.yamlにenableGitInfo: trueを付与する。 この設定はbuild時に読み込まれるので、ローカルで開発している場合は一度サーバーを止め、再度buildしなおせば更新日が付与されていることが確認できる。 実際に付与されている例 ↓ nextjsで開発中にモックサーバーを立ち上げたいのでnext-swagger-docと@stoplight/prism-cliを比較してみた

WordPressから記事をHugoに大体移植したで書いた通り、旧ブロブのアナリティクスをみると想像以上にアクセスがきていたので、このブログにリダイレクトするようにした。 そのうえで、このブログでもPVを確認できるよう、GA4を導入した。 まずはhugo.yamlに下記を追加する。 services: googleAnalytics: id: G-********** 次に/layouts/_internal/google_analytics.htmlを作成してテンプレートを追加する。 {{- with site.Config.Services.GoogleAnalytics.ID }} {{- if hugo.IsProduction }} {{- $ga4 := resources.GetRemote "https://cdn.jsdelivr.net/npm/@minimal-analytics/ga4/dist/index.js" }} {{- $track := resources.Get "js/track.js" }} {{- $opts := dict "params" (dict "trackingId" . ) }} {{- $track = $track | js.Build $opts -}} {{- $stats := slice $track $ga4 | resources.Concat "js/analytics.js" | minify | fingerprint }} <script src="{{ $stats.RelPermalink }}" integrity="{{ $stats.Data.Integrity }}" ></script> {{- end }} {{- end -}} 最後にassets/js/track....

意外と見られていた旧ブログ ブログをHugoにリニューアルし、WordPressの方はずっと放置していた。 先日ふっと思い立ちこのブログにもアナリティクスを導入した。その時ちらっと見たWordPressのアナリティクスの数字は自分の想像を遥かに絶するものだった。 さすがにこれはもったいないと、お引越しをすることにした。 幸いWordPressブログなのだが、記事はGitで管理していた（使わなかった…）。 これ幸い、引っ越しを始める。 記事一覧の取得 まずは記事一覧の取得を行っていく。 WordPressの拡張機能であるExport All URLsを使い、URLを出力した。 Post ID Title URL Categories Tags Published Date 42 GithubActionを使用してエックスサーバーにデプロイする https://media.nove-web.com/42/ Github Github, Github Action, Wordpress, エックスサーバー, 効率化 2021/11/28 16:24 こんな感じの一覧が出力された。 次に出力したタイトルをパスパラメータ―に変換していく。 これが本当にしんどいけど、Chat GPTが全部やってくれました。 記事ファイルをxmlに変換する WordPressの管理画面からxml形式にエクスポートをする。 エクスポートしたファイルをxml-to-markdownというフォルダに格納し、npx wordpress-export-to-markdownを実行する。 ? Path to WordPress export file? name.WordPress.2024-06-07.xml ? Path to output folder? output ? Create year folders? No ? Create month folders? No ? Create a folder for each post? No ?...

Hugoでこのブログを立ち上げたので、HugoのインストールからGithub Pageで公開するまで。 環境 windws11 Hugo そもそもHugoのことをよく知らずに技術選定をしてしまったので、ここでしっかり調べておくことにする。 HugoはGoで記述された静的サイトジェネレータで 「ウェブサイトを構築するための世界最速のフレームワーク」 らしい。 The world’s fastest framework for building websites | Hugo 静的サイトジェネレータ 静的サイトジェネレーターとは、生（未加工）データとテンプレート群を基に、完全に静的なHTML Webサイトを生成するツールのことです。静的サイトジェネレーターは、基本的に個々のHTMLページをコーディングする作業を自動化し、それらのページをユーザーがすぐに使えるようにします。これらのHTMLページは事前作成されたものであるため、ユーザーはブラウザで即座に読み込むことができます。 静的サイトジェネレーターとは？ 上記の通り、事前にHTMLを生成するのでパフォーマンスがいいのがメリットのひとつ。 Hugoのインストール 公式サイトに詳しい。 WindowsなのでWindowsのインストール方法通りに行った。 パッケージ管理システムのChocolatey、ScoopとWingetを使うインストール方法が提供されていた。他にも2つインストール方法が記載されている。比較表があるのでわかりやすい。 パッケージ管理システム ちなみにパッケージ管理システムとは、 コンピュータのプログラムを一貫した方法でインストールやアンインストール、ライブラリなどの依存関係を解決する流れをツールによって管理を自動化するシステム のこと。 npmとかComposerとかも言語のパッケージ管理ツールにあたる。 Chocolateyが有名っぽいけど、インストール方法がぱっと見わからなかったので、Scoopを使用することにした。 調べるとMacではHomebrew一択っぽい。Windowsではwingetが公式っぽく、インストールも必要なく使えて便利そうだった。 インストール情報をエクスポートすることもできるので、パソコンの買い替え時とかにも重宝できそうだった。 Windowsのパッケージマネージャー「winget」を使ってみた 今思えばwingetにすれば良かったと思うけど、Scoopを選択したので、それで進めていく。 Scoopでインストールする scoop install hugo-extended 上記コマンドを使用すれば、hugoの拡張版をインストールすることができる。 'hugo-extended' (0.122.0) was installed successfully! Hugoでサイトを構築する Hugoでサイトを構築するのは簡単で、下記コマンドを叩くだけでいい。 hugo new site site-name 上記を実行した後に、 hugo -D serve で、サイトを確認することができる。 テーマを選んで適応する Hugoは沢山のテーマが提供されている。Wordpressに通ずるものがある。 Hugo Themes 今回は一番上にあったPaperModを採用することにした。 hugo-PaperMod テーマを導入する git submodule add https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod サブモジュールって？ 外部の git リポジトリを、自分の git リポジトリのサブディレクトリとして登録し、特定の commit を参照する仕組み...