Hexoを使って個人ブログ作成, Github Pagesにデプロイするまで #Node.js

モチベーション

・自分のWebページが欲しいけど、レンタルサーバ代は払いたくない
・動的なページである必要性はない
→ Github Pagesでいい感じのものを作ってしまえばいいじゃん！
という感じ

どうやって作るか

https://qiita.com/okmttdhr/items/82ecb0332835472e905f
にあるように、Github Pagesでブログ構築ができる静的サイトジェネレーターはたくさんあるっぽい。
Railsベースのものはなんとなく使いたくないので、ノリでHexoを選んだ。

制作環境

MacOS Sierra 10.12.6
Homebrewはインストール済

作っていく

Github Pages用のRepository作成

Githubにアクセス → 右上の「+」ボタンから「New Repository」を選択
Repository Nameは username.github.io にすること！
URLがめんどくさくなります。
※この記事内でusernameと書かれているところは適宜Githubのユーザ名に置き換えて実行してください。

Hexoのインストール

nodebrewとかいうバージョン管理ツール?(RubyのrbenvとかPythonのpyenvみたいな立ち位置のもの)があるらしいのでそれを使っていく
Homebrewを使ってnodebrewをインストール

$ brew install nodebrew

今時の若者のShellはfishなので、~/.config/fish/conf.d/config.fishに以下の通り追記する。

~/.config/fish/conf.d/config.fish

set -x PATH $HOME/.nodebrew/current/bin $PATH

Shellを起動し直してから、最新のNode.jsをインストール

$ nodebrew setup
$ nodebrew install-binary latest
$ nodebrew list
v11.9.0

current: none
$ nodebrew use v11.9.0
$ nodebrew list
v11.9.0

current: v11.9.0
$ npm -v
6.5.0

npmを更新しておく

$ npm update -g npm
$ npm -v
6.7.0

Node.jsが入ったのでHexoとデプロイツールを入れていく

$ npm install -g hexo
$ sudo npm install hexo-deployer-git --save

とりあえず立ち上げてみる

適当なディレクトリを作ってそこに環境を構築する

$ mkdir blog
$ cd blog
$ hexo init
$ hexo server

localhost:4000にアクセス出来たらとりあえず成功です。

configの修正

以降ではhexo initを実行したディレクトリ下で作業する
デプロイ先などの設定が_config.ymlにあるので修正する

_config.yml

# Site
title: hoge
subtitle: hogefuga
description: 
keywords:
author: piyo
language: ja
timezone: Asia/Tokyo

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://username.github.io/
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: git@github.com:username/username.github.io.git
  branch: master

この辺を修正してあげれば良い

デプロイしてみる

$ git init
$ git remote add origin git@github.com:username/username.github.io.git
$ hexo deploy -g

しばらく待って、https://username.github.io にアクセス出来たら成功です！
お疲れ様でした。

新しい記事を作る場合

hexo new <記事名>と打てばsource/_posts/<記事名>.mdというものが生成されるので、生成された<記事名>.mdにMarkdown形式で入力すれば良い。
記事が完成したらhexo deploy -gと打てば良い感じにデプロイしてくれます。