Hexo でブログをつくるまで

Aug 11, 2015

これまで技術的に調べたことは、GitHub の Tips 専用リポジトリに issue に書いて公開していた。Markdown で書けるのはもちろん、画像のアップロードもドラック&ドロップでできるし、コメント欄もタグの絞り込みも検索も用意されているので、ブログツールとしてなかなか便利だなーと思っていたんだけど、いいねボタンとかはてなスターとかリアクションがもらえないし、フィードもわかりやすく吐けないし、デザインもいろいろいじってみたいな！と思い、よしブログを作ろうと思ったのでした。

はてなブログ最高だし Tumblr という手もあったけど、この機会に前から興味があった静的サイトジェネレーターを使って GitHub Pages で公開してみようかなと思っていろいろ調べてみると、npm でインストールできる Hexo というツールが現在の仕事で扱ってる技術に近そうだなーと思い、あと GitHub Flavored Markdown で書けるので、いっちょ Hexo でブログを作ってみることにしました。

インストールする

とりあえず GitHub でブログ用のリポジトリを作るところからやります！

shikakun/dev.shikakun.com

リポジトリを作ったら、Hexo のウェブサイトの Get started を見ながら以下のコマンドを叩いて Hexo をインストールしました。

$ npm install hexo-cli -g
$ hexo init dev.shikakun.com
$ cd dev.shikakun.com
$ npm install
$ hexo server

これだけ！ローカルに Hexo のサーバーが立ち上がって、 http://0.0.0.0:4000/ で見られるようになりました。
用意した GitHub のリポジトリをリモートリポジトリに登録しておきます。

$ git remote add origin git@github.com:shikakun/dev.shikakun.com.git

デプロイする

とりあえず GitHub Pages にデプロイするところをやります！
Hexo の Deployment のドキュメントを読むと、GitHub Pages へデプロイするには hexo-deployer-git という Hexo のプラグインをインストールしろとあるので、インストールします。

$ npm install hexo-deployer-git --save

Hexo の設定ファイルの _config.yml の Deploy の項目を以下のように編集します。

deploy:
  type: git
  repo: git@github.com:shikakun/dev.shikakun.com.git
  branch: gh-pages
  message: "Updated: {{ now('YYYY-MM-DD HH:mm:ss') }}"

これだけ！

$ hexo deploy -g

デプロイのコマンドを実行すると、Hexo が静的ファイルを生成したあと、gh-pages ブランチへ push して http://shikakun.github.io/dev.shikakun.com/ で見られるようになりました。

独自ドメインを設定する

http://shikakun.github.io/dev.shikakun.com/ で見られるようにはなったけど、せっかくなので http://dev.shikakun.com/ で見たい。というわけで、独自ドメインの設定をやります！

まず、僕は shikakun.com をムームードメインで取得して管理しているため、ムームードメインの管理画面（ムームー DNS のカスタム設定画面）で以下のように入力しました。

サブドメイン	dev
種別	CNAME
内容	shikakun.github.io

GitHub Pages の独自ドメインを設定するドキュメントを読むと、リポジトリに CNAME ってファイル名の独自ドメインを書いたファイルが置いてあれば良いみたい。
master ブランチのリポジトリ直下に CNAME ファイルを置いてしまうと Hexo のデプロイ先の gh-pages ブランチのファイルには含まれないため、記事のファイルを置いている source ディレクトリに置きます。

$ echo 'dev.shikakun.com' > source/CNAME

これだけ！hexo deploy -g でデプロイすれば、http://dev.shikakun.com/ で見られるようになった！やったー！

フィードを生成する

Hexo ではデフォルトテンプレートのナビゲーションに「RSS Feed」ってリンクがあるくせに、標準ではフィードを生成してくれない。ということで、フィードを生成してくれる Hexo のプラグインを追加します。

$ npm install hexo-generator-feed --save

これだけ！hexo deploy -g でデプロイすれば、http://dev.shikakun.com/atom.xml で見られるようになった！やったー！
フィードに含めるエントリー数とかは設定ファイルで設定できるらしいです。

いろいろ設定する

だんだん書くのが疲れてきたので雑になりますが、いろいろ設定しました。
当たり前だけど Git で差分を管理できるのがいいですね！

edit config by shikakun · Pull Request #5 · shikakun/dev.shikakun.com

というわけでブログできた！やった──────────！

デフォルトのテンプレートが宇宙感すごいのはなんでなのか。自分の好きなようにカスタマイズして大満足です。