2018-05-20_hexoで静的サイトを作る

このページで分かること

  • hexoの環境構築
  • github pagesへのデプロイ

作業環境

  • Ubuntu 18.04
  • Xubuntu 18.04

node.jsのインストール

Installing Node.js via package manager | Node.js

1
2
$c curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash -
$c sudo apt-get install -y nodejs

hexoのインストール

1
$c sudo npm install -g hexo

ブログの作成

雛形の生成

1
2
3
##c 凡例
##c hexo init ${blog名}
$c hexo init testblog

ローカル環境での確認

下記コマンドでhttp://localhost:4000でサーバーが起動します。

1
$c hexo server

github pagesに公開

github pages用リポジトリーを作成

リポジトリー名を下記の形式で作成します。

1
${username}.github.io

hexoのブログ設定の変更

hexoで作成したディレクトリ直下にconfig.ymlファイルがあり設定情報を記載します。下記は変更点のdiff比較です。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
$c git diff -U0 -no-index config.yml.org cnfig.yml
diff --git a/_config.yml.org b/_config.yml
index b6bbdf4..6e0f0fe 100644
--- a/_config.yml.org
+++ b/_config.yml
@@ -6 +6 @@
-title: Hexo
+title: testblog
@@ -11,2 +11,2 @@ author: John Doe
-language:
-timezone:
+language: ja
+timezone: Asia/Tokyo
@@ -16 +16 @@ timezone:
-url: http://yoursite.com
+url: http://y1000mbg.github.io.git
@@ -81 +81,3 @@ deploy:
-  type:
+  type: git
+  repo: git@github.com:y1000mbg/y1000mbg.github.io.git
+  branch : master

githubへデプロイ

1
2
3
4
5
## デプロイツールをインストール
$c sudo npm install hexo-deployer-git --save

## デプロイ
$c hexo deploy -g

複数の環境で作業する際

githubのリポジトリからcloneすれば、複数環境でお手軽に編集できるのではと考えていましたが間違いです。
githubにデプロイされるのは、あくまで静的ファイル(html)なのでcloneしても当然ながらhexoではデプロイできません。

hexoで作成した、プロジェクトフォルダを別の手段で共有すれば別環境でも更新作業が可能です。