how-to-install-and-use-hugo-a-static-site-generator-on-ubuntu-14-04

投稿日: 2019-11-08 2019-11-19
タグ: Applications, ubuntu

前書き

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

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

前提条件

このガイドに従うには、Ubuntu 14.04サーバーにアクセスする必要があります。このサーバーでは、管理タスクを実行するために、 `+ sudo `権限が設定された非rootユーザーが必要です。「 sudo +」ユーザーを作成する方法については、https：//www.digitalocean.com/community/tutorials/initial-server-setup-with-ubuntu-14-04 [Ubuntu 14.04初期サーバーセットアップガイドに従ってください。 ]。

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

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

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

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

uname -i

以下が表示される場合、Ubuntuの* 64ビット*インストールを実行しています。

Outputx86_64

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

Outputi686

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

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

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

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

* 64ビットバージョンのUbuntu *を使用している場合は、「+ amd64.deb +」で終わるリンクを右クリックして、リンクの場所をコピーします。
Ubuntu の 32ビットバージョンを使用している場合は、「+ i386.deb +」で終わるリンクを右クリックして、リンクの場所をコピーします。

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

cd ~
wget https://github.com/spf13/hugo/releases/download/

これで、次のように入力して、 `+ 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`を使用して + Pigments`をインストールできます。

sudo pip install Pygments

これにより、選択した場合、投稿コンテンツに300以上の言語をサポートする構文強調コードブロックを含めることができます。詳細については、http：//pygments.org/ [プロジェクトのページ]をご覧ください。

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

最初のサイトで作業を開始する前に行う最後の1つは、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 ~/

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

cd ~/
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

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

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

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

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

cd ~/
git init

OutputInitialized empty Git repository in /home///.git/

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

git config --global user.name ""
git config --global user.email ""

デフォルトでは、 `+ 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

また、レンダリングされたサイトコンテンツがソース管理に追加されないようにする必要もあります。実際の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"

ファイルの接尾辞が示すように、このファイルはhttps://github.com/toml-lang/toml[TOML言語]を使用して記述されます。これは主にキー、値、およびセクションを使用する単純な構成言語です。

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

〜/ my-website / config.toml

baseurl = "http:///"
languageCode = "en-us"
title = ""

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

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

〜/ my-website / config.toml

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

利用可能な設定に関する詳細情報は、https：//gohugo.io/overview/configuration/ [このページ]で見つけることができます。ここでは、ファイルを保存して閉じます。

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

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 of」ディレクトリに新しいページが作成されます。設定ファイルに `+ newContentEditor +`オプションを設定しているため、ファイルはお好みのエディターで自動的に開かれます。開始するには次のようになります。

〜/ my-website / content / about.md

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

+++

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

現在のテーマには、生成されたページの前部に3つのアイテムが含まれています。これらを調整したり、必要に応じてアイテムを追加したりできます。 Hugoで利用可能な一般的な変数は、https：//gohugo.io/content/front-matter/ [here]にあります。選択したテーマは、独自のフロントマター変数を使用する場合もあります。テーマの詳細を取得するには、https：//github.com/spf13/hugoThemes/ [Hugoテーマリポジトリ]でテーマのREADMEを確認してください。

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

日付：コンテンツの並べ替えに使用する日付
* description *：ページコンテンツの説明
* draft *：trueに設定されている場合、公開の準備ができていないページをマークします
* slug *：コンテンツの代替URL名を指定する場合はこれを設定します
* publishdate *：特定の日付以降にのみページを構築する場合、これは将来の日付に設定できます
* title *：ページのタイトル

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

〜/ my-website / content / about.md

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

+++

これで、下の「+」の下にマークダウンテキストを追加できます。これは、本文のHTMLテキストに変換されます。 Creative Commonsでライセンスされているいくつかの段落、見出し、および写真をhttp：//fotos.naturspotから入手できるように追加します。 .de / [Eva Hejda]気に入ったもの：

〜/ my-website / content / about.md

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

+++

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  >}}



{{< /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 of`ディレクトリで見つけることができます。

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

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

サイトの構築と提供

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

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

hugo

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

Note

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

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

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

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

いずれかのページで `+ draft = true `を設定するか、コンテンツの一部で ` date `を将来の時間に設定する場合、 ` -D `と ` -F + `フラグ：

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

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

http://:1313

image：https：//assets.digitalocean.com/articles/hugo_installation_1404/main_page.png [ヒューゴテストサイト]

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

image：https：//assets.digitalocean.com/articles/hugo_installation_1404/first_page.png [ヒューゴの最初のページ]

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

image：https：//assets.digitalocean.com/articles/hugo_installation_1404/about_page.png [Hugo about page]

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

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

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

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

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

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

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

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

sudo rm -r public

結論

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

https://www.digitalocean.com/community/tutorials/how-to-deploy-a-hugo-site-to-production-with-git-hooks-on-ubuntu-14-04 [次のガイド]はこのセットアップは、Git Hooksを使用してHugoサイトを展開する方法をカバーすることにより、さらに一歩進んでいます。

getdocs

13036