なぜHexoなのか

Node.jsでやれる
めっちゃ簡単に静的サイトを構築できる
テーマが多くて完成度が高い、さらにカスタムできる
Markdownで記事が書けるので嬉しいよ!

Hexoを使ってブログを公開するまでの手順

Hexoをインストールする

まずはnpmでHexoをインストールします。

npm install -g hexo

次にブログの雛形を作成して依存パッケージをインストールします。

hexo init <your-blog-name>
cd <your-blog-name>
npm install

ここまでくれば実際にページを見ることが可能です、hexo serverと打った後localhost:4000にアクセスしてみてください。デフォルトのテーマなので好みはあると思いますが、テーマは後で変えられるので安心してください!

Github Pagesでブログを公開する

ブログをGitHub Pagesを利用して公開してみようと思います、まずは<user-name>.github.ioという名前のレポジトリを作成します。
デプロイはGitで行いたいと思うのでプラグインをインストールします。

npm install hexo-deployer-git --save

次にレポジトリの登録を行います、先ほど作成した雛形の中にある_config.ymlを下記のように編集してください。

# Deployment
deploy:
  type: git
  repo: git@github.com:<user-name>/<user-name>.github.io.git
  branch: master

これでブログを公開する準備は完了です、デプロイしてみましょう。

hexo deploy -g

無事にデプロイできたらhttp://<user-name>.github.ioにアクセスしてみてください、ブログが表示されれば成功です!

記事の追加をする

記事の追加は下記のコマンドを打つことで可能です、タイトルがそのままファイル名になるので日本語などは避けたほうが良いです。

hexo new "page-title"

そうするとsource/_postsの中にpage-title.mdができていると思います、Markdownでゴリゴリ中身を書きましょう。hexo serverでサーバーを動かしながら書くとブラウザをリロードするたびに更新されていくのでプレビュー代わりに使えます。
記事を書き終えたら公開して、Github Pagesにアクセスして実際に見てみてください。

hexo deploy -g

テーマをインストールする

まずはGithubなどで導入したいテーマを見つけてきてください、多分hexo themeとかで検索するとたくさん出てくると思います。細かい部分は自分で変更できるのでだいたい雰囲気で選んで良いと思います。良い感じのテーマが見つかったらクローンしてきます。

cd themes
git clone git@github.com:<theme-auther>/<theme-name>.git

次に先ほどの_config.ymlを書き換えます。

# Extensions
theme: <theme-name>

これでテーマが適応されました、hexo serverして実際に見てみてください。
テーマの細かい設定はそれぞれのテーマのthemes/<theme-name>/_config.ymlを変更することで可能です。
ある程度気にいる形になったらデプロイして公開しましょう!

テーマやスタイルシートを変更した後にデプロイしてもデザインが変更されないことがあると思いますが、これは下のコマンドで解決することができます。

hexo clean

この後に再びデプロイしてみてください、テーマやデザインシートの変更が反映されていると思います!

まとめ

Hexoを使ってブログを公開する方法を書きました。
Hexoは静的サイトの構築が本当に簡単にできる素晴らしいツールだと思います、テーマも非常に完成度が高いものが多いので一瞬にしてそれなりにちゃんとしたブログが作れてしまうのは本当に驚きです。
ただHexoを使っていてひとつ辛いのは中国圏のユーザーが多いので英語ではなく中国語のドキュメント、ディスカッションが多いという点です、英語ならそれなりに読めますが中国語は辛い…