Hugoで静的なブログを作成する

このブログはHugoを使用してGithub.io上に建てている。
静的Webサイトジェネレータは有名どころだとRailsのJekyllOctopress、PythonのPelican、NodeのHexoなどが存在するが、 Hugoは速さを売りにしている。

Why Hugo?

  1. Golangで書かれている。I’m gopher!!
  2. モダンなThemesが揃っている

Hugoをインストールする

  1. brew install hugoを実行してhugoをインストール1
  2. hugoコマンドでサイトのベースを作成する
$ hugo new site <YOUR_SITE_NAME>
$ tree .
.
├── archetypes: : 独自のプロパティ定義
├── config.toml : サイトのTitleや説明、テーマなど全体設定のファイル
├── content : ブログ記事等、サイトの中身を格納する
├── data : TOML, JSONなどの設定ファイル
├── layouts : 静的サイトを作成する時の変換レイアウトの指定
├── static : CSSやJavaScriptを配置する
└── themes : サイトのテーマを格納する

6 directories, 1 file
  1. hugo serverで起動し、localhost:1313にアクセスする

1. OSX以外の場合はReleasesから該当のバイナリをDLしてPathを通す

テーマを変更する

テーマのここ一覧はここで見ることができる。
今回は例としてこのブログに使われているcactusを使う。

  1. テーマのディレクトリに移動する
cd themes
  1. テーマをGit cloneする
git clone https://github.com/digitalcraftsman/hugo-cactus-theme.git
  1. repositoryのルートに戻り、config.tomlにテーマを追加する
$ cat config.toml | grep theme
theme = "hugo-cactus-theme"

他の設定については、themes/hugo-cactus-theme/exampleSite/config.tomlを参考にするとよい

  1. サーバを起動し、テーマが反映されていることを確認する
hugo server

おそらく、シンプルな画面が表示されるだろう。

次回

記事と固定ページの作成あたりについて書く。
=> Hugoで記事と固定ページを書く

comments powered by Disqus