Hugo

今のHugoのテーマから、記事の検索機能などもあるいい感じのテンプレートに乗り換えたいなーと思った際の備忘録です。 何個かのテーマをインストールして実際に起動して確認してます。 hugoplateを導入する デモを見る限り、リッチなUIや記事の検索機能などがあり結構いいなと思ったのがこのテーマです。 Hugoplate | Hugo Themes git submoduleを使用してテーマを追加します。 hugoプロジェクトのthemesディレクトリで以下のコマンドを実行します。 git submodule add https://github.com/zeon-studio/hugoplate.git config.tomlを変更します。 theme = "hugoplate" この状態で一旦ローカルから起動してみます。 hugo serve -D しかしエラーが出てしまいました。。 render of "page" failed: execute of template failed: template: _default/single.html:8:7: executing "_default/single.html" at <partial "essentials/head.html" .>: error calling partial: "/home/username/Project/personal/hugo-blog/themes/hugoplate/layouts/partials/essentials/head.html:13:3": execute of template failed: template: partials/essentials/head.html:13:3: executing "partials/essentials/head.html" at <partialCached "favicon" .>: error calling partialCached: partial "favicon" not found render of "page" failed: execute of template failed: template: _default/single.html:8:7: executing "_default/single.html" at <partial "essentials/head.html" .>: error calling partial: "/home/username/Project/personal/hugo-blog/themes/hugoplate/layouts/partials/essentials/head.html:13:3": execute of template failed: template: partials/essentials/head.html:13:3: executing "partials/essentials/head.html" at <partialCached "favicon" .>: error calling partialCached: partial "favicon" not found render of "page" failed: execute of template failed: template: _default/single.html:8:7: executing "_default/single.html" at <partial "essentials/head.html" .>: error calling partial: "/home/username/Project/personal/hugo-blog/themes/hugoplate/layouts/partials/essentials/head.html:13:3": execute of template failed: template: partials/essentials/head.html:13:3: executing "partials/essentials/head.html" at <partialCached "favicon" .>: error calling partialCached: partial "favicon" not found render of "page" failed: execute of template failed: template: _default/single.html:8:7: executing "_default/single.html" at <partial "essentials/head.html" .>: error calling partial: "/home/username/Project/personal/hugo-blog/themes/hugoplate/layouts/partials/essentials/head.html:13:3": execute of template failed: template: partials/essentials/head.html:13:3: executing "partials/essentials/head.html" at <partialCached "favicon" .>: error calling partialCached: partial "favicon" not found Rebuild failed: Failed to render pages: render of "page" failed: execute of template failed: template: _default/single.html:8:7: executing "_default/single.html" at <partial "essentials/head.html" .>: error calling partial: "/home/username/Project/personal/hugo-blog/themes/hugoplate/layouts/partials/essentials/head.html:13:3": execute of template failed: template: partials/essentials/head.html:13:3: executing "partials/essentials/head.html" at <partialCached "favicon" .>: error calling partialCached: partial "favicon" not found hugo v0.92.2+extended linux/amd64 BuildDate=2023-01-31T11:11:57Z VendorInfo=ubuntu:0.92.2-1ubuntu0.1 Reload Page なんかファビコンが足りないっぽい？ ...

一部の記事がかなりの分量になってしまい、目次が設定したかったので設定したときの備忘録。 どうやるか まず、目次に関するテンプレートは公式で既に用意されていました。 TableOfContents | Hugo なるほど、{{ .TableOfContents }}で参照すればいいみたいです。 なので、めちゃくちゃシンプルに目次を表示したいだけだった僕は以下のようなショートコードを実装しました。 {{ .TableOfContents }} この実装をtoc.htmlとして保存し、マークダウンからショートコードで参照してみましたが、hugo serveするとエラーが発生しました。 Rebuild failed: executing "shortcodes/toc.html" at <.TableOfContents>: can't evaluate field TableOfContents in type *hugolib.ShortcodeWithPage 調べてみたら、どうやらショートコードからは{{ .Page.TableOfContents }}と参照するのが正しい模様。 Hugoでドキュメント作るときに手っ取り早く痒いところに手が届くようになるTips #Hugo - Qiita 修正したら使用できるようになりました。 .Pageをつけなければいけない理由がいまいちよくわからないまま終わってしまったので、もし分かる人がいればコメントお願いします。。

このブログはhugoを使って作成しています。 Hugoの何がいいかと言われれば、一番は静的なので軽いってところです。 ReactやVueでちょっとSPA作ろうとすると、すぐもっさりした動作になっちゃう＆コンポーネント管理が大変なので、僕にはHugoが結構刺さっています。 （まぁコンポーネント管理に関してはアトミックデザインで作ろうとした僕の自業自得なんですが。。） Hugoをいろいろいじりつつ、最近の記事でも早速Hugoを活用してSEO対策などを行っていました。 その中で、ShortCodeという機能がプログラマーの僕としてはワクワクが止まらない機能だったので、ちょっと作りたいものもあったのでついでに使いつつここで紹介します。 ShortCodeとは markdownファイルから、関数などを組み込んだテンプレートHTMLを呼び出せる機能です。 デフォルトでは以下のようなshortcodeが用意されています。（詳細はこちら） figure gist highlight param ref (relref) instagram tweet vimeo youtube youtubeを表示したい場合、shortcodeを使って動画のIDを引数として渡してあげれば簡単に実装できます。 {{< youtube w7Ft2ymGmfc >}} これ以外にも自分でshortcodeを作成して、組み込むことも可能です。 shortcodeで使われる構文はGo Templateというみたいです。 参考： Go Template、最高のプログラミング言語 #go-template - Qiita URLからタイトルを取得したaタグを生成するshortcode では本題です。 （前提として、Hugoのサイトはすでに用意してあるものとします。） まずはshortcodeの実装のためのディレクトリとHTMLファイルを準備します。 mkdir layouts/shortcodes touch layouts/shortcodes/url_title.html ファイルの準備ができたら、以下のようなコードを実装します。 resources.GetRemoteを使用してリンク先のコンテンツを取得し、titleタグと組み合わせてaタグを生成するshortcodeです。 早速使ってみましょう。 {{< url_title url=“https://gohugo.io/hugo-pipes/introduction/#get-resource-with-resourcesget-and-resourcesgetremote" >}} ...

当ブログにもGoogleAnalyticsを仕込んでみたんですが、その際に「設定したのに反映されていない！なんで！？」みたいなことがあったので。 公式に参考ページがあったので、これをもとにGoogleAnalyticsを仕込んでみました。 Privacy | Hugo ただ、設定したうえでこのブログにアクセスしてみても、閲覧数がカウントされませんでした。 まじかーと思っていろいろ調べてみたんですが、ふとブラウザのDevToolから開いてみると… GoogleAnalyticsのコードが別のものに差し替わっている 謎の「uBlock Origin」というブラウザ拡張機能が実装したコードになっています。 更に調べていくと、私の使用しているブラウザが関係していることがわかりました。 使用しているブラウザがBraveなのですが、デフォルトでコードを置き換えるようになっていたようです。 サイト機能に影響を与えずトラッキングコードを置換 | Brave 試しにFireFoxでアクセスしたら、ちゃんとユーザー数が反映されるようになりました。 GoogleAnalyticsから見たユーザー数 ブラウザのセキュリティが高いがゆえに起きた事象ですが、勉強になりました。 参考 Brave connects to googletagmanager.com · Issue #14027 · brave/brave-browser · GitHub このブログでは、GoogleAnalyticsに自分のアクセスを反映させない方法として紹介されています。なるほど。。 Googleアナリティクスで自分のアクセスを除外する方法 | sinpe-Blog

SEO対策として、一応このブログにもパーマリンクを仕込むか〜〜〜となったときの備忘録。 ただ僕はそもそもパーマリンク自体あんまり良くわかってなかったので、そこから調べました。 そもそもパーマリンクって？ SEO対策の一環として、ページに振られるURLを固有のものにすることです。 パーマリンクとは？SEOへの影響や注意点について解説 hugoの場合、デフォルト設定のままだと、タイトルとかディレクトリ構造をリファクタリングするとページURLも変わっちゃうので、せっかく検索して上位に来てもURLが変わっちゃったら全部台無しになっちゃいます。 それを防ぐためのパーマリンクです。 Hugoでパーマリンクは設定できる？ 結論から言えば、公式でパーマリンクを生成する方法はありません。 前述の通り、Hugoが生成するページリンクは記事タイトルやディレクトリ構成に影響するため、後にタイトルを変えるといったケースがある場合にはそれに対応できません。 逆に言えば、そういった変更を今後一切行わないのであれば別にデフォルト設定のままでも十分ということになります。 なので、ここではhugoのテンプレート構文を利用してIDを生成する関数を実装します。 単純にランダムに英数字を並べかるだけでは味気ないので、せっかくなので現在時刻を元にしたmd5ハッシュを使ってID生成します。 archetypes/default.mdを開いて、以下のような実装を追記します。 --- title: "{{ replace .Name "-" " " }}" slug: "{{ template "permanentId" }}" date: {{ .Date }} draft: true --- {{ define "permanentId" -}} {{ md5 now.Unix }} {{- end -}} ハッシュ値はslugに設定しました。 次に、config.tomlからブログのパスにslugを参照するように設定します。 [permalinks] posts = "/:slug/" （postsの部分はcontentの名前によって変えてください） これであとはhugo newで記事を作ると、slugにハッシュ値が設定されるようになり、結果としてURLが時刻を元にしたmd5ハッシュ値になっています。 感想 Hugoおもしろい 参考 Hugoのテンプレート構文「template」「partial」「block」「define」のわかりやすい解説 Hugo でサイト構造を変えてもページの URL が変わらないようにする (Permalink) Hugo テンプレート内で define による部分テンプレート定義を行う（関数もどき） Hugo の URL をカスタマイズする