porgy13

Hugoでブログをつくった

Go言語製のHugoでブログを作成しました。 他にも静的サイトを構築するフレームワークは MiddlemanOctopress などがあると思いますが、速いと噂のHugoにしてみました。
Hugoでのブログ開設までにやったことを書いておきます。

使ったコマンドまとめ

$ brew install hugo # hugoのインストール
$ hugo new site my_site # hugoプロジェクトの作成
$ hugo new post/first.md # 記事の作成
$ hugo server --buildDrafts --watch #プレビュー
$ hugo # ビルド

1. Hugoインストール

Hugoをインストールします。homebrewを使えば簡単です。
HugoはGo言語で書かれており、Goでもインストールできるとのこと。

$ brew install hugo
$ hugo version
Hugo Static Site Generator v0.13-DEV buildDate: 2015-01-16T17:30:39+09:00

2. Hugoを使ってみる

プロジェクトの作成

Hugoのプロジェクトを作成します。

$ hugo new site my_site

作成すると、以下のようなディレクトリが作成されているはずです。

$ tree my_site
my_site
├── archetypes
├── config.toml
├── content
├── layouts
└── static

treeコマンドは、brew install treeでインストールできます。

テーマの適用

テーマをひとつダウンロードしてみます。

$ cd my_site
$ git clone git@github.com:SenjinDarashiva/hugo-uno.git themes/hugo-uno

ダウンロードしたテーマを利用するように、設定ファイル(config.toml)を修正。

baseurl = "http://yourSiteHere"
languageCode = "en-us"
title = "my new hugo site"
theme = "hugo-uno"

プレビューしながら記事を書く

これでブログの枠はできましたので、記事を書いてみます。

$ hugo new post/first.md
$ tree
.
├── archetypes
├── config.toml
├── content
│   └── post
│       └── first.md
├── layouts
└── static

content配下にpost/first.mdが作成されています。
first.mdに記事をマークダウンで書きます。

+++
date = "2015-02-01T10:10:16+09:00"
draft = true
title = "first"

+++

Hugoでの初記事。

書いたら、プレビューします。
以下のコマンド実行後に http://localhost:1313/ で見れるようになります。

$ hugo server --buildDrafts --watch

オプションで–buildDraftsと–watchをつけると便利です。

  • –buildDrafts : ドラフトの記事も表示する
  • –watch : 更新をリアルタイムで反映する

ビルド

$ hugo

public配下にいろいろと出力されたのがわかります。

参考

もっと読む