Hello World! with Hexo

Static Site Generatorのチョイスがjekyll以外にもたくさんあるご時世ですが、諸事情によりHexoで書いてみました。

Starting Hexo

1
2
3
4
5
$ mkdir leojojo_blog
$ hexo init leojojo_blog
$ cd leojojo_blog
$ npm install
$ hexo server

これだけで localhost:4000 にデフォルトの状態で立ち上がる。

Using Themes

ここで早速テーマを導入します。
こちら sabrinaluo/hexo-theme-replica のかわいいテーマを使わせていただいた。

1
2
3
$ cd themes
$ git clone git@github.com:sabrinaluo/hexo-theme-replica
$ mv hexo-theme-replica replica

次に_config.ymlでテーマを設定する。

1
theme: landscape

とあるのを

1
theme: replica

に変更した。

この状態では記事を公開しているpublic内のファイルが変更前のテーマに合わせて生成されているので、変更後のテーマに合わせて生成し直します。

1
2
3
$ hexo clean
$ hexo generate
$ hexo server

これで localhost:4000 に新しいテーマで立ち上がった!

New Posts

早速、最初のブログ記事を書きたい。

1
$ hexo new post "Hello World! with Hexo"

“”(クォート)は単語1つならあっても無くても良いが上のようなタイトルだと、””を外すと複数の.mdファイルが生成されてしまう。

するとleojojo_blog/source/_posts/下にHello-World-with-Hexo.mdというファイルが生成されます。
開いてみると、メタ情報がyaml Front-matter形式で書かれている。今回使用するテーマではタグとカテゴリーを使うようなので、そこだけ書きました。

1
2
3
4
5
6
---
title: Hello World! with Hexo
date: 2018-09-07 17:57:02
categories: misc
tags: hexo tutorial
---

その下にはmarkdown形式で記事を書いていきます。Github Flavored Markdownに対応しているのでシンタックスハイライトなども簡単だ。
画像はsource/imagesというディレクトリを作成して、その中に入れましたがもっと良い方法があれば教えてください。

postsの削除

自分はよく色々なものを書き損じるので削除の仕方もここに書いておく。

1
2
3
$ rm leojojo_blog/source/_posts/Hello-World-with-Hexo.md
$ hexo clean
$ hexo generate

New Page

テーマには Categories と Tags というタブがあるのにも関わらず、クリックするとエラーになってしまう。
次はこちらのページを書いていく。

1
2
$ hexo new page categories
$ hexo new page tags

とりあえずはこれだけで大丈夫。
あとは3日坊主にならずに書いていくだけ。

テーマの編集

このテーマには、押せそうで押せないボタンなどがたくさんある。
元のテーマをforkして、手を加えてみるといいかもしれない。

公開

このブログを公開したい。
静的ファイルのホスティングといえばgithub pagesだったが、最近はnetlifyというのが流行りらしいので試してみる。
プライベートレポジトリからのデプロイ、CIを提供してくれるなどと至れり尽くせり。
今回はgithubと連携してほしいのでgithubからログインしました。
github連携
レポジトリ選択
ブランチ、ビルドコマンドは勝手に選択してくれた

UIがこれ以上ないくらいにわかりやすい。
ビルドコマンドや公開レポジトリまで自動で選択してくれた。
なんとこの時点でもう、netlifyの 怪しい 自動生成ドメインで公開されている。
netlifyドメインで公開されいる

独自ドメイン

自分の持っているドメインでサイトを公開したい。
github student に登録して得られる様々な無料コンテンツのうち1つがnamecheapの.meドメイン。
学生の方ははぜひ登録してみてください。

namecheapに持っているドメインをnetlifyで公開しているサイトに向けたい。
まずnetlifyで自分のドメインを入力をする。
自分のドメインを入力した

次に、DNSレジストラであるnamecheapでも設定をする必要がある。
Domain List からmanage > Advanced DNSを選んで、レコードを編集する。
netlifyにどのネームサーバーを追加すればいいかの説明があるので

Nameservers
Point your domain’s nameservers at Netlify
To use Netlify DNS, go to your domain registrar and change your domain’s nameservers to the following custom hostnames assigned to your DNS zone.

dns1.p08.nsone.net
dns2.p08.nsone.net
dns3.p08.nsone.net
dns4.p08.nsone.net

画面には写りきっていないが上の通りに追加した。
DNSレコード編集

このまましばらく待っていたらこのドメインで、Let’s EncryptによるSSL certificate付きでサイトが公開された。
やったー

完成

3日坊主がこわいところだがこれからはたまにかきものを公開していこうと思う。