ブログをhugoに移転しました。

過去に書いていたlivedoor ブログから静的サイトジェネレータのhugoベースのブログに移転しました。 前のブログの最終更新日が2014年3月31日なので、約3年ぶりの更新ですね。
http://blog.livedoor.jp/webprog/

なぜhugo?

前のlivedoorブログだとマークダウンが使えなくてコード、コマンドなどを含んだ記事が書きづらかったです。 またブログ1記事に色々情報を付けたして質を上げていたので、記事投稿に時間がかかりブログ更新頻度が落ちていきました。
(誰も見ていないのに質(笑)っていう感じですけど、地味にYahoo砲で一日に1万PVまで言った事もあったり)

なので技術メモや勉強会内容などをサクッとマークダウンでまとめて、すぐブログに上げれるようにしたいなーと思ったので静的サイトジェネレータを色々調べたりさわったりしました。 一時期WordPressに引っ越しも考えていたのですが、脆弱性対応など管理面でも静的サイトジェネレータは良いですね。あとgitで差分管理出来るし。

ツール名 説明
hugo golangで実装。FreeBSD , Windows環境でも動く。生成時間がめちゃくちゃ早い。
Pelican pythonで実装。plugin豊富。当然Python入れないといけない。

他にもruby系のツールもありましたが、ruby全然さわっていないので上記2つ試してhugoを選びました。 やはりgolangだけあって、バイナリ落とすだけで様々なOS環境で使えるのは良いです。
ページ生成の時間は下の動画の通り、とても早いです。

使い方とか

公式docのチュートリアルが良く出来ているので追っていけば大体分かります。

# 記事作成
hugo new post/blog.md
# ローカルでwebサーバを立てて確認
hugo server -w --port=8080 --baseURL=http://i{local IP}/ --bind={local IP} --theme=hugo-icarus-theme --buildDrafts --renderToDisk -v

コマンド記載の通り、themeはhugo-icarus-themeを使いました。
themeがレスポンシブデザインなので、スマホでもちゃんと見れますね。 テンプレートをすぐ代えて、色々なデザインを試せれるのも良かったです。
(theme毎にconfig.toml内の固有変数があるので、必ずしもすぐ切り替えることは出来ませんが)

hugoを使ってみて

動作軽快で非常に良いです。特にLiveReloadが便利!
hugo server-wつけるとfsnotifyでファイル変更を検知して、開いているブラウザを自動更新してくれます。

livedoorブログ時代はプレビューボタン何回も押しまくっていたのですが、hugoだとvimで編集、保存した瞬間ブラウザのリロードが走ってブラウザから確認出来ます。
これだけでもhugoに引っ越して良かったと思えるぐらい便利機能です!
LiveReloadでつまづいたところは、twitterでも書いたのですが、FreeBSDに元から入っているviだとfsnotifyでCREATE or WRITEを検知出来ませんでした。
あとはtheme編集中などでfooterのタグがおかしくなってlivereload.jsが正しく読めてなかったりして、Reload出来なかったりとか。

themeの変更点とか

以下の部分を変更しました。

  • フォントをWebフォントのGoogle Fontsに変更
  • 3カラム表示される場合、プロフィール配下にtwitterが表示されるように変更

フロントエンド久々だったのでCSS3の@media screen とか初めて使った。

近況とか

Twitterではたまにツイートしていましたが、社会人になって学生の頃作っていたWebアプリとかまったくさわっていないです。。
どちらかというと仕事がインフラよりというのもあるのですが、学生の頃に比べて好き勝手にコード書かなくなったのは良くないなーと思っています。
なのでブログ引っ越しを機に、アウトプットする習慣を身に着けたいと思います。 あとエンジニアとして働いても1年で習得できた技術とか振り返ったり出来ていないので、ブログに書いて記録に残したいですね。

まずは月1ぐらいのペースで、アウトプット出来るようにサクッと更新していきたいと思います。

Share Comments
comments powered by Disqus