TOC

Ubuntu 14.04で静的サイトジェネレーターであるHugoをインストールして使用する方法

前書き

Hugoは、Goで記述された複数のプラットフォームで利用可能な、高速で使いやすい静的サイトジェネレーターです。 静的サイトジェネレーターは、データベースから取得した動的コンテンツを必要としないブログやその他のコンテンツに最適です。 Hugoのような選択肢を使用すると、完全なコンテンツ管理ソリューションの肥大化を必要とせずに、スタックを簡素化し、ユーザーフレンドリーなマークダウンを記述し、更新およびカスタムコンテンツを処理できます。

このガイドでは、Ubuntu 14.04サーバーにHugoをインストールして使用する方法について説明します。 これにより、静的なサイトの構成、コンテンツの作成、同じサーバーでの公開、または実稼働ロケーションへの展開が可能になります。

前提条件

このガイドに従うには、Ubuntu 14.04サーバーにアクセスする必要があります。 このサーバーでは、管理タスクを実行するために、sudo特権を持つroot以外のユーザーが構成されている必要があります。 Ubuntu 14.04 initial server setup guideをフォローすると、sudoユーザーを作成する方法を見つけることができます。

Hugoの最新バージョンのインストール

HugoはUbuntuのデフォルトリポジトリでは使用できません。 ただし、パッケージはGitHubでさまざまなアーキテクチャとディストリビューションに対応しています。

システムアーキテクチャを見つける

始める前に、正しいパッケージを確実にダウンロードできるように、Ubuntuマシンのアーキテクチャを確認する必要があります。 サーバーで、次を入力します。 

uname -i

次のような場合は、Ubuntuの64-bitインストールを実行しています。 

Outputx86_64

代わりに、出力が次のようになっている場合は、Ubuntuの32-bitバージョンで作業していることを意味します。 

Outputi686

この情報は以下で使用します。

Hugoパッケージをダウンロードしてインストールする

Hugo releases pageにアクセスして、Hugoの最新バージョンの安定版（一番上に最も近いバージョン）を見つけます。 機能の発表テキストをスクロールダウンすると、「ダウンロード」というセクションが表示されます。

次に、適切なインストールパッケージのリンクの場所をコピーする必要があります。 正しいパッケージは、上記で見つけたサーバーアーキテクチャによって異なります。

  • 64-bit version of Ubuntuを使用している場合は、amd64.debで終わるリンクを右クリックして、リンクの場所をコピーします。

  • 32-bit version of Ubuntuを使用している場合は、i386.debで終わるリンクを右クリックして、リンクの場所をコピーします。

サーバーで、sudo権限を持つユーザーとしてログインし、書き込み権限のあるディレクトリに移動します。 wgetコマンドを使用し、コピーしたリンクの場所を貼り付けてHugoをダウンロードします。 

cd ~
wget https://github.com/spf13/hugo/releases/download/v0.14/hugo_0.14_amd64.deb

これで、次のように入力して、dpkgを使用してパッケージをインストールできます。 

sudo dpkg -i hugo*.deb

Hugoにソフトウェアバージョンの印刷を依頼して、インストールが成功したことをテストします。 

hugo version

Hugoは現在のソフトウェアバージョンを印刷する必要があります。 

OutputHugo Static Site Generator v0.14 BuildDate: 2015-05-25T21:29:16-04:00

Hugoのサポートソフトウェアのインストール

これで、メインのHugoアプリケーションがインストールされました。 ただし、起動して実行するためにインストールする必要があるソフトウェアがいくつかあります。

Hugoテーマをインストールする

メインのHugoパッケージにはテーマは含まれていません。 Hugoテーマは、実際のサイトコンテンツをユーザーに表示する方法を定義します。 Hugoテーマを取得する最も簡単な方法は、Hugoテーマgitリポジトリのクローンを作成することです。このリポジトリには、多くの事前構成済みテーマが用意されています。 このプロセスでは、gitをインストールする必要があります。

Ubuntuのデフォルトリポジトリでgitを見つけることができます。 ローカルパッケージインデックスを更新してから、次のように入力してgitをインストールします。 

sudo apt-get update
sudo apt-get install git

次に、Hugoテーマリポジトリのクローンを作成できます。 GitHubのリポジトリは、個々のテーマがサブモジュールとして含まれて構成されています。

サブモジュールはサイトの実際のコンテンツのバージョン管理を大幅に複雑にするため、実際にはテーマをホームディレクトリに複製します。 その後、サイトディレクトリ内のテーマへのシンボリックリンクを作成できます。 これにより、複数のサイトがある場合にテーマディレクトリを簡単に共有できます。

次のように入力して、テーマリポジトリをホームディレクトリに複製します。 

git clone --recursive https://github.com/spf13/hugoThemes ~/themes

Pygments Syntax Highlighterをインストールする

Pygmentsと呼ばれるPythonソフトウェアもインストールします。 これにより、レンダリングされたページに含まれるコードブロックに対して、サーバー側の構文強調ロジックが提供されます。 Pythonのパッケージマネージャーであるpipを使用すると、Pygmentsを簡単にインストールできます。

次のように入力すると、デフォルトのリポジトリからpipを取得できます。 

sudo apt-get install python-pip

aptが終了したら、次のように入力して、pipを使用してPygmentsをインストールできます。 

sudo pip install Pygments

これにより、選択した場合、投稿コンテンツに300以上の言語をサポートする構文強調コードブロックを含めることができます。 project’s pageで詳細を確認できます。

Hugo Bashのオートコンプリートを有効にする

最初のサイトでの作業を開始する前に最後に行うことは、Hugoのbashオートコンプリート関数を生成することです。 これを行うには、次のように入力します。 

sudo hugo gen autocomplete

その後、システム全体の完了構成を取得して、現在のシェルがログアウトおよびログインし直さなくても自動補完機能を使用できるようにします。 

. /etc/bash_completion

ここで、hugoと入力してからTabキーを数回タップすると、Hugoが認識しているコマンドが表示されます。 

hugo [TAB][TAB][TAB]
Outputbenchmark        config           gen  help             new              undraft
check            convert          gendoc           list             server           version

最初のサイトを作成する

これですべての設定が完了したので、最初のHugoサイトを作成できます。 Hugoには、機能するために必要なファイルとディレクトリのスケルトンを作成できるジェネレーターがあります。

次のように入力して、ホームディレクトリに新しいサイトを作成できます。 

hugo new site ~/my-website

新しいHugoサイトに移動して、周りを見てみましょう。 

cd ~/my-website
ls -F

Hugoサイトの構築に使用されるディレクトリ構造とプライマリ構成ファイルが表示されます。 

Outputarchetypes/  config.toml  content/  data/  layouts/  public/  static/

先に進んで、クローンを作成した~/themesディレクトリを新しいサイトにリンクしましょう。 このリンクを展開の柔軟性を高めるために、相対シンボリックリンクを作成します。 Hugoリポジトリをリモートサーバーにデプロイする場合は、テーマディレクトリをHugoの親ディレクトリに再度クローンすることを確認する必要があります。 

ln -s ../themes .
ls -l
Outputtotal 28
drwxrwxr-x  2 demouser demouser 4096 Nov  5 11:25 archetypes
-rw-rw-r--  1 demouser demouser  210 Nov  5 11:55 config.toml
drwxrwxr-x  3 demouser demouser 4096 Nov  5 11:38 content
drwxrwxr-x  2 demouser demouser 4096 Nov  5 11:25 data
drwxrwxr-x  2 demouser demouser 4096 Nov  5 11:25 layouts
drwxrwxr-x 13 demouser demouser 4096 Nov  5 11:25 public
drwxrwxr-x  2 demouser demouser 4096 Nov  5 11:25 static
lrwxrwxrwx  1 demouser demouser    9 Nov  5 14:21 themes -> ../themes

上記を見るとわかるように、現在のディレクトリのテーマディレクトリは、実際にはホームディレクトリに複製したテーマリポジトリへのリンクにすぎません。

サイトをソース管理にコミットする

設定を構成してコンテンツを作成する前に、新しいサイトをGitリポジトリにする必要があります。

サイトディレクトリにいることを確認し、次のように入力して新しいgetリポジトリを初期化します。 

cd ~/my-website
git init
OutputInitialized empty Git repository in /home/demouser/my-website/.git/

次に、コードをリポジトリにコミットするために必要な基本的なgit構成アイテムをセットアップします。 これを行う最も簡単な方法は、git config --globalコマンドを使用することです。 gitがコミッターとして情報を正しく記録できるように、名前と電子メールアドレスを設定する必要があります。 

git config --global user.name "Your Name"
git config --global user.email "[email protected]"

デフォルトでは、gitは空のディレクトリをリポジトリにコミットしません。 Hugoでは、コンテンツが含まれていない場合でも、これらのディレクトリが存在する必要がある場合があります。 これを回避するために、これらの空のディレクトリのそれぞれに非表示の.gitkeepファイルを含めることができます。 これは、gitがHugoの実際の機能に影響を与えることなくディレクトリをコミットするのに十分です。

次のように入力することで、隠し.gitkeepファイルを各トップレベルディレクトリ（実際の.git隠しディレクトリを除く）に追加できます。 

for DIR in `ls -p | grep /`; do touch ${DIR}.gitkeep; done

次のように入力すると、非表示の.gitkeepファイルがすべての最上位ディレクトリに追加されていることがわかります。 

find . -name .gitkeep
Output./data/.gitkeep
./layouts/.gitkeep
./archetypes/.gitkeep
./static/.gitkeep
./content/.gitkeep

また、レンダリングされたサイトコンテンツがソース管理にnot追加されていることを確認する必要があります。 実際のHTML、JavaScript、およびCSSアセットは、ソース管理自体に保持されるのではなく、展開ごとに新たに生成される必要があります。 その場所を.gitignoreファイルに追加することにより、生成されたコンテンツが保存されるpublicディレクトリを無視するようにgitに指示できます。 

echo "public" >> .gitignore

これで、現在のディレクトリ内のすべてのコンテンツを追加してコミットすることにより、クリーンなサイトスケルトンをリポジトリにコミットできます。 

git add .
git commit -m 'Initial commit, pre-configuration.'

サイトの初期構成の調整

Hugoのメイン設定ファイルを調整して、Hugoがサイトを構築する方法を設定しましょう。

エディターでconfig.tomlファイルを開きます。 

nano config.toml

内部には、調整が必要ないくつかのアイテムがあります。

~/my-website/config.toml

baseurl = "http://replace-this-with-your-hugo-site.com/"
languageCode = "en-us"
title = "My New Hugo Site"

ファイルのサフィックスが示すように、このファイルはTOML languageを使用して書き込まれます。 これは主にキー、値、およびセクションを使用する単純な構成言語です。

変更する必要がある最初の項目は、baseurl項目です。 これは、サイトの構築時にURLを構築するために使用されます。 これを変更して、サーバーのドメイン名またはパブリックIPアドレスを参照します。 titleに割り当てられた値も編集する必要があります。 これは、サイトのタブまたはウィンドウタイトルを設定するために使用され、特定のテーマのページで使用されます。

~/my-website/config.toml

baseurl = "http://your_domain_or_IP/"
languageCode = "en-us"
title = "Your Site Name"

このファイルに追加する必要がある追加の設定がいくつかあります。 まず、好みのテキストエディターを設定できます。 このようにして、新しいページを生成すると、ページテンプレートがエディターで開かれ、動作するようになります。

デフォルトのテーマも設定する必要があります。 「nofancy」というテーマを使用して開始します。 後でコマンドラインでこれをオーバーライドして代替をテストし、適切な構成ファイルが見つかったら構成ファイルを編集できます。 また、優先するコードブロックスタイルを設定します。

~/my-website/config.toml

baseurl = "http://your_domain_or_IP/"
languageCode = "en-us"
title = "Your Site Name"
newContentEditor = "nano"
theme = "nofancy"
pygmentsStyle = "native"

this pageで利用可能な設定に関する詳細情報を見つけることができます。 ここでは、ファイルを保存して閉じます。

続行する前に構成の変更をコミットしましょう。 

git add .
git commit -m 'Initial configuration complete'

サイトの新しいページを作成する

これで、サイトコンテンツの作成を開始する準備が整いました。 Hugoのコンテンツは、使いやすいマークアップ言語を使用して記述されています。 ページのメタデータは、メイン構成ファイルで使用可能な同じ構成構文を使用して、「フロントマター」と呼ばれる各ページの特別なセクションで提供されます。

hugo newコマンドに続けて、作成するコンテンツへのパスを使用することにより、Hugoで新しいコンテンツを生成できます。 デフォルトでは、HugoコンテンツはMarkdownで記述されています。 HugoがMarkdownページからHTMLを正しく生成するためには、.md拡張子で終わるファイルを作成する必要があります。

概要ページを作成する

ホームページからリンクされるページと、ページに必要な相対パスは、主にテーマによって決まります。 GitHubでテーマのページを表示して、期待されることの詳細をご覧ください。 「nofancy」テーマには「about」ページへのリンクがあります。 そのページを作成することから始めましょう： 

hugo new about.md

about.mdという名前の新しいページがcontentディレクトリに作成されます。 構成ファイルでnewContentEditorオプションを設定しているので、ファイルはお好みのエディターで自動的に開かれるはずです。 開始するには次のようになります。

~/my-website/content/about.md

+++
categories = ["misc"]
date = "2015-11-05T16:58:58-05:00"
title = "about"

+++

ページの設定とメタデータは、ページの「フロントマター」で構成されます。セクションは、両側に「+」の行でマークされています。 デフォルトで含まれるフロントマターは、多くの場合、使用しているテーマによって定義されます。

現在のテーマには、生成されたページの前部に3つのアイテムが含まれています。 これらを調整したり、必要に応じてアイテムを追加したりできます。 Hugoで使用できる一般的な変数は、hereにあります。 選択したテーマは、独自のフロントマター変数を使用する場合もあります。 テーマの詳細については、Hugo theme repositoryでテーマのREADMEを確認してください。

重要な一般的なフロントマター項目は次のとおりです。

  • date：コンテンツの並べ替えに使用する日付

  • description：ページコンテンツの説明

  • draft：trueに設定されている場合、ページを公開の準備ができていないものとしてマークします

  • slug：コンテンツの代替URL名を指定する場合は、これを設定します

  • publishdate：特定の日付以降にのみページを作成する場合は、将来の日付に設定できます

  • title：ページのタイトル

とりあえず、「About」ページのタイトルを編集してみましょう。

~/my-website/content/about.md

+++
categories = ["misc"]
date = "2015-11-05T16:58:58-05:00"
title = "About Me"

+++

これで、下部の「+」の下にマークダウンテキストを追加できます。 これは、本文のHTMLテキストに変換されます。 いくつかの段落、見出し、およびEva HejdaからライセンスされたCreative Commonsの下でライセンスされた画像を追加します。

~/my-website/content/about.md

+++
categories = ["misc"]
date = "2015-11-05T16:58:58-05:00"
title = "About Me"

+++

Hello and welcome to my site!

## A Bit About Me

I like alpacas and I'm a fan of static sites.

![Great alpaca picture](https://upload.wikimedia.org/wikipedia/commons/c/c4/Alpaka_33444.jpg)

終了したら、ファイルを保存して閉じます。

最初の投稿を作成する

テーマが期待する場所であるため、コンテンツディレクトリのルートにabout.mdページを作成しました。 ただし、ほとんどの投稿はpostサブディレクトリに保存するのが最適です（一部のテーマでは、代わりにpostsサブディレクトリで投稿を検索します）。

「posts」ディレクトリに最初の投稿を作成しましょう。 Hugoは、ページを生成するときに必要な主要ディレクトリを自動的に作成します。 

hugo new post/My-First-Post.md

Markdownファイル名でダッシュを使用すると、自動入力されたタイトルのスペースに変換されます。

~/my-website/content/post/My-First-Post.md

+++
categories = ["misc"]
date = "2015-11-05T17:52:41-05:00"
title = "My First Post"

+++

不足しているメタデータを入力し、ページにマークダウンを追加します。 ここにコード例を追加して、Pygmentsツールが提供するコードの強調表示を確認できるようにします。 これを行うには、通常のMarkdownトリプルバックティックを使用してコードブロックを囲む代わりに、次のような2つのハイライトタグの間にコードを配置します。 

{{< highlight language >}}

code_goes_here

{{< /highlight >}}

これにより、Pygmentスタイリングがコード内に適用されます。 特定のテーマには、Pygmentスタイルの選択をオーバーライドするCSSファイルが含まれていることに注意してください。 <pre>タグには、多くの場合、Pygmentテーマの背景色を上書きできる追加のスタイルが適用されています。 ただし、特定のテーマはこの問題の影響を受けません。

ページ内では、完成したコンテンツは次のようになります。

~/my-website/content/post/My-First-Post.md

+++
categories = ["misc"]
date = "2015-11-05T17:52:41-05:00"
title = "My First Post"

+++

This is my first post on the site.  I hope that you like it!

## Welcome Function

Here is a little Python function to welcome you:

{{< highlight python >}}
def hello_world():
    print "Hello there!"
{{< /highlight >}}

完了したら、ファイルを保存して閉じます。 これらのページを後で編集する必要がある場合は、Hugoサイトのcontentディレクトリにあります。

新しいページをgitリポジトリにコミットしましょう。 

git add .
git commit -m 'First pages of our site'

サイトの構築と提供

Hugoは、Markdownファイルを取得し、構成およびテーマで定義された設定を適用し、訪問者に表示される実際のHTMLページをレンダリングできます。

サイトを構築するには、単に次のように入力できます。 

hugo

これにより、ページが生成され、レンダリングされたすべてのコンテンツがサーバーのpublicディレクトリに配置されます。 必要に応じて、このディレクトリのコンテンツをWebサーバーに転送して、コンテンツを展開および提供できます。

Note

[.note] ＃Hugoは、ビルドのたびに出力ディレクトリをクリーンアップしません。 これは、以前のビルドのpublicディレクトリに古いコンテンツが残っている可能性があることを意味します。 Hugo開発者は、各ビルドの後で（特に本番環境に移行する前に）publicディレクトリを削除して、コンテンツをすべて新しく再作成できるようにすることをお勧めします。
＃

Hugoには、独自のWebサーバーも含まれています。 本番トラフィックを処理するために使用したくない場合もありますが、ページを展開する前に作業コピーを表示し、レンダリングをテストする優れた方法です。

Hugoサーバーでページを利用できるようにするには、hugo serverコマンドを使用します。 これにより、ページがレンダリングされ（事前にhugoコマンドを実行する必要はありません）、Webサーバーが起動します。

--bindオプションを使用して、すべてのインターフェイスでサイトを利用できるようにすることを指定します（Hugoをローカルにインストールしている場合は、これを削除できます）。 また、--bindUrlオプションを含める必要があります。 構成ファイルでこれを設定しますが、現在のバージョンのHugoではサーバーによって選択されません。 これをウェブサイトのドメイン名またはIPアドレスに設定します。 

rm -r public
hugo server --bind=0.0.0.0 --baseUrl=http://your_domain_or_IP/

いずれかのページでdraft = trueを設定した場合、または一部のコンテンツでdateを将来の時間に設定した場合は、-Dと％（）を含めることで、これらのページを作成およびプレビューできます。 t3）sフラグそれぞれ： 

rm -r public
hugo server --bind=0.0.0.0 --baseUrl=http://your_domain_or_IP/ -D -F

ここで、Webブラウザでサーバーのドメイン名またはIPアドレスにアクセスし、最後に:1313ポート指定を追加すると、レンダリングされたサイトが表示されます。 

http://your_domain_or_IP:1313

Hugo test site

最初の投稿をクリックして、レンダリングされたマークダウンを確認できます。 Pygmentsスタイルがコードブロックに適用されました。

Hugo first page

[About]リンクをクリックすると、[About Me]ページに移動します。

Hugo about page

ご覧のとおり、私たちのテーマはかなり基本的なものですが、期待どおりに機能します。

別のテーマを試してみたい場合は、サーバー行の最後に--theme=オプションを追加できます。 

rm -r public
hugo server --bind=0.0.0.0 --baseUrl=http://your_domain_or_IP/ --theme=redlounge

各テーマには、ディレクトリ構造と構成設定に関する独自の期待があることに留意してください。 新しいテーマを正しく動作させるには、いくつかの調整が必要になる場合があります。

従来のWebサーバーのようにHugoを使用してポート80でコンテンツを提供する場合は、コマンドラインに--portオプションを追加する必要があります。 また、1024未満のポートは通常のユーザーに制限されているため、コマンドの前にsudoを追加する必要があります。 

rm -r public
sudo hugo server --bind=0.0.0.0 --baseUrl=http://your_domain_or_IP/ --theme=redlounge --port=80

これで、ポート番号を追加せずにブラウザウィンドウでサイトにアクセスできるようになります。

Hugoサーバーをsudoで実行した後、rmコマンドの前にsudoを付ける必要があります。 

sudo rm -r public

結論

Hugoは、サイトをすばやく簡単に作成するのに最適な方法です。 静的サイトは、従来のCMSサイトに代わるリソース集約型の代替手段を提供します。 ほとんどのユーザーは、データベース駆動型のコンテンツを必要とせず、コンテンツ管理システムが提供する追加機能を使用しません。 Hugoを使用すると、複雑なシステムを管理する代わりに、コンテンツの作成にエネルギーを集中できます。

next guideは、Gitフックを使用してHugoサイトをデプロイする方法をカバーすることにより、このセットアップをさらに一歩進めます。

Related