投稿一覧

はじめに GitHubPagesの利点は、いくつか制限があるものの以下のメリットがあります。 TLS対応（Let’s Encrypt) 独自ドメイン対応 無料 GoogleDomainでは１４００円のドメインを使用しています。 このドメインにサブドメインを追加することで、複数ドメインを追加料金なく使用しています。 なので、私はいくつかブログを運用していますが、年間合計１４００円しかかかっていません。 しかも、GitHubのActionsなど優秀な機能の恩恵を請けられるので、メンテナンスコストが非常に少なくなります。 GoogleDomainでドメイン取得 サブドメインを追加する方法を説明します。 GoogleDomainの管理画面から マイドメイン > 自分のドメイン > DNS > カスタムレコードを管理 すると、ドメインの設定をカスタマイズできるようになります。 新しいレコードを追加 し、以下のように入力します。 ホスト名： サブドメインにしたい文字列（別名とするサブドメインの指定） タイプ： CNAME（データで指定したホストに対して、別名を登録する方式） TTL：3600（1時間の有効期限） データ：XXXXXXX.github.io. （自身のGitHubのホスト） GitHubActionsを使ってHugoをビルドする ActionsのWorkflowに以下を登録します。 name: gh-pages on: push: branches: - master workflow_dispatch: jobs: build: runs-on: ubuntu-20.04 steps: - name: Checkout uses: actions/checkout@v2 with: submodules: true - name: Setup Hugo uses: peaceiris/actions-hugo@v2 with: hugo-version: '0.85.0' extended: true - name: Hugo build run: hugo --minify - name: Deploy uses: peaceiris/actions-gh-pages@v3 with: github_token: ${{ secrets....

はじめに Hugoでブログを書いていて、頻出するようなHTMLを自動で簡単に出力できるようにしたいと思いました。 そこで使用できるのがShortcodeの機能です。 今回はAmazonのアフィリエイトリンクを作成するためのShortcodeを作成します。 Shortcodeの基本 Shortcodeは、事前に定義した小さな処理を呼び出すための仕組みです。 ここでは書き方を整理します。 /layouts/shortcodes/以下にSHORTCODE.htmlをファイルを作成すると SHORTCODEがショートコード名になる Shortcodeを呼び出す場合は {{< ショートコード名 "値" >}} {{< ショートコード名 パラメータ名="値" >}} パラメータを取り出す場合は {{ .Get 0 }}（0はパラメータのインデックス） {{ .Get パラメータ名 }} 間に文字を挟み込める {{< highlight go >}} A bunch of code here {{< /highlight >}} 挟み込んだ文字を取り出す場合は {{ .Inner }} 挟み込んだ文字は書き方によって処理のされ方が異なる {{< >}} -> HTML {{% %}} -> Markdown Built-inショートコードが存在する。 Figure Youtube Tweet Instagram etc. ShortcodeのサンプルをMarkdownで表示したい場合は {{</* shortcode */>}} Amazonのショートコードを作成 サンプルにAmazonのアフィリエイトリンク用のショートコードを作成します。...

はじめに Hugoでページのデータを取得する方法をまとめました。 取得方法 サイト内の全記事数 {{ len .Site.RegularPages }} サイト内の全ページ数 {{ len .Site.Pages }} ホームページから下層のページ、そして、カテゴリやタグページも含まれる。 現在の階層の記事数 {{ len .RegularPages }} 現在の階層のページ数 {{ len .Pages }} ページにはセクションページも含まれる。 現在の階層以下の全ての記事数 {{ len .RegularPagesRecursive }} ただし、listページでのみ使用できる。 現在の階層のセクション数を取得 {{ len .Sections }} サイト内の全カテゴリ数 {{ len .Site.Taxonomies.categories }} サイト内の全タグ数 {{ len .Site.Taxonomies.tags }} ...

はじめに 私はHugoでテーマを作成していますが、よく探さないと記載されていなかったり、あやふやなまま使っていた書き方がありました。 そこでそれらをまとめてみました。 Hugoのテンプレートのハイフンの有無 以下のように、{{}}内に-を書いていたり、いなかったりするテーマを見かけます。 <div> {{- .Title -}} </div> この出力結果は以下です。 <div>Hello, World!</div> <div> {{ .Title }} </div> このようにハイフンがない場合は以下のようになります。 <div> Hello, World! </div> なので、前後のwhitespaceが消えます。 Whitespace 参考 Introduction to Hugo Templating ...

はじめに 404ステータスとは、ページが見つからない場合に返すステータスのことです。 Hugoでは存在しないページ用のHTMLも独自定義できます。 作成方法 /layouts/404.htmlにページを作成します。 {{ define "main"}} <main id="main"> <div> <h1 id="title"><a href="{{ "/" | relURL }}">Go Home</a></h1> </div> </main> {{ end }} 動作確認 http://localhost:1313/404.html にアクセスして確認します。 ローカルでの確認の注意点として、ローカルは上記のリンクを直接開く必要があります。 GitHubPagesなどのサービスを利用している場合は、存在しないURLにアクセスされた場合は、404.htmlにリダイレクトしてくれます。 参考 Custom 404 Page ...

はじめに ページ毎の変数は、 フロントマター で定義されるか、コンテンツのファイルの場所から生成されるか、コンテンツ本体から生成されます。 この記事では、ページレベル変数のリストの一部をまとめました。 ページ変数 多くの変数は、 フロントマター で定義されている変数です。 その中の一部を説明します。 .Kind: page、home、section、taxonomy、term、RSS、sitemap、robotsTXT、404などページの種類 .LinkTitle: ページのリンクを設定。設定されていれば、titleより優先的に使用される .Next: 次のregular page .Prev: 前のregular page .Site: Site Variables .Type: Content Types タイプが未設定ならcontent/<TYPE>のフォルダ名がタイプになる .Pages変数 regular pageはpostページかcontentページです。 一方、list pageはregular pageか他のlist pageを一覧化します。 （例: homepage、section page、taxonomy term page、taxonomypage） 記事をツリー状にした場合、末端がregular page、幹がlist pageです。 .Site.Pages: サイト内の全ページ。セクションやtaxonomyページも含む .Site.RegularPages: サイト内の全通常ページ 以下の変数は、現在のスコープだけを返します。 .Pages: 現在のページのスコープのregular pageとセクションページ。.Data.Pagesのエイリアスです。(第一階層のみ) .RegularPages: 現在のページのスコープのregular page。入れ子になっているものは除く .RegularPagesRecursive: 現在のページ以下の全てのregular page。入れ子になっているものを含む regular pageから.Pagesや.RegularPagesを使用しても、空が返ります。 セクション変数と関数 .Parent: ページのセクションや、セクションの親セクション .Section: 現在の記事が属するセクション ....

はじめに Hugoで記事を書く際に、各投稿の先頭に投稿の情報を記載できます。 この情報のことをフロントマター（FrontMatter）と言います。 フォーマット フロントマターはどんな記号で囲まれているかで、フォーマットの指定ができます。 TOML: +++ YAML: --- JSON: {} 中身はkeyvalueのペアで指定できます。 TOMLの場合はdate = "2021-07-11"のように=で繋ぎます。 定義済み変数 フロントマターには定義済み変数と独自定義変数が存在します。 定義済み変数の一部は以下のようになっています。 date: 投稿日付 description: コンテンツの説明 draft: trueなら下書き段階 images: 対象のページに関連する画像のパス配列。_internal/twitter_cards.htmlなどで使用される keywords: メタキーワード lastmod: 最終更新日付 linkTitle: コンテンツのリンク生成時に使用されるURL。Hugoはtitleの前にlinkTitleを使用する series: ページが属するシリーズ名 slug: 出力URLの末尾に表示される weight: 順番を並べ替える際に、小さいほど優先される 独自定義変数 include_toc = true このように定義した場合、.Params.include_tocで使用できます。 参考 Front Matter ...