Hexo+Typoraではじめる、一番楽な技術ブログの書き方
はじめに
この度新しい技術ブログを始めることにしました。Hexoでサイト作ってNetlifyにデプロイしてます。この記事を書くためにサンプルをそのまま上げていて設定とかなんもやってないのですが、また折をみて更新していきたいと思います。
Kanchiの雑記帳 | サブブログです。日記的な感じで書いていきます
今回、ブログを書く環境をいろいろ試した結果、TyporaでMarkdownを書いてHexoでブログサイトを作るという方向性に至ったのですが、この構成だとかなり書きやすそうというか、自分にとってベストだったのでお勧めします。Markdownでブログ書くなら、多分これが一番楽だと思います。
新規ブログ開設に至った理由
自分はこのブログを技術ブログとして使ってきたのですが、書いてきた記事の内容的には、なにか自分が作ったもので完成までに苦労した点など、自分にとっての復習兼他人へのチュートリアル的な感じなものが多く、自分としてもあえてそうしてきた面があります。しかし最近多方面に勉強する機会が増えてきて、トラブルの解決方法など記事にしたい事が毎日のようにあったのですが、前述の通りこのブログは一つの記事に一つのテーマみたいなものを心掛けているため、書く内容はあるのになかなか記事を書きづらいというもどかしさを感じていました。そういうわけで、わざわざ一本のブログ記事として書くほどではないけど、他に同じ問題で困っている人がいるかもしれないからとりあえず書いておこうみたいなブログが欲しくなり、新規ブログ開設に至ったわけです。もちろんこちらのブログをやめるわけではなく、こちらのブログは今まで通りで、向こうのブログではもっと適当な、日記的な記事を書いていきたいと思います。
Hexo+Typoraのブログ環境
余談はさておき本題に入りましょう。
まずはてなブログを選ばなかった理由として、このブログははてなブログで書いているのですが、今までは記事を書くのにVS CodeでMarkDownを書いて、その内容をはてなのエディターにコピペし、画像をアップロードしてリンクを追加する‥‥という七面倒なことをやっていました。もちろん記事ごとにアクセス数解析できたりメリットも大いにあるのですが、今回はそういうの気にしない適当なブログなので大丈夫ということにします。
また他の静的サイトジェネレータとしてVuePressなどがあり、最近になってブログ用プラグインが出たので使ってみようかと思ったのですが…正直手間がかかりすぎるのと思ったより自由度が低そうなのでやめました。手間を考えるとやっぱりHexoを一番お勧めします。
Hexoのインストール
まずはHexoをインストールします。HexoはNode.jsのフレームワークなのでnpmでインストールします。
公式サイトに記載されてる通りにやると5行コマンドを打つだけで動作確認までいけます。便利ですね。
npm install hexo-cli -g hexo init blog cd blog npm install hexo server
新規記事の追加
新しく記事を書くには以下のコマンドを実行します。
hexo new hoge
すると/source/_posts内に新しくhoge.mdが作られ、ここに記事の内容を書くことになります。
--- title: test date: 2020-03-08 12:05:35 tags: --- ~~ここに内容を書く~~
hexoではこの_posts内にあるMarkdownファイルが記事としてみなされるようです。
画像の挿入
今回一番苦労した点です。これがうまくいかなかったから他の静的サイトジェネレータを試したくらいです。自分が一番知りたかったのは相対パスで画像を指定する方法で、他のサイトだと configのpost_asset_folderをtrueにしてhexo-asset-linkプラグインを入れる…みたいなことが書かれてあるのですが、自分の環境だとどうやっても正常に画像を表示することができませんでした。
実際に生成されているhtmlを見ると、画像のリンクがsrc="/.com//image.jpg"というものになってしまっていることがわかります。これは一応githubのissuesにも上がっているみたいで、Macで試してないのでわかりませんが、Windowsの最新版で起こる問題なのかもしれません。リポジトリがアーカイブされているため解決することも難しそうです。
それで結局どうすればよいかというと、Hexoには画像のグローバルパスというものが存在し、source/imagesがそれにあたります。ここに配置した画像はサイト生成時にimagesフォルダに入れられ、のような形でアクセスすることができます。現状、上の問題が発生している場合、相対パスで画像を指定するには他の方法はおそらく無いと思われます。（むしろあったら教えてください。本当に）
Typoraの導入と設定
Typoraは最近知ったのですが、Markdownとして打っている画面がそのままプレビューになり、しかもMarkdown記法のままコピーできる優れものです。Macだと使えるBearがWindowsだと使えないのもあってこれ一択みたいなところがあります。
便利なことにTyporaはドラッグ＆ドロップで画像を挿入することができ、そのままだと画像の絶対パスが挿入されます。TyporaをHexoのブログ編集用に使うため、以下のように設定を変更します。
この設定にすると、Hexoプロジェクトのsource/_posts/hoge.mdという記事をTyporaで編集したとき、そこに画像をD&Dすると source/images/hoge/にその画像がコピーされます。Markdownでは以下のように記述されます。
画面上でもちゃんと表示されています。
こうするとD&Dでお手軽に画像を貼れて、しかもそのままgit pushすることで記事を更新することができるため、とても楽です。加えて普通だと少し面倒なMarkdown上での画像サイズの編集も、Typoraだと画像を右クリック→画像を拡大から自由にできて、ちゃんと<img src="~~~">の形に直してくれるのですごいです。
ただし上の記述のままだと、TyporaとHexoブログ上の記事一覧画面からは画像を表示することができるのですが、個別の記事画面からは画像が表示されません。Hexoでは記事の個別画面のURLを示すパーマリンクがデフォルトでは以下のようになっていて、記事個別画面からだと画像の相対パスが/2020/03/08/images/hoge/image.jpgとかになってしまうためです。
permalink: :year/:month/:day/:title/
これを解決する方法は二つあって、一つは上でも書いた通り画像のパスを/images/hoge/image.jpgにすることです。頭にスラッシュ付けないとダメなので注意してください。
ただこれだとTypora上からはプレビューできません。もう一つの方法として、_config.yml内のパーマリンクの指定を記事のタイトルだけにするというものがあります。
permalink: :title/
こうすると記事一覧画面と記事個別画面で画像の相対パスが一緒になり、どちらからも../images/hoge/image.jpgで参照できるため、Typoraでプレビューした内容をデプロイ先でそのまま表示でき、面倒な画像の挿入がD&Dだけで解決してしまいまいとても便利な気がします…が、大体の人はおそらくこの部分をいじらないため、よく知らないのですが多分あんまりやらないほうがよいのではないかと思っています。自分は../images/hoge/image.jpgで記事を書きTypora上でプレビューしつつ、デプロイ時にその部分だけ修正することにします。そもそもHexo serverでプレビューできますしね。
テーマの導入
Hexoではブログテーマの導入もすごく簡単です。themesディレクトリ内にダウンロードしたテーマのディレクトリを配置し、_config.ymlのtheme: ~~~をそのディレクトリ名に変更するだけでＯＫです。
例えば自分はBlueLakeというテーマを使っているのですが、導入したいテーマのgithubリポジトリが
github.com/username/reponameにあるとした場合、以下のコマンドで行うことができます。
git clone https://github.com/username/reponame.git themes/reponame
ただNetlifyを使う場合、デプロイする際にNo url found for submodule path gitmodulesとかで失敗します。直接ダウンロードしてディレクトリを移動させるか.gitディレクトリを削除すると解決します。
自分が使用しているテーマ：https://github.com/chaooo/hexo-theme-BlueLake
デプロイ
デプロイは簡単にできます。github.ioで公開する場合は
username.github.ioの形でレポジトリを作り、_config.ymlを編集します。レポジトリ名は必ず自分のユーザー名.github.ioに形にしないといけないので注意してください。
deploy: type: git repo: https://github.com/username/username.github.io.git branch: master
以下のコマンドでデプロイできます。username.github.ioにアクセスして確認してみてください。
hexo deploy -g
自分はNetlifyを使うことにしたのですが、これもレポジトリを登録するだけで簡単にできます。この場合はhexoプロジェクトでgit remote add origin ~~~~でレポジトリを登録してmasterにpushするだけでＯＫなので、個人的にはこちらが好みですね。
おわりに
今回はHexo+Typoraでお手軽に技術ブログを書く環境の作り方を紹介しました。新しいブログではアクセス数とかあまり気にせず日記的な感じで雑に書いていきたいと思います。
