Hugoで静的サイトを作る(1) インストール ～ 動作確認

Sponsored Link

ブログを始めるにあたってWordpressだと運用が面倒なので静的コンテンツ系(Jekyll、Octpress、Middleman)でやっていくか、前使ったことのあるMiddlemanでいくか、と思ったのですが、コンテンツ生成速度はhugoがとても速い、と評判なので今回はhugoを使ってみることにしました。

Hugoをインストールする

macであればbrew installすればよいのですがLinuxなのでreleasesから最新版のバイナリをダウンロードしてきました。 必要に応じてURLやファイル名は変更する必要があります。

バイナリの配置先は/usr/local/bin/にしており、既にpathが通っています。 hugo versionで動作確認を行い問題ないことが確認できました。

$ wget https://github.com/gohugoio/hugo/releases/download/v0.29/hugo_0.29_Linux-64bit.tar.gz
$ sudo tar -C /usr/local/bin/ -zxvf hugo_0.28_Linux-64bit.tar.gz hugo
$ rm hugo_0.28_Linux-64bit.tar.gz
$ hugo version
Hugo Static Site Generator v0.27.1 linux/amd64 BuildDate: 2017-09-13T20:04:10+09:00

スケルトン作成

まずはスケルトンを作成します。最低限必要なファイルやディレクトリが作成されます。

$ cd /path/to/dir/
$ hugo new site .
$ tree
.
├── archetypes
│   └── default.md
├── config.toml
├── content
├── data
├── layouts
├── static
└── themes

対象のディレクトリでgit initした後だったので、下記のようなエラーが出ました。

already exists and is not empty

このため実際にはhugo new site . --forceを実行しています。.gitが上書きされることはありません。

生成されるファイル/ディレクトリの意味は下記の通りです。 archetypes以外のディレクトリは作成されますが空です。

  • archetypes … contentのテンプレートを配置するディレクトリ
  • config.toml … 設定ファイル
  • content … 記事のmdファイルが配置されるディレクトリ。サブディレクトリを作成するとセクションとして認識される
  • data … 複数ページで共通で使用するデータをデータファイルに記述して配置するディレクトリ
  • layouts … レイアウトファイルを配置するディレクトリ
  • static … .cssや.js等のスタティックなファイルを配置するディレクトリ
  • themes … テーマを配置するディレクトリ
Sponsored Link

Themeを導入する

自分でテーマをゼロから作る手間を省きたかったので、Hugo Themesから気に入ったものを選びます。 今回はRobustを選びました。

公式のクイックスタートに則り、リポジトリへsubmoduleとして追加します。 ｇｇるとcloneしてから.gitを削除するケースが見られますが、themeのアップデートに追従できる点や、自分のリポジトリへ他のリポジトリのコードを含めない点を考えるとsubmoduleで管理した方がよろしいと思います。

また、config.tomlへthemeの設定を記述することでビルド時等にthemeを明示的に指定しなくても済むようになります。これもｇｇるとビルド時にパラメータを指定している例が散見されますが、ビルドする度に変更するような運用はしないと思うので、config.tomlへ記載する方が良いと思います。

git submodule add https://github.com/dim0627/hugo_theme_robust themes/robust
$ echo 'theme = "robust"' >> config.toml

ひとまずの動作確認

さて、このあたりで一度内容を確認してみたいのですが、記事が無いのであまり確認する要素がありません。 ということでダミーデータを登録してから、hugoの動作確認を行います。

下記コマンドでコンテンツを追加します。

$ hugo new post/2017/09/helloworld.md
/path/to/dir/content/helloworld.md created

architype/default.mdに従い、下記ファイルが生成されました。 titleは頭文字が自動的に大文字になっていますね。

$ cat content/post/2017/09/helloworld.md

---
title: "Helloworld"
date: 2017-09-27T21:36:39+09:00
draft: true
---

このファイルの末尾に適当な文字列を追記してから、下記コマンドを実行することで組み込みhttpサーバが1313/tcpで起動します。

このファイルはテスト用のコンテンツなので、今後本番環境では見れないようにしたいです。そういった場合はFrontMatter(ファイル先頭の---で囲まれた部分)にdraft: trueと記述します。

hugo new site .で生成されたアーキタイプでは、コンテンツ作成時のデフォルトはdraft: trueです。 単純にhugo serverするとdraft: trueのコンテンツはレンダリングされないので、-Dオプションを付けて起動します。

hugo server -D

themeが適用され、コンテンツのタイトルがトップページに表示されていれば動作確認は完了です。

この次は

ここまでで、ひとまずHugoを使う準備ができましたこの次は、テーマの調整など、細かい部分をカスタマイズしていきます。

Sponsored Link
Next Article