Hexoを使用したブログ構築方法

公開日:2019-03-30
最終更新:2019-03-30

今までQrunchを利用していたものの、読書記録など技術に関連していないものもどんどん書いていこうかな〜という思いもあり、自分用のブログを立ち上げてみよう!と思ったのがそもそもの経緯。(これにより、技術関連は相変わらずQrunchに投稿しながら、その他雑多な内容は自分のブログにも書いていくという算段である。)

とはいえ、そもそもQrunchを利用しようと思ったのが「自身のブログを構築・運用するのはコストが高く面倒」という後ろ向きな理由から。このハードルが拭えない限り難しいかな……と考えたいたところで「Hexo」に出会ったわけである。
ブログ構築にあたって、大変使い勝手が良かったため、構築方法などを含めてこちらにまとめていく。

Hexoとは

簡単に言えば「静的ページ作成ツール」。
記事自体はmarkdown形式で書いていき、Nodeサーバーで挙動を確認しつつ、最後はHTML形式で出力する。これによりGitHub Pagesなどで公開することが可能になる。
Wordpressやその他CMSのようにあれこれ構築して〜などの必要がなくなるため、その分の運用コストを抑えることができる。

ちなみに静的ページ作成ツール自体は種類が多く、代表的なものだとGitHub Pagesに標準対応した「jekyll」。Go言語製の「Hugo」。など様々。
HexoはといえばNode.js製で、中国人が開発者のため、言語関連の問題が起こり難いのが特徴だろう(デザインなども含めて日本語対応しているものが多い)。

環境構築に必要なもの

  • Node.js
  • Git
  • Hexo

構築手順

Hexoトップページに載っている通り、たった5行のコマンドを走らせるだけで環境構築は完成する。

$ npm install hexo-cli -g  
$ hexo init blog  
$ cd blog  
$ npm install  
$ hexo server  

hexo server でサーバーを立ち上げた後、http://localhost:4000 にアクセスすれば作成したブログを見ることができる。

記事の作成

  1. 記事ファイルの作成
    $ hexo new ${post-file-name}  
    ${post-file-name}は作成する記事のファイル名(=記事タイトルとはまた別のもの)。ファイル名は日本語でも大丈夫だが、URLなどはそのまま日本語が利用されるため注意。
    このコマンドを実行することで、記事ファイルが source/_posts/${post-file-name}.md として生成される。
  1. 静的コンテンツへの書き出し
    $ hexo generate  

GitHub Pagesを利用する場合、さらに hexo deploy をする必要がある。

感想

本当にあっさりと構築されるのでびっくりである。公開されたThemeやプラグインを利用することで、より便利に活用することができるため、これで色々ブログを書いていきたい。

記事が少しでもいいなと思ったらクラップを送ってみよう!
17
+1
@tanakashiの技術ブログ

よく一緒に読まれている記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる

技術ブログをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

技術ブログを開設する

Qrunchでアウトプットをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

Markdownで書ける

ログ機能でアウトプットを加速

デザインのカスタマイズが可能

技術ブログ開設

ここから先はアカウント(ブログ)開設が必要です

英数字4文字以上
.qrunch.io
英数字6文字以上
ログインする