焼肉が食べたい

ただの日記です。技術的に学んだことも書こうと思っていますが、あくまで自分用メモです。

GitHub PagesとHUGOでブログサイトを構築する

はじめに

ブログサイト構築について、 WordpressGitHub Pages+HUGO→medium→はてな ということで、現在はてなに落ち着いている。 せっかく試したので、GitHub Pages+Hugoでのブログサイト構築についてもメモしておく。

HUGO環境構築

まずgoをインストールする。

wget https://storage.googleapis.com/golang/go1.8.linux-amd64.tar.gz
sudo tar -C /usr/local -xzf go1.8.linux-amd64.tar.gz

※ バージョンやOSは環境にあった最新版のものを確認してインストールすること。 goのダウンロード資材のURLはこちら

~/.profileに追記

export PATH=$PYENV_ROOT/bin:$PATH:/usr/local/go/bin
export GOPATH=$HOME/go

追記したら環境変数の変更を現在のセッションに反映すること。

source ~/.profile

続いてHUGOのインストール

go get -v github.com/spf13/hugo
hugo version # インストールしたら、バージョンの確認を行う。
# Hugo Static Site Generator v0.2-DEV linux/amd64 BuildDate: 2017-02-27T23:55:32+09:00

HUGOで新しいサイトを構築する。

cd /pass/to/
hugo new site myblog  # myblogは新しく作成するサイトの名称

基本的な使い方をメモしておく。

  • テーマの利用 HUGOのテーマのページから、気に入ったテーマをクローンして利用する。 私はHugo-Octopressを選んだ。テーマは自分でカスタマイズすることも可能。
 cd /pass/to/myblog/
 git clone https://github.com/parsiya/Hugo-Octopress.git themes/Hugo-Octopress

このサイトのテーマとかかわいくてシンプルでいいなぁ、と思うので、参考にしてカスタマイズしてみたい。

  • 設定ファイル 基本的な設定ファイルは、config.tomlを利用する。Hugo-Octopressの中にsample-config.toml が含まれていたので、それをテンプレートとして利用した。
cp /pass/to/myblog/themes/Hugo-Octopress/sample-config.toml /pass/to/myblog/
  • 新しいコンテンツの投稿 新しいコンテンツを投稿するには、以下のコマンドを実行する。
hugo new post/test.md
# /pass/to/myblog/contents/post/test.mdが作成される。

/pass/to/myblog/contents/post/test.mdを開くと、以下のヘッダが記述されている。ページの内容はヘッダの下にマークダウン形式で記述する。

+++
title = "test"
type = "post"
date = "2017-03-23T16:01:06+09:00"
+++

ブログの要素として、categoriesやtags、authorなども記述しておきたい場合は、/pass/to/myblog/archetypes配下に、 default.md、もしくはpost.mdを配置しておくと、その要素も含めたヘッダを作成してくれる。

cat default.md
# +++
# categories = ["未分類"]
# tags = [""]
# description = ""
# draft = true
# author = "chie8842"
# type = "post"
# +++

default.mdに記述した場合はすべてのコンテンツ、post.mdに記述した場合はpost/*.mdに対してのみ反映される。 詳しくはArchetypesのページ参照。

$ ~/go/bin/

  • ローカルにWebサーバをたててサイトの内容を確認する

    hugo server --theme=Hugo-Octopress-Orange --buildDrafts --baseURL=WebサーバのIPアドレス --bind=0.0.0.0 --disableLiveReload=false --watch

    オプションについて一部説明する。

    • –bind 今回Ubuntuでたてた仮想サーバ上でHUGOを動かしており、ホストのWindows上で画面を確認をしたかったが、デフォルトだとローカルからしかHUGOでたてたWebサーバへのアクセスができないため、–bindオプションで全てのNICのアドレスをバインドして、ホスト側から閲覧可能なようにした。
    • –buildDrafts HUGOでは、下書きと公開用のコンテンツを、コンテンツのヘッダのdraft = true/falseで判別している。デフォルトでは、draft = falseのコンテンツのみ静的コンテンツのジェネレートを行うが、下書きの確認をしたい場合は、–buildDraftsオプションを利用する。
    • –disableLiveReload, –watch disableLiveReloadはHUGOでサイトをrebuildしたときにブラウザをリロードするかどうかの設定。watchはファイルシステムを監視して変更があった場合はリクリエイトする設定。サイトの内容をリアルタイムに確認しながら編集したい場合に使用するとよい。
  • アップロード用のページをジェネレートする

hugo

上記のコマンド一発で、config.tomlのpublishDirで指定したディレクトリ配下に、サイトのHTML/CSS/JSなどのファイルが作成・格納される。

Wordpressからの移行

Wordpressに投稿したブログの移行もやってみた。

ブログを Wordpress から Hugo に移行したを参考にした。

Wordpressには、wordpress-to-hugo-exporterというHUGOへの移行のためのプラグインがあるので、それを利用する。 ちなみに、他のブログサイトとの間の移行ツールもいろいろあり、以下にまとまっている。 https://gohugo.io/tools/

GitHubでの管理と、GitHubページの設定

以下のような構成で管理するようにした。

├── myblog --> masterブランチ
│   ├── archetypes
│   ├── config.toml
│   ├── content
│   ├── docs(HUGOでジェネレートされたファイルのディレクトリ) --> gh-pagesブランチ→GitHub Pagesで公開
│   ├── layouts
│   ├── static
│   └── themes ── mytheme --> themeブランチ

尚、GitHub PagesはデフォルトだとJekyllを使ってビルドしようとする。今回はJekyllは利用しないので、docsディレクトリ配下には、.nojekyllという名前のファイルを作成しておく。

touch /path/to/myblog/docs/.nojekyll

使ってみての所感

使ってみて、いいな、と思ったところは以下のとおり。 * マークダウンで記事がかける。 * githubで記事を管理できる。 * サイトの管理にお金がかからない。 * カスタマイズできる。アフィリエイトなども自由にできる。

一方で、以下の点で使い勝手が悪かった。 * HUGOをインストールしたPCからでないと、記事がアップできない。 * HUGO自体に不具合があったときに、GO言語に詳しくないので直せなくて困る。 * テーマがあまり豊富でない。かわいい系のテーマがない。  気に入ったものを自分で作る必要があるがそこに時間をかけたくない場合は面倒。 * SEO対策を自分でがんばらないと、最初は全然見てもらえない。 * 全てマークダウンで記事を書くので、表現に制約がある。 * 画像を載せるときとか、小さく表示しておいてクリックしたらポップアップしたい、とかそういうかゆいところは自分で頑張って実装する必要がある。

最終的に、サイトは見やすくしたいけど自分でメンテするのに労力をかけたくなかったので、一旦はてなに移った。 また時間ができたらいじってみようと思う。

最後に、一応HUGOで作ったサイトのURLを載せておく。 https://chie8842.github.io/blog/

参照

Go言語のページ: https://golang.org/
HUGOのドキュメント:https://gohugo.io/
HUGOのテーマのページ: http://themes.gohugo.io/
GithugPagesのページ:https://pages.github.com/