Hugoでブログを書く
June 30, 2016
こんにちは、 @hokumaです。
いろいろあって、ブログ始めました。
初回としては、Hugoを使って、このブログを世間様に公開するまでにしたことを記事にしてみます。
Hugoとは
静的サイトのGenerator。Go製。他のGeneratorを使い込んだことがないので比較できませんが、 サイト生成が早い、というのが今の所理解できている特徴の一つです。
Install
私はmacを使っているので、brewでinstallします。
brew update & brew install hugo
記事生成
コマンドを使います。
hugo new blog/writing-blog-with-hugo.md
blog
部分はカテゴリみたいなもの、という理解ですが、正確なところはこれからです。
writing-blog-with-hugo.md
が記事名となります。
コマンドを実行すると、`ブログのルート/content/post/writing-blog-with-hugo.md'というファイルが 生成されます。
ファイルを見ると、
+++
date = "2016-06-26T21:19:57+09:00"
draft = true
title = "writing blog with hugo"
+++
となっています。date
は生成された日付、draft
は記事の状態、title
はファイル名から自動的に生成されたタイトルです。
Title部分は内容に合わせて変えましょう。
Preview
ここまで書いたら、記事をpreviewするためにサーバを起動します。
hugo server
動的に記事を生成してくれるサーバが立ち上がるので、http://localhost:1313/ にアクセスしてみましょう。
ページアクセスはできても、真っ白の画面になります。
hugoは、デフォルトではdraft
状態の記事を生成しないからです。
draft
状態の記事をプレビューするには、以下のコマンドで起動します。
hugo server --buildDrafts
残念。これでもダメです。
あともう一つ必要なものがあります。
それは、themeです。
Theme選択
Themeはサイトデザインを決定するcssやhtmlファイル群です。
自分で作成することもできますが、https://themes.gohugo.io/ に既成のものがあるので、今回はその中からcactus
を使うことにしました。
hugo new
で雛形を作っているのであれば、themes
フォルダがルートにあるはずです。。そこに移動しましょう。
cd themes
git clone https://github.com/digitalcraftsman/hugo-cactus-theme.git
cd ..
config.toml
の中身は、とりあえずこんな感じにしました。
適宜自分のサイトの情報に置き換えてください。
baseurl = 'http://blog.hokuma.net/'
languageCode = 'ja'
hasCJKLanguage = true
theme = 'hugo-cactus-theme'
title = "hokuma's blog"
[params]
name = 'hokuma'
description = ''
bio = 'Web Engineer'
twitter = 'halhide'
enableRss = true
iconFont = 'mono-social'
socialIconStyle = 'circle'
[social]
twitter = 'https://twitter.com/halhide'
github = 'https://github.com/hokuma'
profile画像を変えるには、static/images/avatar.png
に表示したい画像ファイルを置いてください。retina対応の為に、static/images/avatar@2x.png
も必要となります。
hugo server -buildDrafts
公開
記事の状態をpublicにします。ファイル内のdraft
をtrue
に直接編集しても良いですが、以下のコマンドでも可能です。
hugo undraft content/blog/writing-blog-with-hugo.md
静的サイトの生成
wordpress等と違い、hugoはあくまで静的サイトのgeneratorです。Amazon S3などにおいてインターネットに公開するには、themeが当たった状態の静的なhtmlファイル群を生成する必要があります。
そのためのコマンドは以下です。
hugo
実行するとpublic
フォルダが生成されます。フォルダの中身をS3に置くなり、github pageで公開するなりなんなりしてください。
以下、生成物です。 http://blog.hokuma.net
S3のブログ用のbucketを向いたCNAMEを設定して運用しています。