Hexo でブログをつくるまで

capture_tips.png

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

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

インストールする

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

リポジトリを作ったら、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 で差分を管理できるのがいいですね!

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

capture_dev.png

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