Hexo で無料のブログを作る

いろいろな事情があって Blogger から GitHub Pages へ引っ越し、1 学期のあいだ付き合ってくれた Blogger は正式に更新停止となりました。記念に元のサイトはこちら ↗。Hexo に乗り換えた理由は以下のとおりです。

• Blogger の管理画面は本当に簡素（慣れても、そこから先に手を入れるのが難しい）。
• 普段使っている Markdown 記法を、HTML に変換してから Blogger のエディタに貼る必要がある。
• 機能が Blogger 本体に縛られる。
• コードブロックを入れるだけでも CSS をいじる必要があって、カスタムテーマを一度ちょっと直したら、もうそれ以上触る気がなくなる。

というわけで乗り換えました〜〜

# Why GitHub Pages??

GitHub Pages を選んだ理由はシンプルです。

1. Markdown 記法でそのまま記事が書ける
   • Markdown 記法はとても楽で、コードも簡単に挿入できる
   • レイアウトが簡単なので、HTML ではなく記事の中身に集中できる
   • 基本の記法は CheatSheet ↗
2. GitHub Pages ↗ でホスティングできる
   • GitHub で username.github.io というリポジトリを新しく作るだけで、username.github.io でトップページにアクセスできる
   • サーバーを自分で管理する必要がなく、GitHub が面倒を見てくれる
3. git ↗ で自分のブログを管理できる
   • branch と merge で、いま手を入れている記事を管理できる
   • 記事を消しても git で復元できる

# Why Hexo??

Hexo を使う前に Jekyll ↗ も試しました。Ruby のほうが少し慣れていたからです。
でも Jekyll は中国語の情報が少なく、Ruby の Windows 上での挙動も、うーん……。宗教戦争をしたいわけではないですが、Ruby に比べると、Hexo が必要とする Node.js のほうが Windows にやさしいです。
そして一番大事なのは、Hexo の作者 tommy351 ↗ が台湾人だということ!! これは使うしかないでしょう。
実は技術的な ↗理由もあります！ たとえば Ruby だと、記事が増えるとサイト生成がかなり遅くなります。Jekyll にも最適化の方法を編み出した人はいますが、そこまで面倒なことはしたくなかったので、最終的に Hexo を選びました〜

# インストール手順

Node.js をインストール

• まず Node.js ↗ の公式サイトからダウンロードしてインストール

Hexo ↗ をインストール

• npm でインストール

npm install hexo-cli -g

• インストールできたら、次のコマンドでバージョンを確認できます

hexo version

• 自分のブログを作る

hexo init blog  #初始化blog
cd blog         #切換至blog資料夾
npm install     #安裝相關套件
hexo server     #在localhost顯示頁面

• 記事を GitHub にデプロイする

deploy:
    type: github
    repository: git@github.com:yourname/yourname.github.io.git
    branch: master

GitHub とローカル環境をつなぐ方法については、ここでは省略します。

• デプロイを実行

hexo d

ERROR Deploer not found が出たら、次のコマンドを実行
npm install hexo-deployer-git --save

# ブログを美しくする

もちろん、Hexo を使うなら一番大事なのはブログの見た目ですよね〜
私は Next ↗ を使っていて、themes フォルダに clone してから、ここを書き換えます。

## Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next #修改這行

あとは公式サイトを見ながら、自分だけの Next に仕上げていけます。

# エディタで記事を書く

私は vscode で .md ファイルを書いています。プレビューしながら書けるのでとても便利ですし、ターミナルと組み合わせれば、さっと書いてさっと公開できます

hexo clean
hexo d -g #d部屬 g=generate

これだけで md ファイルが自動で HTML に変換され、GitHub にデプロイされます。

# タイトルの色を変える

source/css/_variables/base.styl に、もともとの色のカラーコードがあります
w3s ↗ で好きな色を選んで、hexo s で確認してみましょう

# Extra Live2D 看板娘

ここではあまり詳しく書きません

まず live2d の pkg をインストール

npm install --save hexo-helper-live2d

好きな 2D 娘 ↗を選ぶ

npm install {你選的}

_config.yml に以下をまるごと追加

live2d:
  enable: true
  pluginModelPath: assets/
  model:
    use: live2d-widget-model-haru/02 # 改成你選擇的
  display:
    position: right
    width: 150 
    height: 300
  mobile:
    show: false  #手機顯示

# Reference

Hexo のインストール手順とメモ ↗
Hexo+GitHub で、初心者でもすぐにブログが作れる ↗
Hexo で自分だけのブログを作る ↗
hexo に live2d の看板娘アニメーションを追加する ↗
hexo-helper-live2d ↗