> Computer Science
更新日：2021.10.17　 作成日：2019.10.11

Hugoでローカル環境にWebサイトを構築する

Framework | Hugo | Static Site Generators |

はじめに

　自身の知識の整理や、なにかしらの情報発信の場が欲しいなと思ったことがサイト構築のきっかけです。
構築するにあたり下記のような考えに沿ったサービス/ツールを検討したところ、Hugoに出会いました。 その際の知見を簡単にまとめておきます。

  • 自分でデザインしたい。
  • コンテンツ管理を自分でしたい
  • できるだけ維持費をかけず構築・運用をしたい
  • Markdownで気軽に記載したい
  • セキュリティ対応に時間をかけたくない

まず、所感を確かめるために、Hugoのインストールとローカル上でサイトを構築します。

Hugoとは

　HugoとはGo言語で書かれたWebサイトを構築するための静的サイトジェネレータ(Static Site Generators)のことです。 静的サイトジェネレータはデータベースやRuby/Python/PHPなどのサーバサイドスクリプトに依存することなくサイトを構築することができます。

ローカル環境にWebサイトを作成する

1：Hugoのインストール

公式のQuick Startに従い、Hugoのインストールを実施します。
※Homebrewとgitが導入されていることが前提となります。(僕のPC環境はMacOSです。Mac最高。)

$ brew install hugo

次にHugoのバージョンを確認し、インストールが正常に終了したことを確認します。
下記のようなコメントが出れば、無事インストールできています。

$ hugo version
  Hugo Static Site Generator v0.57.2/extended darwin/amd64 BuildDate: unknown

2：新しいサイトを作成する

自分で指定したフォルダにHugoサイトを作成します。
今回は「exa_project」と言う名のフォルダで作成します。

$ hugo new site exa_project #hugo new site [任意のフォルダ名]
Congratulations! Your new Hugo site is created in /Users/somei/exa_project.

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.

作成したフォルダは、以下のような構造で構成されています。

$ tree
.
├── archetypes
│   └── default.md
├── config.toml
├── content
├── data
├── layouts
├── static
└── themes
$

3：テーマを追加する

今のままでは設定が入っておらず何も表示されません。
自分でサイトの装飾を作ることもできるのですが、今回はHugo Themes(Complete List)からテーマを選び、設定を反映します。

今回はPatrick CollinsさんのHugo Future Imperfect Slim のテーマを使用してみます。

/themes/ に移動し、hugo-future-imperfect-slim.gitをインストールします。

$ cd themes #themesフォルダの配下にテーマを保存します
$ git init
$ git clone https://github.com/pacollins/hugo-future-imperfect-slim.git

次に下の図のように、/themes/hugo-future-imperfect-slim/exampleSite/ の中にあるファイルを全てコピーし、 /exa_project/の階層に貼り付けます。※もともと存在する同じファイルやフォルダは削除/上書きしてしまって大丈夫です。
※選択したThemeのGitHub上に、テーマ適応の手順が記載されているので、見てみてください。

1


4：Hugoサーバーを起動する

作業ディレクトリを/exa_project/に移動し、ドラフトを有効にしてHugoサーバーを起動します。

$ hugo server -D //-Dがドラフトを有効にするコマンド

                   | EN | DE | FR | PL | PT  
+------------------+----+----+----+----+----+
  Pages            | 26 | 14 | 23 | 23 | 16  
  Paginator pages  |  2 |  0 |  2 |  2 |  0  
  Non-page files   |  0 |  0 |  0 |  0 |  0  
  Static files     | 12 | 12 | 12 | 12 | 12  
  Processed images |  0 |  0 |  0 |  0 |  0  
  Aliases          |  7 |  3 |  5 |  5 |  3  
  Sitemaps         |  2 |  1 |  1 |  1 |  1  
  Cleaned          |  0 |  0 |  0 |  0 |  0  

Total in 249 ms
Watching for changes in /Users/somei/exa_project/{archetypes,content,data,layouts,static,themes}
Watching for config changes in /Users/somei/exa_project/config.toml
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

起動したらWebブラウザで http://localhost:1313/ にアクセスします。
以下のようなサンプル画面が表示されれば、テーマ適用され、ローカル環境でWebサイトの表示が完成となります。

1

参考