静的なウェブサイトは、簡単に作成でき、非常に高速に使用できます。Hugoの使い方を覚えれば、Linuxでテーマベースの静的ウェブサイトを生成することができます。Webサイトづくりがまた楽しくなる

ヒューゴ・ウェブサイト・ビルダー

静的サイトとは、動的にページを作成したり、変更したりしないサイトのことです。バックエンドのデータベース、eコマース処理、PHPはありません。すべてのウェブページは完全に事前に構築されており、訪問者に非常に迅速に提供することが可能です。

しかし、だからといって、静的なウェブサイトはつまらないものである必要はありません。また、画像カルーセルや背景画像をスライドさせるWebページなど、HTMLのすべてを利用することができる。

Hugo Website Builderは、テンプレートと作成したコンテンツを使用して、完全なウェブサイトを生成します。そして、それをホスティング・プラットフォームに載せれば、たちまち生きたウェブサイトが完成するのです。

Hugoは、あなたが作成したページやブログエントリーにマークダウンを使用しています。マークダウンは最も使いやすいマークアップ言語で、サイトのメンテナンスも簡単です。

Hugoの設定ファイルにはTom's Obvious Minimum Language（TOML）が、YAMLはマークアップ言語ではありませんが（YAML）、どちらの言語も同じようにシンプルなものです。また、Hugoは読み込みに1秒を切るサイトもあるなど、非常に高速であることもメリットの一つです。多くのテンプレートから選ぶことができ、随時追加されていくので、簡単に始めることができます。テンプレートを選び、コンテンツを追加するだけで、簡単に自分のものにすることができます。

また、Hugoはあなたのコンピュータで小さなウェブサーバーの役割も果たします。サイトのデザインや作成、新しい記事の追加をしながら、ライブバージョンを見ることができます。また、エディターで「保存」するたびに自動的に更新されるので、ブラウザですぐに変更の効果を確認することができます。

ウェブサイトのホスティング

静的なウェブサイトのホスティングに関しては、選択の余地を与えません。ほとんどの企業は、個人またはオープンソースユーザー向けに無料のホスティングサービスを提供しています。もちろん、以下のような通常のウェブホスティング会社を選択することも可能です。

• エアロバティックス
• アマゾンS3
• アジュール
• 雲峰
• ドリームマスター
• ファイアベース
• GitHubページ
• ゴッダールディ
• Googleクラウドストレージ
• ヘロク
• GitLabのページ
• 株式会社ネットリファイ
• モーソー
• サージ

関連：Google Firebaseホスティングプラットフォームで静的ウェブサイトを無料でホスティングする方法

Hugoをインストールする

HugoではGitをインストールする必要がありますが、Fedora32とManjaro 20.0.1では既にインストールされています。ubuntu 20.04 (focusa,)では、Hugoの依存関係として自動的に追加されます。

UbuntuにHugoをインストールするには、次のコマンドを使用します。

sudo apt-get install hugo

Fedoraの場合、入力する必要があります。

sudo dnf install hugo

Manjaroの注文は。

sudo pacman -Syu hugo

Hugoでウェブサイトを作成する

Hugoに新しいWebサイトの作成を依頼すると、ディレクトリ一式を作成してくれます。これらは、私たちのウェブサイトのさまざまな要素を保持します。しかし、これはホスティング・プラットフォームにアップロードされる最終的なウェブサイトではありません。これらのディレクトリには、実際のウェブサイトを構築する際にHugoが入力として使用するテーマ、プロフィール、コンテンツ、画像が保存されています。

ソースコードとコンパイルされたプログラムの違いのようなものです。ソースコードは、コンパイラが最終製品を生成するために使用するツールです。同様に、Hugoはこれらのディレクトリの内容を取り込んで、動作するウェブサイトを生成する。

これから実行するコマンドは、作成するサイトと同じ名前のディレクトリを、コマンドを実行したディレクトリに作成します。

そこで、ホームページを作成したいディレクトリに移動します。ここでは、メインディレクトリを使用しますので、次のように入力します。

hugo new site geek-demo

これで「geek demo」ディレクトリが作成されるので、次のように入力してlsを実行することで切り替えます。

cd geek-demo/ ls

設定ファイル「configuration.toml」と作成されたディレクトリが見えますが、これはサイトの足場に過ぎないので、実際には空っぽです。

gitの初期化とトピックの追加

完成したサイトがどのようなものになるのか、Hugoにイメージを与えるためにテーマを追加する必要があります。そのために、Gitを初期化する必要があります。 サイトのルート・フォルダ（configuration.tomlファイルがある）で、次のコマンドを実行します。

git init

数百種類のテーマから選ぶことができ、それぞれのテーマを説明するページがあります。テーマのデモを実行し、ダウンロードするためのコマンドを見つけることができます。私たちはメグナというものを使っています。

テーマをサイトにマージするには、「themes」フォルダに移動して、git cloneコマンドを実行する必要があります。

cd themes git clone https://github.com/themefisher/meghna-hugo.git

Gitはその過程でいくつかのメッセージを表示します。終了したら、lsを使ってトピックを含むディレクトリを調べます。

ls

Hugoテーマには、動作するサンプルウェブサイトが含まれています。デフォルトのウェブサイトを、ウェブサイトのディレクトリにコピーする必要があります。

まず、サイトのルートディレクトリが返されます。サブディレクトリを含めるには -r (recursive) cp オプションを、既存のファイルを上書きするには -f (forced) オプションを使用します:.

cd .. cp themes/meghna-hugo/exampleSite/* -rf .

ローカルでのサイト立ち上げ

現地で新しいホームページを作成するくらいの作業はしています。まだ、プレースホルダーのテキストや画像が含まれていますが、これらは表面的な変更に過ぎません。では、これらの技術的な仕組みが機能するかどうか、検証してみましょう。

Hugo社には、Webサーバーを起動し、-D（draft）オプションを使って、「draft」と表示されている可能性のあるファイルがサイトに含まれるようにするよう指示しました。

hugo server -D

次の図は、hugoコマンドの出力を示しています。

Hugoは142ミリ秒でサイトを構築したと聞いています（速いとは言いましたよね）。.また、Ctrl+Cキーを押してサーバーを停止するように言われましたが、今は起動したままにしています。

ブラウザーを開き、Localhost: 1313にアクセスすると、あなたのウェブサイトが表示されます。

デフォルトのウェブサイトコンテンツを変更する

このように実行されているとき、Hugoはメモリからウェブページを提供しています。ハードディスクにサイトを作成するのではなく、RAMに作業コピーを作成します。しかし、ハードディスク上のファイルや画像を監視しているのです。どれかひとつでも変更されていれば、ブラウザでサイトをリフレッシュし、Ctrl+F5を押す必要もありません。

別のターミナルウィンドウを開き、サイトのルートディレクトリに移動します。"config.toml "エディターでファイルを開く。baseURL」をサイトがあるドメインに、「title」をサイト名に変更します。変更を保存し、エディタを開いたままにします。

Hugoはconfiguration.tomlファイルへの「変更」を検出したので、これらのファイルを読み込んでサイトを再構築し、ブラウザをリフレッシュしたのです。

これで、「ブラウザ」タブに選択したサイト名が表示されるはずです。保存した変更点をすぐに視覚的に確認できるため、サイトのカスタマイズ作業が大幅にスピードアップしました。

テーマはすべて異なりますが、私たちが使っていたものは簡単にたどれました。サイト内のさまざまなセクションには明確な名前が付けられており、各セクションは同じように設定されているため、変更した内容は常に明白です。

繰り返しになりますが、一度保存した変更はブラウザで確認できますので、気に入らない場合は上下逆に保存し直せばOKです。

サイトを支配するさまざまなプロフィールは、個々の仕事に特化し、意味のあるタグ付けがされています。多くのディレクトリに配置されているわけではないので、把握するのは難しいことではありません。通常は「Data」フォルダーにあります。

今回はバイリンガルのテンプレートを使用しているため、英語の設定ファイルは "En "サブディレクトリに配置されています。

Data>En>Banners.yml をエディタで開くと、サイトタイトル領域を管理するための設定集が表示されます。

タイトルとコンテンツの設定を変更すると、タイトルページのテキストが変更されます。

また、「タグ」の設定を変更し、ボタンのテキストに「もっと見る」が表示されるようにしました。あなたのサイトでは、画像を変更する必要があるかもしれません。

変更を保存すると、ブラウザに変更内容が表示されます。

ウェブサイトの他の要素を変更する

他の要素も同様に変更できます。適切なプロファイルを探し、必要な設定とテキストを変更するだけです。

また、画像を変更する必要があります。デフォルトの画像は、プロファイルで参照されます。

画像は「Static>Images」ディレクトリに配置され、このディレクトリにはサイトのさまざまな部分用のサブディレクトリが含まれています。任意のファビコンやロゴを「Static>Images」ディレクトリに直接配置してください。

新しいブログコンテンツを追加する

これまでは、すでにあるものを変えることに目を向けてきました。でも、新しいブログ記事を追加するにはどうしたらいいのでしょうか？ヒューゴは「アーキタイプ」という概念を使って、新しいコンテンツを作っています。ブログエントリーのプロトタイプを作成しない場合、Hugoに新しいブログエントリーを作成するよう依頼するたびに、デフォルトのファイルが作成されることになります。

それはそれでいいのですが、プロトタイプがあることで、手間が省けますし、先のこともできるだけ事前に入力されていることになります。

このテーマでは、ブログのエントリーはContent>English>blogにあり、既存のブログエントリーを「simple-blog-post-1.md」のようなエディタで開くと、以前の内容が表示されるようになっています。

セクションをコピーし、プロトタイプのテンプレートとして使用できるように現在のエントリーを編集し、「Archetypes」フォルダに保存する必要があります。blog.md」という名前をつければ、自動的に新しいブログのエントリーのテンプレートとして使われる。

geditでは、以下のように実行できます。

gedit content/english/blog/simple-blog-post-1.md

2本の点線が入った上の部分をハイライトし、Ctrl+Cでコピーします。Ctrl+Nで新規ファイルを起動し、Ctrl+Vでコピーした内容を貼り付けます。

では、以下のように変更し、各行のコロン（:）の後にスペースを空けるようにしてください。

• タイトル："{replace.Name"-""|Title}}"に変更する（引用符を含む）。新しいブログ記事のタイトルは、自動的に**になります。後述するように、hugo newコマンドに渡されたファイル名から形成される。
• 日付：{.Date}に変更すると、ブログが作成された日時が自動的に入力されます。
• Imageu webp: ブログのヘッダー画像のwebpフォーマットへのパスです。テーマが見つからない場合は、次の行の画像を使用します。
• 画像：JPEG形式のブログヘッダー画像へのパスです。これらの画像は、デフォルトの画像として残しておくとよいでしょう。これにより、すべてのブログ記事には、カスタム画像を検索、サイズ変更、または保存した後でも、都合のよい画像が表示されます。一旦これを行えば、カスタムイメージのファイル名に合わせて簡単に編集することができます。
• 著者：これを自分の名前に変更します。
• 説明文：各記事の簡単な説明文をここに入力してください。これを空文字列（""）に変更すると、古いテキストを編集することなく、新しいブログごとに説明を入力することができます。

この新しいファイルを "prototype"/blog.md として保存し、gedit を閉じます。 これで Hugo は、新しいブログエントリーを作成するときはいつでもこの新しいプロトタイプを使用するようになります。

ログを書くのにマークダウンを使うので、ファイルの拡張子は「.md」であることに注意してください。

hugo new blog/first-new-blog-post-on-this-site.md

では、新しいブログのエントリーをエディタで開きたいのですが

gedit content/english/blog/first-new-blog-post-on-this-site.md

新しいブログの記事がgeditで開かれます。

前述したことはすべて、私たちの足しになります。

• タイトル：ファイル名から推測されます。調整が必要な場合は、ここで編集できます。
• 時刻と日付：これらは自動的に追加されます。
• デフォルト画像：関連性のあるロイヤリティフリーの画像を探すとよいでしょう。静止画＞画像＞ブログ に入れてください。ここには、実際の画像のファイル名を入力する必要があります。
• 著者：あなたの名前が自動的に追加されました。
• 注）編集中です。

マークダウンを使ってブログを書き、見出し、太字、斜体、画像、リンクなどには標準的なマークアップを使用します。ファイルを保存するたびに、Hugoはサイトを再構築し、ブラウザで更新します。

下の画像は、新しいブログのエントリーがトップページに表示される様子を示しています。

下の画像は、新しいブログエントリーがそれ自身のページに表示される様子を示しています。

ブログ記事を書いたら、変更を保存してエディタを閉じます。Hugoサーバを停止するので、ブラウザを閉じてもかまいません。

Hugoサーバーが起動しているターミナルウィンドウで、Ctrl+Cを押します。

ウェブサイトを作成する

サイトのルートで、以下のコマンドを発行してサイトを構築します。

hugo

Hugoがサイトを構築し、作成したページ数やその他のコンポーネントをリストアップしました。私たちのものを作成するのに、134ミリ秒かかりました。

Hugoは、あなたのウェブサイトのルートディレクトリに「Public」という新しいディレクトリを作成しました。Public」ディレクトリには、ホスティングプラットフォームに転送する必要があるすべてのファイルがあります。

Public」ディレクトリ自体ではなく、「Public」ディレクトリ内のファイルやディレクトリをホスティングプラットフォームにアップロードする必要があることに注意してください。

これで基本がわかった

どのテーマも、どうすれば思い通りの形になるのか、ちょっと探検が必要ですが、そこが楽しいんですHugoがブラウザのウィンドウに変更を即座にレンダリングする機能を持つことを考えると、何も時間がかかりません。

文章を書いたり、画像を探したり、トリミングしたりする作業が一番時間がかかると感じるかもしれません。

Hugoのドキュメントサイトも役に立ちますが、広範囲です。うまくいけば、この基本的なウォークスルーで始めるには十分でしょう。

GitとGithub、GitLab、BitBucketを使用している場合、これらのプラットフォームも統合を使用することができます。このリポジトリはリモートのHugoリポジトリを監視し、本番サイトに変更を加えたときにリポジトリをリビルドします。