hexo blogをデプロイするまで

モチベーション

静的サイトジェネレーターでブログを作りたい
・ブログ構築しつつGitHubで差分管理しておきたい -> GitHub Pages

環境

MacOS High Sierra 10.13.6
homebrewインストール済み(homebrewのインストールについて)

手順

かなり雑に書いているので参考サイト参照

Github Pages用のリポジトリを作る

自分のGitHubにアクセスし、新しいリポジトリを作成
リポジトリ名は”.github.io”にする
ブログのurlが”https://.github.io”になる

Homebrewでnodebrewをインストール

1
$ brew install nodebrew

.bash_profileに追記して.bash_profileを再読み込み
pathの指定でミスってvimなどの主要コマンドが使えなくなった場合
-> 対処

1
$ source ~/.bash_profile

node.js(最新版)をインストールする

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$ nodebrew install-binary latest
Fetching: https://nodejs.org/dist/v10.10.0/node-v10.10.0-darwin-x64.tar.gz
######################################################################## 100.0%
Installed successfully

$ nodebrew list
v10.10.0

current: none

$ nodebrew use v10.10.0
$ nodebrew list
v10.10.0

current: v10.10.0

$ npm -v
6.2.0

$ nodebrew install-binary latestがうまくいかなかった時は
-> 対処法
これでもうまくいかない場合は上記コマンドにsudoをつけて実行

hexoとデプロイツールを導入

1
2
$ npm install hexo
$ npm install hexo-deployer-git --save

デプロイ

1
2
3
4
$ mkdir myblog
$ cd myblog
$ hexo init
$ hexo server

これでlocalhost:4000でデプロイしたページが見れる
ctr+Cで終了

6/23追記

hexoがNode.jsの最新バージョン(2020年6月時点)v14.0.0に対応していなかったために、以下のようなerrorが出た
ERR_INVALID_ARG_TYPE-HELPPP #4263
Node.jsをv13にダウングレードさせるとerrorが解消できる
ダウンロードは/download/release/latest-v-13.x/
hexo command not foundとなったらPATHが通っていないので以下を実行して~/.profileを再読み込みする

1
echo 'PATH="$PATH:./node_modules/.bin"' >> ~/.profile

参考: hexo documentation
コマンドはnpx hexo deploy -gのようにnpxをつけないとhexo command not foundになる

_config.ymlの修正

themeによって変化するので割愛
参考

好みのThemeを探す

hexo themes 公式
hexo themes wiki
・本ブログで使っているtheme -> sabrinaluo/hexo-theme-replica

デプロイする

1
2
3
$ git init
$ git remote add origin git@github.com:<replace_username>/<replace_username>.github.io.git
$ hexo deploy -g

これでhttps://<replace_username>.github.ioにアクセスしてブログが見れればdone
新しい記事を作る手順は本ブログのHello Worldにある
hexoで新しい記事を作るには以下を実行

1
npx hexo new "my_blog_title"

postの削除方法

1
2
3
$ rm <your_dir>/source/_posts/<your_post.md>
$ hexo clean
$ hexo generate

categoriesとtagsの404解消

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

参考にしたサイト

Hexoで始めるお手軽な静的ブログ -インストールと配備-
HexoブログをGitHub Pagesで最速公開する
Hexoでgithubにデプロイする
【Hexo入門】Hexoでブログを作成する時のTipsまとめ
Troubleshooting
Hexoを使って個人ブログ作成, Github Pagesにデプロイするまで
HexoのFront-matterにカテゴリーとタグを上手く設定する方法
nodebrew ls でエラーになります。
nodebrewでよく使うコマンド
おれろぐ #z_a_ki3/node.jsの環境構築(mac)
小白妹妹写代码