Hugoを使用して非常に高速な静的サイトを構築する方法

公開: 2021-10-26

Hugoは、Go（別名Golang）で記述された静的サイトジェネレーター（SSG）であり、バックエンドアプリケーションやサービスの開発によく使用される高性能のコンパイル型プログラミング言語です。

現在、HugoはほとんどのWebサイトを数秒で生成できます（1ページあたり1ミリ秒未満）。それが、Hugoが「ウェブサイトを構築するための世界最速のフレームワーク」と自称する理由を説明しています。

この記事では、Hugoの歴史、それを非常に高速にする理由、および独自のHugo静的サイトの構築を開始する方法について説明します。

ヒューゴとは？そして、なぜそれは人気がありますか？

Hugoのホームページのスクリーンショット。 — ヒューゴのウェブサイトのホームページ。

Steve Franciaは2013年にHugo静的サイトジェネレーターを最初に開発し、Bjrn Erik Pedersenが2015年にプロジェクトのリード開発者を引き継ぎました。Hugoはオープンソースプロジェクトです。つまり、コードは誰でも表示および改善できます。

静的サイトジェネレーターとして、HugoはMarkdownコンテンツファイルを取得し、テーマテンプレートを介して実行し、オンラインで簡単に展開できるHTMLファイルを吐き出します。これらすべてを非常に迅速に実行します。

2021年には、数百とは言わないまでも数十の静的発電機があります。すべての静的サイトジェネレータには魅力があります。 JekyllはRuby開発者の間で人気があり、他のオプションほど高速ではありませんが、広く採用された最初の静的サイトジェネレーターの1つでした。 Gatsbyは、機能が動的な静的に展開可能なサイトの開発に最適なもう1つの人気のあるSSGです。

では、SSGが非常に多い中で、Hugoを際立たせるものは何でしょうか。

Hugoは「ウェブサイトを構築するための世界最速のフレームワーク」と自称しています️したがって、静的サイトをすばやく構築する方法を探している場合は、ここから始めてください️ クリックしてツイート

ヒューゴは速い

生のパフォーマンスの点では、Hugoは世界で最高の静的サイトジェネレーターです。 Jekyllと比較して、HugoはForestryによって35倍高速であることが示されました。同様に、Hugoは10,000ページのサイトを10秒でレンダリングできます。これは、Gatsbyが完了するのに30分以上かかるタスクです。 Hugoはビルド時間の点で最速のSSGであるだけでなく、インストールも迅速です。

Hugoは、Jekyll、Gatsby、およびパッケージマネージャーとの依存関係のインストールを必要とするその他のSSGとは異なり、自己完結型の実行可能ファイルとして出荷されます。つまり、ソフトウェアの依存関係を気にすることなく、Hugoをすぐにダウンロードして使用できます。

Hugoではテンプレート作成が簡単

SSGの用語では、「テンプレート」とは、HTMLページ内に動的コンテンツを挿入するためのプレースホルダーを追加するプロセスを指します。ページのタイトルにアクセスするには、 {{ .Title }}変数を使用できます。したがって、Hugo HTMLテンプレート内では、 {{ .Title }}が次のようにH1タグでラップされているのが一般的です。

 <h1>{{ .Title }}</h1>

ビルド時に、Hugoはコンテンツファイル内のタイトルを自動的に取得し、2つの<h1>タグの間にタイトルを挿入します。 Hugoにはさまざまな組み込みのテンプレート変数があり、ビルド時にデータを処理するカスタム関数を作成することもできます。テンプレート作成には、HugoはGoの組み込みのhtml/templateおよびtext/templateライブラリを使用します。これにより、Hugoはテンプレート作成のためにサードパーティのライブラリをインストールする必要がないため、アプリケーションの肥大化を減らすことができます。

これは、人気のあるAnankeテーマのindex.htmlホームページテンプレートの例です。ご覧のとおり、標準のHTMLファイルにいくつかの追加のテンプレートコードが含まれています。

 TBD: GRAB CODE FROM HERE: https://github.com/theNewDynamic/gohugo-theme-ananke

Hugoのインストール方法

Hugoはコンパイル済みの実行可能ファイルとして出荷されます。つまり、開始するためだけに多くの依存関係をダウンロードして管理する必要はありません。 macOS、Windows、Linuxで利用できます。

MacOSとLinuxにHugoをインストールする方法

macOSおよびLinuxに推奨されるインストール方法には、アプリケーションのインストールと更新のためのパッケージマネージャーであるHomebrewが必要です。 Homebrewをまだインストールしていない場合は、ターミナルで以下のコマンドを実行してインストールできます。

 /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Homebrewがインストールされたら、以下のコマンドを実行してHugoをインストールします。

 brew install hugo

WindowsにHugoをインストールする方法

Windowsユーザーの場合、HugoはChocolateyまたはScoopパッケージマネージャーのいずれかを使用してインストールできます。 ChocolateyとScoopのインストール手順は、Homebrewよりも少し複雑なので、こことここの公式ドキュメントページを参照することをお勧めします。

ChocolateyまたはScoopのいずれかをインストールした後、次のコマンドのいずれかを使用してHugoをインストールできます（パッケージマネージャーによって異なります）。

 choco install hugo-extended -confirm

 scoop install hugo-extended

Hugoが正しくインストールされていることを確認する方法

Hugoが正しくインストールされていることを確認するには、次のコマンドを実行します。

 hugo version

このターミナルコマンドは、現在インストールされているバージョンのHugoに関する情報を次のように出力する必要があります。

 hugo v0.85.0+extended darwin/arm64 BuildDate=unknown

Hugoコマンドと構成

Hugoを使用して静的サイトを作成する前に、さまざまなCLIコマンドと構成ファイルのパラメーターについて理解しましょう。

HugoCLIコマンド

hugo check –さまざまな検証チェックを実行します
hugo configサイトの構成を表示します
hugo convert –コンテンツをさまざまな形式に変換します
hugo deploy –サイトをクラウドプロバイダーにデプロイします
hugo envのバージョンと環境情報を表示します
hugo gen –さまざまなジェネレーターへのアクセスを提供します
hugo help –コマンドに関する情報を表示します
hugo import –別の場所からサイトをインポートできます
hugo list –さまざまなコンテンツタイプのリストを表示します
hugo mod –さまざまなモジュールヘルパーへのアクセスを提供します
hugo new –サイトの新しいコンテンツを作成できます
hugo server –ローカル開発サーバーを起動します
hugo version –現在のHugoバージョンを表示します

Hugo CLIには、一部のコマンドの追加オプションを指定するためのさまざまなフラグもあります。 Hugoフラグの完全なリストを表示するには（多くのフラグがあります）、 hugo helpコマンドを使用して使用可能なすべてのフラグのリストを表示することをお勧めします。

Hugo構成ファイル

Hugoの構成ファイルは、YAML、TOML、JSONの3つの形式をサポートしています。同様に、Hugo構成ファイルはconfig.yml 、 config.toml 、またはconfig.jsonであり、Hugoプロジェクトのルートディレクトリにあります。

YAML形式の典型的なHugo構成ファイルは次のようになります。

 DefaultContentLanguage: en theme: - kinsta-static-site contentdir: content layoutdir: layouts publishdir: public paginate: 5 title: Kinsta Static Site description: "This is a static site generated with Hugo!" permalinks: post: :slug/ page: :slug/ tags: "tag/:slug/" author: "author/:slug/"

以前にWordPressまたは別のCMSを使用したことがある場合は、構成オプションの一部が見覚えがあるかもしれません。たとえば、 kinsta-static-siteはサイトのテーマの名前、 Kinsta Static SiteはSEOメタタイトル、 paginate （ページあたりの投稿数）は5です。

Hugoには数十の構成オプションがあり、そのすべてを公式のHugoドキュメントで調べることができます。 Hugoサイトの開発中にグローバル構成を変更する必要がある場合は、この構成ファイルを編集する必要がある可能性があります。

Hugoサイトを作成する方法

Hugo CLIのインストール方法と使用方法、およびHugo構成ファイルの基本について説明したので、新しいHugoサイトを作成しましょう。

Hugoサイトを作成するには、以下のコマンドを使用します（必要に応じて、my-hugo-siteを別のサイトに変更してください）。

 hugo new site my-hugo-site

次に、サイトフォルダーに移動すると、次のファイルとフォルダーが表示されます： config.tomlファイル、 archetypesフォルダー、コンテンツフォルダー、 layoutsフォルダー、 themesフォルダー、 dataフォルダー、およびstaticフォルダー。これらのファイルとフォルダのそれぞれが何であるかを簡単に見てみましょう。

Hugoのconfig.tomlファイル

上で強調したように、Hugoのプライマリ構成ファイルにはサイトのグローバル設定が含まれています。

ヒューゴのアーキタイプフォルダ

archetypesフォルダーは、Markdownでフォーマットされたコンテンツテンプレートを保存する場所です。アーキタイプは、サイトに複数のコンテンツ形式がある場合に特に役立ちます。 Hugoアーキタイプを使用すると、サイトのコンテンツタイプごとにテンプレートを作成できます。これにより、生成されたMarkdownファイルに必要なすべての構成設定を事前に入力できます。

たとえば、ポッドキャストエピソードを表示するためのポッドキャストコンテンツタイプがある場合は、以下のコンテンツを使用して、 archetypes/podcast.mdに新しいアーキタイプを作成できます。

 --- title: "{{ replace .Name "-" " " | title }}" date: {{ .Date }} description: "" season: episode: draft: true ---

このポッドキャストアーキタイプを使用すると、次のコマンドを使用して新しい投稿を作成できます。

 hugo new podcast/s1e6_interview-with-kinsta-ceo.md

ここで、新しく作成した投稿を開くと、次のように表示されます。

 --- title: "Interview with Kinsta CEO" date: 2021-05-20T13:00:00+09:00 description: "" Season: 1 episode: 6 draft: true ---

アーキタイプがないと、作成する新しい投稿ごとにフロントマターパラメーターを手動で指定する必要があります。アーキタイプは最初は複雑で不必要に見えるかもしれませんが、長期的には多くの時間を節約することができます。

ヒューゴのコンテンツフォルダ

コンテンツフォルダは、実際の投稿コンテンツが入る場所です。 HugoはMarkdown形式とHTML形式の両方をサポートしており、使いやすさからMarkdownがより一般的なオプションです。投稿の一般的なストレージスペースであることに加えて、コンテンツフォルダを使用して投稿コンテンツをさらに整理することができます。

Hugoは、コンテンツフォルダ内の各最上位ディレクトリをコンテンツセクションとして扱います。 Hugoのコンテンツセクションは、WordPressのカスタム投稿タイプに似ています。たとえば、サイトに投稿、ページ、ポッドキャストがある場合、コンテンツフォルダには、これらのさまざまな投稿タイプのコンテンツファイルが存在する投稿、ページ、ポッドキャストディレクトリがあります。

ヒューゴのレイアウトフォルダ

レイアウトフォルダには、サイトの構造を定義するHTMLファイルが含まれています。場合によっては、プロジェクトのルートディレクトリにある必要はなく、代わりにテーマフォルダ内に存在できるため、 layoutsフォルダのないHugoサイトが表示されることがあります。

テンプレート作成にPHPを使用するWordPressテーマと同様に、HugoテンプレートはベースHTMLと、Golangの組み込みhtml/templateおよびtext/templateライブラリを利用した追加の動的テンプレート作成で構成されています。サイトのHTMLマークアップを生成するために必要なさまざまなHTMLテンプレートファイルは、 layoutsフォルダーにあります。

ヒューゴのテーマフォルダ

テンプレートファイルとアセットを保存するためのより自己完結型の方法を好むサイトの場合、Hugoはテーマフォルダーをサポートします。 Hugoテーマは、テーマディレクトリに保存され、テーマが機能するために必要なすべてのテンプレートが含まれているという点で、WordPressテーマに似ています。

一部のHugoユーザーは、テーマ関連のファイルをプロジェクトのルートディレクトリに保持することを好みますが、これらのファイルをthemesフォルダーに保存すると、管理と共有が容易になります。

Hugoデータフォルダ

Hugoのデータフォルダーには、サイトのページを生成するために必要な補足データ（JSON、YAML、またはTOML形式）を保存できます。データファイルは、コンテンツまたはテンプレートファイルに直接保存するのが面倒な大規模なデータセットに役立ちます。

たとえば、1960年から2020年までの米ドルのインフレ率のリストを作成する場合、データを表すのに約80行かかります（各年に1行）。このデータをコンテンツまたはテンプレートファイルに直接配置する代わりに、データフォルダーに作成して、必要な情報を入力することができます。

Hugo静的フォルダー

Hugoの静的フォルダーは、追加の処理を必要としない静的アセットを保存する場所です。静的フォルダは通常、Hugoユーザーが画像、フォント、DNS検証ファイルなどを保存する場所です。 Hugoサイトが生成され、簡単に展開できるようにフォルダーに保存されると、静的フォルダー内のすべてのファイルがそのままコピーされます。

JavaScriptまたはCSSファイルについて言及しなかった理由がわからない場合は、サイト開発中にパイプラインを介して動的に処理されることが多いためです。 Hugoでは、JavaScriptファイルとCSSファイルは、追加の処理が必要なため、通常、テーマフォルダー内に保存されます。

Hugoサイトにテーマを追加する方法

既成のテーマをダウンロードしてインストールすることは、Hugoを使い始めるのに最適な方法です。 Hugoテーマにはさまざまな形とサイズがあり、それらの多くは公式のHugoテーマリポジトリから無料で入手できます。先に進んで、人気のあるHydeテーマをHugoサイトにインストールしましょう。

まず、ターミナルでプロジェクトのテーマフォルダに移動します。

 cd <hugo-project-directory>/themes/

次に、Gitを使用して、Hydeテーマをプロジェクトのthemesディレクトリに複製します。

 git clone https://github.com/spf13/hyde.git

次に、 config.tomlファイルに次の行を追加して、Hydeテーマをアクティブにします。

 theme = "hyde"

この時点で、Hydeテーマがインストールおよび構成されています。次のステップは、Hugoの組み込み開発Webサーバーを起動して、Webブラウザーでサイトを表示することです。

Hugoサイトをプレビューする方法

Hugoには、開発用の統合Webサーバーが付属しています。つまり、サイトをローカルで表示するためだけにNginxやApacheなどのサードパーティのWebサーバーをインストールする必要はありません。

HugoのWebサーバーを起動するには、プロジェクトのルートディレクトリで以下のコマンドを実行します。

 hugo server -D

その後、Hugoはサイトのページを作成し、 http://localhost:1313/で利用できるようにします：

WebブラウザでURLにアクセスすると、HydeテーマのHugoサイトが表示されます。

デフォルトでは、Hugoのローカル開発サーバーが変更を監視し、サイトを自動的に再構築します。 Hugoのビルド速度は非常に速いため、サイトの更新はほぼリアルタイムで確認できます。これは、静的サイトジェネレーターの世界ではめったに見られないことです。これを実証するために、Hugoで最初の投稿を作成しましょう。

Hugoサイトにコンテンツを追加する方法

Hugoサイトにコンテンツを追加することは、WordPressやGhostのような本格的なCMSとは大きく異なります。 Hugoには、コンテンツを管理するための組み込みのCMSレイヤーはありません。代わりに、適切と思われるものを管理および整理することが期待されます。

言い換えれば、Hugoでコンテンツ管理を行うための明示的に「正しい」方法はありません。このセクションでは、コンテンツを追加および管理する1つの方法を共有しますが、Hugoに慣れてきたら、自由に変更してください。

Hugoのコンテンツセクション

Hugoでは、自由に使える最初のコンテンツ編成ツールはコンテンツセクションです。 HugoのコンテンツセクションはWordPressの投稿タイプに似ています。コンテンツフィルターとして使用できるだけでなく、カスタムテーマを作成する際の識別子としても使用できます。

たとえば、ブログコンテンツセクションフォルダがある場合、それを使用してすべてのブログ投稿を保存し、ブログ投稿にのみ適用される特定のページテンプレートをレンダリングできます。

Hugoで投稿を追加する方法

それを念頭に置いて、ブログ投稿用のコンテンツセクションを作成し、いくつかのコンテンツを追加しましょう。プロジェクトのコンテンツフォルダにpostsという名前の新しいフォルダを作成します–これはコンテンツセクションです。

2021フォルダーを作成して、 postsフォルダー内に別の組織レイヤーを作成しましょう。この時点で、コンテンツディレクトリは次のようになります。

それでは、最初の投稿を作成しましょう。前に説明したように、HugoはコンテンツのMarkdownファイルとHTMLファイルの両方をサポートしています。一般に、Markdownファイルは書き込み、フォーマット、および読み取りが簡単であるため、これらのファイルに固執することをお勧めします。

content / posts / 2021フォルダーに、 .md （Markdownファイル拡張子）で終わる新しいファイルを作成します。ファイルには任意の名前を付けることができますが、Hugoコンテンツファイルに名前を付けるための推奨構文はYYYY-MM-DD-a-sample-post.mdです。

コンテンツファイルを手動で作成することに加えて、Hugo CLIを使用して、以下のコマンドで新しい投稿を作成することもできます（必ずプロジェクトディレクトリからコマンドを実行してください）。

 hugo new posts/2021/2021-08-30-a-sample-post.md

上記のパスからコンテンツフォルダが欠落していることに注意してください。これは、Hugoがすべてのコンテンツファイルがデフォルトでコンテンツフォルダに入ると想定しているためです。

新しく作成したコンテンツファイルを開くと、ドキュメントの上部に次のようなメタデータが数行表示されます。

 --- title: "2021 08 30 a Sample Post" date: 2021-08-30T13:44:28+09:00 draft: true ---

YAMLでフォーマットされたこのメタデータは、「フロントマター」と呼ばれます。自動生成されたフロントマターは、HugoCLIを使用することの重要な利点の1つです。前書きは、投稿の一意のデータ（投稿名、データ、ドラフトステータス、タグ、カテゴリなど）が保存される場所です。フロントマターのデフォルトのフォーマットは、アーキタイプを使用してセクションごとに構成できます。

次に、投稿にテキストを追加しましょう。投稿を書くときは、常に次のようにコンテンツが前書きの下にあることを確認してください。

コンテンツファイルを保存すると、Hugoがターミナルでサイトを再構築するのが表示されます。下のスクリーンショットでは、Hugoが22ミリ秒でサイト全体を再構築したことがわかります。

WebブラウザでHugoサイトにアクセスすると、新しい投稿が表示されます。

Hugoでページを追加する方法

Hugoサイトに投稿を追加したので、ページを追加しましょう。 WordPressを含むほとんどのコンテンツ管理システムは、投稿とページを区別します。通常、投稿は日付の付いたコンテンツですが、ページは常緑または静的なコンテンツで構成されます。

ページを作成するには、最初にページコンテンツセクションが必要です。これを行うには、Hugoのコンテンツフォルダーにpagesという名前のフォルダーを作成します。その後、以下のコマンドを使用して、サイトに新しい「バージョン情報」ページを追加します。

 hugo new pages/about.md

ページの命名規則が投稿とどのように異なるかに注意してください。投稿とは異なり、ページは特定の日付に関連付けられていないため、ファイル名に作成日を含める必要はありません。

それでは、「About」ページにテキストを追加しましょう。

この時点で、Webブラウザに[バージョン情報]ページが表示されます。

投稿とページの2つのコンテンツセクションができたので、タイトルと説明の編集、サイドバーメニューへの[バージョン情報]ページの追加、パーマリンクの形式の変更、削除など、サイトをカスタマイズする方法を見ていきましょう。投稿フィードのページ。

サイトのタイトルと説明を変更する方法

サイトのタイトルと説明を変更する正確な方法は、サイトの構成やアクティブなテーマによって異なります。 Hydeテーマの場合、サイトのタイトルと説明はHugo構成ファイル（ config.toml ）で変更できます。

サイドバーをレンダリングする次のテーマコードがあるため、これがわかります。

 <aside class="sidebar"> <div class="container sidebar-sticky"> <div class="sidebar-about"> <a href="{{ .Site.BaseURL }}"><h1>{{ .Site.Title }}</h1></a> <p class="lead"> {{ with .Site.Params.description }} {{.}} {{ else }}An elegant open source and mobile first theme for <a href="http://hugo.spf13.com">hugo</a> made by <a href="http://twitter.com/mdo">@mdo</a>. Originally made for Jekyll.{{end}} </p> </div> <nav> <ul class="sidebar-nav"> <li><a href="{{ .Site.BaseURL }}">Home</a> </li> {{ range .Site.Menus.main -}} <li><a href="{{.URL}}"> {{ .Name }} </a></li> {{- end }} </ul> </nav> <p>{{ with .Site.Params.copyright }}{{.}}{{ else }} {{ now.Format "2006"}}. All rights reserved. {{end}}</p> </div> </aside>

焦点を当てる2つの部分は次のとおりです。

 {{ .Site.Title }}

と…

 {{ with .Site.Params.description }} {{.}} {{ else }}An elegant open source and mobile first theme for <a href="http://hugo.spf13.com">hugo</a> made by <a href="http://twitter.com/mdo">@mdo</a>. Originally made for Jekyll.{{end}}

ハンドルバー{{ }}は、Hugoのテンプレートエンジンの一部であり、レンダリングされたページで動的に生成されたデータを可能にします。例として、 {{ .Site.Title }}はHugoにconfig.tomlファイルをチェックし、 Titleキーにマップされた値をフェッチするように指示します。

Hugoのデフォルト設定では、サイトタイトルとしてMy New Hugo Siteが使用されているため、サイドバーに表示されます。 config.tomlのサイトタイトルを別のタイトルに変更すると、その変更はフロントエンドにも反映されます。

先に進み、 config.tomlのtitleパラメーターをMy NewHugoSiteからKinstaのHugoSiteに変更しましょう。

サイトの説明に移ると、Hugoのテンプレートエンジンが条件付きロジックをサポートしていることがわかります。平易な英語に翻訳された以下のコードは、 config.tomlファイルのdescriptionキーにParams値が割り当てられているかどうかを確認するようにHugoに指示します。そうでない場合は、代わりに使用するデフォルトの文字列を次に示します。

 {{ with .Site.Params.description }} {{.}} {{ else }} An elegant open source and mobile first theme for <a href="http://hugo.spf13.com">hugo</a> made by <a href="http://twitter.com/mdo">@mdo</a>. Originally made for Jekyll.{{end}}

config.tomlファイルに説明が設定されていないため、Hugoはデフォルトで「@mdoによって作成されたHugoのエレガントなオープンソースでモバイルファーストのテーマ」をレンダリングします。もともとはジキルのために作られました。」

それでは、 config.tomlファイルを次の場所から更新しましょう。

 baseURL = "http://example.org/" languageCode = "en-us" title = "Kinsta's Hugo Site" theme = "hyde"

に：

 baseURL = "http://example.org/" languageCode = "en-us" title = "Kinsta's Hugo Site" theme = "hyde" [params] description = "Kinsta is a premium managed WordPress hosting company."

予想どおり、変更はフロントエンドにも表示されるようになりました。

投稿フィードからページを削除する方法

ほとんどのブログでは、ホームページの投稿フィードに投稿のみが表示されるのが一般的です。デフォルトでは、Hydeテーマには投稿フィード内のすべてのコンテンツファイルが含まれます。この動作を変更するには、ホームページを生成するindex.htmlテンプレートのrange関数を編集する必要があります。

Hugoのrange関数は、定義されたアイテムのセットを反復処理してから、データを処理します。デフォルトでは、Hydeテーマのindex.htmlテンプレートは.Site.RegularPagesの範囲であり、HTMLをレンダリングする前に、パーマリンク、投稿タイトル、投稿概要などのデータを除外します。

.Site.RegularPagesには、投稿とページの両方を含むHugoのすべての通常のページが含まれているため、「About」ページが表示されます。 rangeアイテムを.Site.RegularPages "Section" "posts"に変更することで、以前に作成した投稿フォルダー内のコンテンツファイルである投稿セクションの通常のページのみをフィルター処理するようにHugoに指示できます。

WordPressサイトに超高速で信頼性が高く、完全に安全なホスティングが必要ですか？ Kinstaは、WordPressの専門家によるこれらすべてのサポートと24時間年中無休のワールドクラスのサポートを提供します。私たちの計画をチェックしてください

これからテンプレートを編集して、今すぐ変更を加えましょう。

 {{ define "main" -}} <div class="posts"> {{- range .Site.RegularPages -}} <article class="post"> <h1 class="post-title"> <a href="{{ .Permalink }}">{{ .Title }}</a> </h1> <time datetime="{{ .Date.Format "2006-01-02T15:04:05Z0700" }}" class="post-date">{{ .Date.Format "Mon, Jan 2, 2006" }}</time> {{ .Summary }} {{ if .Truncated }} <div class="read-more-link"> <a href="{{ .RelPermalink }}">Read More…</a> </div> {{ end }} </article> {{- end }} </div> {{- end }}

これに：

 {{ define "main" -}} <div class="posts"> {{- range where .Site.RegularPages "Section" "posts" -}} <article class="post"> <h1 class="post-title"> <a href="{{ .Permalink }}">{{ .Title }}</a> </h1> <time datetime="{{ .Date.Format "2006-01-02T15:04:05Z0700" }}" class="post-date">{{ .Date.Format "Mon, Jan 2, 2006" }}</time> {{ .Summary }} {{ if .Truncated }} <div class="read-more-link"> <a href="{{ .RelPermalink }}">Read More…</a> </div> {{ end }} </article> {{- end }} </div> {{- end }}

この変更を行った後、ホームページには次のような投稿のみが表示されます。

Hugoでパーシャルを使用する方法

Hugoの最も強力なテンプレート機能の1つは、パーシャル–別のHTMLテンプレートに埋め込まれたHTMLテンプレートです。パーシャルを使用すると、各ファイルのコードを管理しなくても、さまざまなテンプレートファイル間でコードを再利用できます。

たとえば、テーマのbaseof.htmlテンプレートファイル内で呼び出される個別の部分ファイルに、さまざまなページセクション（ヘッダー、フッターなど）が表示されるのが一般的です。

Anankeテーマのbaseof.htmlファイル内で、18行目のパーシャルの例を見ることができます– {{ partial "site-style.html" . }} {{ partial "site-style.html" . }} 。

この場合、 {{ partial "site-style.html" . }} {{ partial "site-style.html" . }}は、行18の内容を/ layouts/ partialsフォルダー内のsite-style.htmlに置き換えるようにHugoに指示します。 /partials/site-style.htmlに移動すると、次のコードが表示されます。

 {{ with partialCached "func/style/GetMainCSS" "style/GetMainCSS" }} <link rel="stylesheet" href="{{ .RelPermalink }}" > {{ end }} {{ range site.Params.custom_css }} {{ with partialCached "func/style/GetResource" . . }}{{ else }} <link rel="stylesheet" href="{{ relURL (.) }}"> {{ end }} {{ end }}

このコードを別のファイルにオフロードすることで、 baseof.htmlテンプレートファイルを整理して読みやすくすることができます。パーシャルは、特に基本的なプロジェクトには必要ありませんが、より複雑な機能を備えた大規模なプロジェクトに役立ちます。

Hugoでショートコードを使用する方法

Hugoショートコードは、さまざまなページでコードを再利用できるという点でパーシャルに似ています。ショートコードは、 / layouts/shortcodesフォルダーにあるHTMLファイルです。主な違いは、パーシャルはHTMLテンプレートに適用され、ショートコードはMarkdownコンテンツページに適用されることです。

Hugoでは、ショートコードを使用すると、各ページのコード変更を管理することなく、サイト全体のページで使用できる機能のモジュールを開発できます。

ブログを運営している場合は、投稿の本文の内容を調べて、今年の参照を現在の年に更新する必要がある可能性があります。サイトに投稿されている投稿の数によっては、このタスクに時間がかかる場合があります。

コンテンツファイルでHugoショートコードを使用することで、年の参照を再度更新することを心配する必要がなくなります。

/layouts/shortcodes/current_year.htmlに以下の内容のショートコードを作成することから始めましょう。

 {{ now.Format "2006" }}

ショートコードは、次の構文で投稿に埋め込むことができます– {{< shortcode_name >}} 。この場合、次のように{{< shortcode_name >}}を使用してcurrent_year.htmlショートコードを呼び出すことができます。

 --- title: "2021 08 30 a Sample Post" date: 2021-08-30T13:44:28+09:00 draft: true --- This post was created in the year {{< current_year >}}. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur finibus, velit sit amet vulputate scelerisque, massa turpis fringilla nulla, commodo dapibus urna arcu at nunc. Mauris ultrices convallis ipsum eget facilisis. Curabitur ut rutrum sem. Praesent id nibh non enim mollis porta. Nam mollis, quam et vehicula tristique, lorem ante laoreet orci, sit amet congue tortor nibh sit amet leo. Curabitur lobortis neque tempor, vestibulum lacus nec, condimentum arcu. Nulla fringilla leo sit amet ipsum auctor sagittis. Vivamus aliquam iaculis posuere. Pellentesque malesuada neque sit amet consectetur fringilla. Curabitur felis tellus, mattis in dui vel, vestibulum tincidunt metus. Mauris eget elit dui. Etiam risus nulla, ultricies vitae molestie quis, placerat in magna. Proin interdum, orci ac auctor ullamcorper, tellus ex porta tortor, suscipit luctus libero odio quis arcu. Phasellus dapibus pellentesque ex eget pulvinar. Proin vitae elit risus. Sed justo nulla, pellentesque eu erat eu, luctus bibendum magna. Curabitur at mi id augue egestas condimentum sed quis lectus. Aenean fringilla nisl sed tincidunt tristique. Cras scelerisque laoreet sapien a faucibus. Vivamus a vehicula arcu. Duis rutrum, massa eu tincidunt eleifend, est nulla faucibus nisl, sit amet consectetur neque velit at velit. Integer fermentum augue ut orci iaculis aliquet. Ut in gravida magna.

Webブラウザーで投稿を表示すると、次のように投稿の最初の行に現在の年が表示されます。

Hugoの投稿に画像を追加する方法

WordPressやその他の本格的なコンテンツ管理システムとは異なり、Hugoには画像を管理するためのドラッグアンドドロップシステムが含まれていません。したがって、イメージ管理システムの設計はエンドユーザーに負担をかけます。

Hugoには画像を管理する標準化された方法はありませんが、一般的な方法の1つは、画像を/ staticフォルダーに保存し、ショートコードを使用して投稿やページで画像を参照することです。 Hugoで基本的な画像整理を行う方法を見ていきましょう。

最初に行う必要があるのは、画像ライブラリの組織構造を作成することです。これは複雑に聞こえますが、必要なのは/staticフォルダー内にいくつかの追加ディレクトリを作成することだけです。

/staticにアップロードフォルダを作成することから始めましょう。 アップロードフォルダ内に、2021年にアップロードされたすべての画像を保持する2021という名前のフォルダを作成します。

次に、2つの画像（ blue1.jpgとblue2.jpg ）を2021フォルダーに追加しましょう。

HTMLでは、画像は<img>タグを使用して表示されます。たとえば、 blue1.jpgを表示するには、次のHTMLを使用できます。

 <img src="/uploads/2021/blue1.jpg" alt="Blue is the warmest color!">

このHTMLをMarkdownコンテンツファイルに直接追加することは可能ですが、アップロードフォルダーから任意の画像を表示するために使用できるショートコードを作成することをお勧めします。このように、 imgタグを更新する必要がある場合は、 imgタグの各インスタンスを編集せずにショートコードテンプレートを編集できます。

ショートコードテンプレートを作成するには、以下の内容で/layouts/shortcodes/img.htmlに新しいファイルを作成します。

 <img src="/uploads/{{ .Get "src" }}" alt="{{ .Get "alt" }}

次に、以下のショートコードをブログ投稿に追加します。

 {{< img src="2021/blue1.jpg" alt="Blue is also the coolest color!">}

ショートコードテンプレートでは、 {{ .Get "src" }}および{{ .Get "alt" }}は、ショートコードを呼び出すときにsrc<およびalt<パラメーターの内容をフェッチするようにHugoに指示します。

ここで、ブログ投稿をリロードすると、次のような画像が表示されます。

Hugoサイトをデプロイする方法

この投稿までに、Hugoのインストール、サイトの作成、テーマの追加、構成ファイルの基本的な編集、およびパーシャルとショートコードを使用したサイトの機能の拡張方法を学びました。この時点で、オンラインで展開する準備ができている機能的なサイトができているはずです。

Hugoは静的サイトジェネレーターであるため、生成するHTML、CSS、およびJSをWebサーバーを使用してどこにでもデプロイできます。静的サイトを提供するための技術的要件は非常に低いため、Netlify、Vercel、CloudflarePagesなどの幅広いプロバイダーで無料でホストできます。

以前は、 hugo server -Dを使用してローカル開発サーバーを起動し、サイトへの変更をリアルタイムでプレビューしていました。サイトを完全に生成するには、プロジェクトのルートディレクトリでhugoコマンドを使用できます。サイトの生成が完了すると、プロジェクトディレクトリに新しいパブリックフォルダが表示されます。このフォルダー内には、サーバーまたはAmazonS3などのクラウドストレージサービスにアップロードする必要のあるすべてのファイルがあります。

サイトをローカルで生成し、Amazon S3またはNginxを実行しているサーバーに手動でアップロードすることは、静的に生成されたサイトをデプロイする1つの方法です。ただし、変更を加えるたびに新しいファイルを手動でアップロードする必要があるため、最も効率的ではありません。

代わりに、HugoプロジェクトフォルダーをGitHubリポジトリにリンクし、GitHubリポジトリをNetlifyなどの自動展開サービスにリンクすることをお勧めします。この設定により、手動で介入することなく、サイトを編集し、変更をGitHubにプッシュして、Netlifyで新しいビルドとデプロイをトリガーできます。それでは、これらすべてを行う方法を見ていきましょう。

HugoプロジェクトをGitHubにアップロードする方法

まず、プロジェクトのGitHubリポジトリを作成する必要があります。これを行うには、GitHubアカウントを作成し（まだ持っていない場合）、公式のGitHubデスクトップアプリをダウンロードします。 GitHubアプリをインストールした後、メニューバーの[ファイル]をクリックして、[新しいリポジトリ]を選択します。リポジトリに選択した名前を付け、他のオプションは今のところデフォルトの状態のままにして、[リポジトリの作成]をクリックします。

デフォルト（macOSの場合）では、GitHubアプリは/Users/username/Documents/GitHubに新しいリポジトリを作成します。リポジトリにmy-hugo-siteという名前を付けたので、リポジトリは/Users/brianli/Documents/GitHub/my-hugo-siteます。

次に、元のプロジェクトフォルダー内のすべてのファイルを新しいGitHubリポジトリフォルダーに移動します。 パブリックフォルダーはGitHubにアップロードする必要がないため、必ず削除してください。

GitHubアプリに戻ると、変更されたファイルのリストが表示されます。リポジトリをGitHubにアップロードするには、概要を追加し、[メインにコミット]をクリックして、右上隅にある[リポジトリの公開]をクリックします。

デフォルトでは、「このコードを非公開にする」オプションがチェックされています。コードをオープンソースで公開したい場合は、チェックを外してください。 Finally, click Publish Repository once again.

Now, if you go to GitHub, you should see your repository online like so:

How to Link GitHub Repo to Netlify

If you don't already have a Netlify account, sign up for one here. To link a GitHub repository to Netlify, click New site from Git in the Netlify dashboard.

Under Continuous Deployment , select the GitHub option.

選択する — Select “GitHub” for continuous deployment.

Next, use the search box to find your Hugo project repository.

Next, specify the settings for the continuous deployment. Since Netlify can detect a Hugo configuration, the default settings should work fine for a basic deployment.

As you get more familiar with Hugo, you may delve into environment variables, custom build commands, and more. For the time being, setting the build command to hugo and the public directory to public will allow you to deploy a simple Hugo site. After specifying the build command and public directory, click Deploy Site .

Hugoは非常に高速な静的サイトジェネレーターであるため、基本的なサイトの展開には数秒しかかかりません。デプロイが完了すると、NetlifyダッシュボードにステージングURLが表示されます。 URLをクリックして、デプロイされたサイトを表示します。

これがNetlifyのHugoサイトです。ご覧のとおり、ローカル環境のサイトと同じです。

この時点で、NetlifyがホストするサイトのカスタムドメインとSSL証明書を設定できます。そのためには、Netlifyの公式ドキュメントを参照することをお勧めします。

NetlifyをGitHubにリンクしたので、HugoプロジェクトGitHubリポジトリへの新しいコミットにより、Netlifyへの新しいデプロイが自動的にトリガーされます。

記録的な速さで静的サイトを構築する準備はできましたか？ Hugoから始める️ クリックしてツイート

概要

Hugoは、世界で最も人気のある静的サイトジェネレーターの1つであり、それには十分な理由があります。超高速のビルド処理を備えているだけでなく、パーシャルとショートコードをサポートする強力なテンプレート機能も備えています。

このチュートリアルでは、Hugoの構成方法、新しいプロジェクトの作成方法、コンテンツファイルの追加方法、テーマファイルの編集方法、および完成した静的サイトの展開方法を学習しました。 Hugoと、カスタム関数、フロントマター、CSS / JSビルドパックなどのより高度な機能の詳細については、Hugoの公式ドキュメントを参照することをお勧めします。

Hugoやその他の静的サイトジェネレーターについてどう思いますか？ 以下のコメントでお知らせください！