Hugoサイトを構築してDigitalOceanアプリプラットフォームにデプロイする方法

Hugo は、静的サイトジェネレーターであり、Webサイトを構築するためのフレームワークです。 Hugoでは、HTMLを使用してテーマを定義し、Markdownまたはその他のテキストプロセッサを使用してコンテンツを構築します。 Hugoは、どこでもホストできるHTMLを生成します。

このチュートリアルでは、Hugoを使用して小さな静的Webサイトを構築し、GitHubを使用してサイトをDigitalOceanの AppPlatformにデプロイします。次に、サイトに変更を加え、それらの変更が自動的に展開されることを確認します。

前提条件

このチュートリアルを完了するには、次のものが必要です。

DigitalOceanアカウント。
GitHubアカウント。
Gitがローカルマシンにインストールされています。チュートリアルオープンソースへの貢献：Git入門に従って、コンピューターにGitをインストールしてセットアップすることができます。
テキストエディタ。 Visual StudioCodeまたはお好みのテキストエディターを使用できます。

ステップ1—Hugoをインストールする

Hugoサイトを構築するには、ローカルマシンにhugoコマンドラインツールをインストールします。このツールを使用して、サイトを生成し、コンテンツページを作成し、サイトを展開する前にサイトのテストに使用する小さなサーバーを起動します。

Hugoは単一のバイナリとして利用できるため、インストールプロセスでは、ファイルをマシンにダウンロードしてパスに配置します。

GitHubのリリースページからHugoをダウンロードします。 Hugoには、通常バージョンと拡張バージョンの2つのバージョンがあります。拡張バージョンをダウンロードして、アセット管理のサポートとCSS前処理のサポートを利用できるようにします。ファイルをDownloadsディレクトリに保存します。

ファイルをダウンロードしたら、ファイルを解凍してシステムPATHのどこかに配置し、任意のディレクトリからファイルを実行できるようにする必要があります。

Windowsでは、ディレクトリC:\Hugoを作成し、ダウンロードしたファイルを解凍して、C:\hugoに配置します。次に、そのフォルダーをPATH環境変数に追加します。これを行うには、Windows Searchを使用して、「environment」と入力します。 マイアカウントの環境変数の編集を選択します。表示された画面で、環境変数ボタンを押し、システム変数セクションで PATH を見つけ、編集ボタンを押します。テキストエリアにc:\hugo\binを追加し、OKを押して設定を保存します。残りのダイアログでOKを押して、ダイアログを閉じます。

macOSまたはLinuxでは、実行可能ファイルを/usr/local/binにコピーします。これは、デフォルトでPATH環境変数にすでに含まれているためです。

まず、ダウンロードディレクトリに切り替えます。

cd ~/Downloads

ファイルを解凍します。

tar zxvf hugo_extended_0.75.1*.gz

次に、ファイルを/usr/local/binに移動します。

mv hugo /usr/local/bin

ホームディレクトリに切り替えてhugoコマンドを入力し、Hugoが構成されていることを確認します。

cd

hugo version

画面にバージョン番号が印刷されています。

OutputHugo Static Site Generator v0.75.1-A4A7BAB7/extended darwin/amd64 BuildDate: 2020-09-15T06:54:33Z

Hugoがインストールされたので、サイトを作成できます。

ステップ2—Hugoプロジェクトの作成

サメに関する小さなサイトを作成しましょう。これを「シャルコペディア」と呼び、さまざまな種類のサメに関するページがあります。

サイトを作成するには、hugo new siteコマンドを使用します。ホームディレクトリから、次のコマンドを実行します。

hugo new site sharkopedia

これにより、ディレクトリsharkopediaが作成され、サイトにテーマをインストールする方法を示すウェルカムメッセージが表示されます。

OutputCongratulations! Your new Hugo site is created in /Users/your_username/sharkopedia.

Just a few more steps and you're ready to go:

1. Download a theme into the same-named folder.
   Choose a theme from https://themes.gohugo.io/ or
   create your own with the "hugo new theme <THEMENAME>" command.
2. Perhaps you want to add some content. You can add single files
   with "hugo new <SECTIONNAME>/<FILENAME>.<FORMAT>".
3. Start the built-in live server via "hugo server".

Visit https://gohugo.io/ for quickstart guide and full documentation.

既存のテーマをインストールする代わりに、サイトに少量のHTMLとCSSを追加して、サイトの外観を定義します。既存のテーマは多くの場合、多くの構成を必要とする可能性があり、それはこのチュートリアルの範囲外です。

sharkopediaディレクトリに切り替えます。

cd sharkopedia

Hugoサイトの構造は次のとおりです。

Output├── archetypes
├── config.toml
├── content
├── data
├── layouts
├── resources
├── static
└── themes

archetypesはコンテンツテンプレートです。 hugoコマンドを使用して新しいMarkdownページを作成でき、archetypesディレクトリ内のファイルをそれらのページのテンプレートとして使用します。
config.tomlは、サイトの構成ファイルであり、サイトのドメイン、タイトル、および使用するテーマを指定します。
contentは、サイトのコンテンツを保持するディレクトリです。
dataは、サイトの生成時に使用できるJSONファイルを保存できる場所です。
layoutsは、サイトのルックアンドフィールを定義するHTMLファイルを配置する場所、またはテーマのテンプレートをオーバーライドする場所です。
resourcesは、最適化された画像など、Hugoが生成するファイルを配置する場所です。
staticは、ファイル、スタイルシート、スクリプト、またはHugoが管理する必要のないその他のアセットなどの静的アセットを保持します。
themesには、作成またはダウンロードしたテーマが含まれています。

このチュートリアルではテーマを使用しません。 layoutsディレクトリにHTMLファイルを定義して、サイトの外観を定義します。

先に進む前に、エディターでファイルconfig.tomlを開きます。 baseURLフィールドを空の文字列に変更し、タイトルを「Sharkopedia」と表示されるように変更します。

config.toml

baseURL = ""
languageCode = "en-us"
title = "Sharkopedia"

ファイルを保存します。

次に、サイトのレイアウトとコンテンツを作成します。このサイトには、ホームページと「サメ」というセクションがあります。コンテンツを表示するには、Hugoには次の3種類のテンプレートファイルが必要です。

ホームページのテンプレート。
単一のサメに関するページのような、コンテンツのページのテンプレート。
すべてのサメ、またはサイト上のすべてのタグやカテゴリを一覧表示するページなど、ページの一覧を表示するテンプレート。

ホームページテンプレートを作成することから始めましょう。ファイルlayouts/index.htmlを作成し、エディターで開きます。次のコードをファイルに追加して、サイトを定義します。

layouts / index.html

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title><^>{{ .Site.Title }}</title>
    <link rel="stylesheet" href="/style.css">
  </head>
  <body>

    <header>
      <h1>{{ .Site.Title }}</h1>
    </header>
    
    <main>
      <h2>{{ .Title }}</h2>
      {{ .Content }}
    </main>

    <footer>
      <small>Made with love and Hugo</small>
    </footer>
  </body>
</html>

テンプレート:.Site.Title行は、config.tomlファイルからタイトルを取得します。 テンプレート:.Title行とテンプレート:.Content行は、次に作成するホームページに関連付けられたドキュメントからタイトルとコンテンツを取得します。

ファイルを保存します。

デフォルトでは、Hugoはすべての新しいページをドラフトモードで作成します。エディターでファイルarchetypes/default.mdを開き、draftがfalseになるように変更します。このようにして、作成するすべての新しいページがドラフトモードになることはありません。

archetypes / default.md

---
title: "{{ replace .Name "-" " " | title }}"
date: {{ .Date }}
draft: false
---

titleフィールドのreplace行は、ファイル名に基づいてページのタイトルを生成するようにHugoに指示します。

ファイルを保存します。

次に、Hugoを使用してホームページのコンテンツファイルを生成します。ターミナルから、プロジェクトのディレクトリに次のコマンドを入力します。

hugo new _index.md

これにより、ファイルcontent/index.mdが生成されます。

Output/Users/your_username/sharkopedia/content/_index.md created

ファイル名の下線は、これが通常のコンテンツではなく、リストページまたはホームページのいずれかのコンテンツページであることをHugoに示しています。

エディタでcontent/_index.mdファイルを開き、テキストを追加してタイトルを変更します。

content / _index.md

---
title: "Welcome"
date: 2020-10-07T14:07:35-05:00
draft: false
---
This is a site all about sharks! Select a shark from the list to learn more:

このファイルの内容はホームページに配置されます。それをテストしてみましょう。

ターミナルから、次のコマンドを使用してHugoの開発サーバーを起動します。

hugo serve

Webブラウザでhttp://localhost:1313にアクセスすると、ホームページが表示されます。

サイトが機能していることを確認したら、CTRL+Cを押してサーバーを停止します。

次に、単一のコンテンツ用のテンプレートが必要になります。このプロジェクトでは、ホームページを複製できますが、特定のディレクトリに配置する必要があります。

ディレクトリlayouts/_defaultを作成します。

mkdir layouts/_default

次に、ファイルlayouts/_default/single.htmlを作成し、layouts/index.htmlファイルの内容を新しいファイルにコピーします。これは、次のコマンドを使用してコマンドラインから実行できます。

cp layouts/index.html layouts/_default/single.html

次に、サイトのsharksコンテンツセクションを作成します。これを行うには、hugoコマンドを使用して、sharksサブディレクトリの下のcontentディレクトリに新しいMarkdownファイルを作成します。次のコマンドを実行して、シュモクザメのコンテンツページを作成します。

hugo new sharks/hammerhead.md

hugo newコマンドを使用するときは、contentディレクトリを指定しないことに注意してください。

次に、Hugoの開発サーバーを起動します。

hugo serve

http://localhost:1313/sharks/hammerhead.mdにアクセスして、シュモクザメのページを確認してください。

http://localhost:1313/sharksにアクセスすると、必要な最終テンプレート（Hugoがコンテンツのリストを表示するために使用するテンプレート）を定義していないため、何も表示されません。今それをしましょう。

CTRL+Cを押してサーバーを停止します。

ファイルlayouts/_default/list.htmlを作成し、エディターで開きます。ファイル内に、他のテンプレートと同じコンテンツを配置します。

layouts / _default / list.html

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title><^>{{ .Site.Title }}</title>
    <link rel="stylesheet" href="/style.css">
  </head>
  <body>

    <header>
      <h1>{{ .Site.Title }}</h1>
    </header>
    
    <main>
      <h2>{{ .Title }}</h2>
      {{ .Content }}
    </main>

    <footer>
      <small>Made with love and Hugo</small>
    </footer>
  </body>
</html>

<main>タグ内のタイトルとコンテンツの後に、表示するページの箇条書きリストを生成する次のコードを配置します。

    <main>
      <h2>{{ .Title }}</h2>
      {{ .Content }}

      <ul>
      {{ range .Pages }}
        <li><a href="{{ .RelPermalink }}">{{ .Title }}</a></li>
      {{ end }}
      </ul>
    </main>

range関数は、サイトのセクションのすべてのページを繰り返し処理します。 .Pagesの実際の値は、Hugoがサイトを生成するときに決定されます。作成したこのリストテンプレートは、タグページ、カテゴリページ、「サメ」セクションなど、すべてのリストのデフォルトテンプレートとして使用されます。セクションに対してより具体的なテンプレートを作成できますが、これにより、どこでも機能するデフォルトのレイアウトが得られます。ファイルを保存します。

最後に、表示するコンテンツが増えるように、アオザメとジンベイザメのページを作成します。

hugo new sharks/mako.md
hugo new sharks/whale.md

hugo serveでサーバーを再起動し、http://localhost:1313/sharksにアクセスすると、次の3つのSharkページが表示されます。

CTRL+Cでサーバーを停止します。

あなたのサイトは準備ができています。次に、コードをGitHubにプッシュして、デプロイできるようにします。

ステップ3—サイトをGitHubにプッシュする

DigitalOcean App PlatformはGitHubリポジトリからコードをデプロイするため、最初に行う必要があるのは、サイトをGitリポジトリに取得し、そのリポジトリをGitHubにプッシュすることです。

まず、SharkopediaプロジェクトをGitリポジトリとして初期化します。

git init

サイトを生成すると、Hugoはpublicというディレクトリにファイルを配置します。そのディレクトリをGitの無視リストに追加して除外しましょう。 .gitignoreという名前の新しいファイルを作成し、次のコードをファイルに追加します。

.gitignore

public

ファイルを保存します。

次に、次のコマンドを実行して、リポジトリにファイルを追加します。

git add archetypes/ config.toml content/ .gitignore layouts/

data、themes、resources、static、およびthemesはこのコマンドに含まれていません。これらのディレクトリは空であり、Gitはファイルのみを保存し、ディレクトリは保存しません。後で独自のデータ、テーマ、または静的コンテンツを追加する場合は、それらのディレクトリを後で追加します。

最初のコミットを行います。

git commit -m "Initial version of the site"

ファイルはコミットされます：

Output[master (root-commit) b045f24] First version of the site
 10 files changed, 114 insertions(+)
 create mode 100644 .gitignore
 create mode 100644 archetypes/default.md
 create mode 100644 config.toml
 create mode 100644 content/_index.md
 create mode 100644 content/sharks/hammerhead.md
 create mode 100644 content/sharks/mako.md
 create mode 100644 content/sharks/whale.md
 create mode 100644 layouts/_default/list.html
 create mode 100644 layouts/_default/single.html
 create mode 100644 layouts/index.html

ブラウザを開いてGitHubに移動し、プロファイルを使用してログインし、sharkopediaという名前の新しいリポジトリを作成します。 READMEまたはライセンスファイルなしで空のリポジトリを作成します。

リポジトリを作成したら、コマンドラインに戻ってローカルファイルをGitHubにプッシュします。

まず、GitHubをリモートリポジトリとして追加します。

git remote add origin https://github.com/your_username/sharkopedia

次に、デフォルトのブランチの名前をmainに変更して、GitHubが期待するものと一致させます。

git branch -M main

最後に、mainブランチをGitHubのmainブランチにプッシュします。

git push -u origin main

ファイルは転送されます：

OutputEnumerating objects: 16, done.
Counting objects: 100% (16/16), done.
Delta compression using up to 6 threads
Compressing objects: 100% (14/14), done.
Writing objects: 100% (16/16), 1.58 KiB | 1.58 MiB/s, done.
Total 16 (delta 1), reused 0 (delta 0), pack-reused 0
remote: Resolving deltas: 100% (1/1), done.
To https://github.com/your_username/sharkopedia
 * [new branch]      main -> main
Branch 'main' set up to track remote branch 'main' from 'origin'.

コードをプッシュするように求められたら、GitHubのクレデンシャルを入力します。

これで、サイトをDigitalOceanのAppPlatformにデプロイする準備が整いました。

ステップ4—AppPlatformを使用したDigitalOceanへのデプロイ

コードがプッシュされたら、 https://cloud.digitalocean.com/apps にアクセスし、アプリの起動をクリックします。 GitHubアカウントに接続するように求められます。

アカウントを接続し、DigitalOceanがリポジトリにアクセスできるようにします。 DigitalOceanがすべてのリポジトリにアクセスできるようにするか、デプロイしたいリポジトリだけにアクセスできるようにするかを選択できます。

インストールと承認を押します。 DigitalOceanダッシュボードに戻り、アプリの作成を続行します。

GitHubアカウントが接続されたら、your_account/sharkopediaリポジトリを選択し、次へをクリックします。

次に、アプリの名前を入力し、地域を選択して、mainブランチが選択されていることを確認します。次に、自動デプロイコードの変更がチェックされていることを確認します。次へを押して続行します。

DigitalOceanは、プロジェクトがHugoサイトであることを検出し、サイトを構築するためのコマンドを自動的に入力します。

次へを押すと、ファイナライズして起動画面が表示され、プランを選択できます。静的サイトは無料なので、スターターアプリを選択し、下部にあるスターターアプリの起動を押します。あなたのサイトは構築されます：

ビルドプロセスが完了すると、インターフェイスに正常なサイトが表示され、サイトにアクセスするためのリンクが提供されます。

サイトがデプロイされたので、コードをGitHubにプッシュして変更を加えることができます。

ステップ5—変更の展開

変更が確実に展開されるように、サイトのホームページにサメのリストを追加しましょう。リポジトリに変更をコミットしてGitHubにプッシュすると、変更は自動的にデプロイされます。

エディターでファイルlayouts/index.htmlを開き、次のコードを追加して、サメであるサイトのすべてのページを反復処理して表示します。

layouts / index.html

...
    <main>
      <h2>{{ .Title }}</h2>
      {{ .Content }}

      <ul>
      {{ range (where site.RegularPages "Type" "in" "sharks") }}
        <li><a href="{{ .RelPermalink }}">{{ .Title }}</a></li>
      {{ end }}
      </ul>
    </main>

このバージョンでは、(where site.RegularPages "Type" "in" "sharks")を使用して、サメのコンテンツページのみを検索します。デフォルトのリストテンプレートとは異なり、ホームページには、表示するコンテンツの種類についてより多くの指示が必要です。

ファイルを保存します。 hugo serveでサーバーを実行し、http://localhost:1313にアクセスして、サメがリストされていることを確認します。

CTRL+Cを押してサーバーを停止します。

次に、更新したファイルをリポジトリに追加します。

git add layouts/index.html

コミットする：

git commit -m "Add sharks to home page"

最後に、コードをGitHubにプッシュします。

git push origin main

しばらくすると、変更が展開されます。 DigitalOceanアプリのステータスページに戻ると、アプリの展開の進行状況バーが再び表示されます。

完了したら、サイトにアクセスして変更をライブで確認します。

結論

このチュートリアルでは、基本的なHugo Webサイトを構築し、DigitalOceanのAppPlatformを使用してデプロイしました。コミットしてリポジトリにプッシュした変更はすべて再デプロイされるため、サイトを拡張できます。このチュートリアルのサンプルコードは、 DigitalOcean CommunityRepositoryにあります。

このチュートリアルの例は、最小限のHugoサイトです。自分のサイトにはもっと複雑なテーマや機能があるかもしれませんが、展開プロセスは同じです。