hugo + github pagesでブログを作る。

今回はHugoとgithub pagesを使ってシンプルなブログを構築してみます。

hugoとは

hugoはgolang製のStatic site generator(静的サイトジェネレーター）と呼ばれるものです。 DBを必要としないので、一般的なCMSに比べて表示速度が早いのが特徴です。
マークダウンも使えます。

開発環境環境

macbook Air OS 10.12.3です。
node.js、及びhomebrewはインストール済み。

hugoのインストール

$ brew install hugo

hugoのバージョン確認

$ hugo version

サイト（ディレクトリ）の作成

$ hugo new site your-site-name
$ cd your-site-name/;

テーマの追加

まずはテーマを選択
hugoのテーマ一覧

好きなテーマを選び、gitのアドレスをコピーして次のコマンドを入力

$ git clone https://github.com/lasseborly/anybodyhome.git themes/cocoa (←テーマ名)

config.tomlの設定

テーマの詳細(github)ページ内にconfig.tomlのサンプルがあるので、
そちらを参考に設定します。コピペして変更を加えていくだけです。

設定が終わったら一度ローカル環境で確認してみましょう。

$ hugo server

と入力するとローカルサーバーが立ちがります。
ブラウザのアドレスバーに
http://localhost:1313/
と入力するとページが確認できます。

記事を書く

ターミナルに

$ hugo new post/my-new-post.md

と入力し新規エントリーを作成。
markdownで書いていきます。

マークダウン記法について

エントリーの入力が終わったら、 $ hugo server で再度ローカルサーバーを起動し確認します。

githubへのアップロード

確認ができたらいよいよページの公開です。 $ hugo コマンドで書き出されたファイル（私はdocsに設定）をアップロードします。

$ cd docs/
$ git init
$ git remote add origin git@github.com:user_name/your_gh_pages.git
$ git checkout -b gh-pages
$ git add --all
$ git commit -m'initial commit for gh-pages'
$ git push origin gh-pages

[コマンドのざっくり説明]

  hugoを実行すると”docs”フォルダに公開用のファイルが書き出されます。
  1 まずはこのディレクトリへ移動します。
  2 gitの初期設定
  3 githubの設定
  4 gh-pagesのブランチを作成し、ブランチへ移動
  5 すべてをステージに上げる
  6 コミット
  7 プッシュ

という流れです。

すると https://user_name.github.io/your_gh_pages/ で見られるようになります。

2回目以降は

$ hugo new post/my-new-post.md

で記事を追加し、

$ git checkout gh-pages
$ git add --all
$ git commit -m'initial commit for gh-pages'
$ git push origin gh-pages

でアップする。
という流れになるかと思います。