Hexoを使ってGithubPagesにBlogを構築してみた

使用したツールなど

Hexo

Node.js製のMarkdownから静的なHTMLやCSSを出力してくれるブログツール

GithubPages

リポジトリの特定のブランチを静的なページとして表示してくれるGithubの機能

導入方法

GitHubPages作成手順

1. GitHubにてリポジトリを作成
2. 作成したGitHubリポジトリより「Setting」 -> [Github Pages] -> [Source] -> [master Branch]を選択してSaveを押下

これで、GitHub Pagesは作成完了👍

Hexoの導入

Hexoのドキュメントに従って以下を実行

$ npm install hexo-cli -g
$ hexo init blog
$ cd blog

Blogの設定を変更

$ vim _config.yml

 ## Source: https://github.com/hexojs/hexo/
 
 # Site
-title: Hexo
-subtitle:
-description:
-keywords:
-author: John Doe
-language:
-timezone:
+title: {{ブログのタイトル}}
+subtitle: {{ブログのサブタイトル}}
+description: {{ブログの詳細な説明を書く}}
+keywords: {{多分keywordを書く@todo: themeによって異なりそうだけど、metaのkeywork？}}
+author: {{自分の名前}}
+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: http://yoursite.com
-root: /
+url: https://{{Githubのユーザ名}}.github.io/{{Github Pagesとして作ったリポジトリ名}}
+root: /{{Github Pagesとして作ったリポジトリ名}}
 permalink: :year/:month/:day/:title/
 permalink_defaults:
 
@@ -73,9 +73,11 @@
 # Extensions
 ## Plugins: https://hexo.io/plugins/
 ## Themes: https://hexo.io/themes/
 theme: landscape
 
 # Deployment
 ## Docs: https://hexo.io/docs/deployment.html
 deploy:
-  type:
+  type: git
+  repo: {{Github Pagesで作ったリポジトリ}}
+  branch: master

Hexoにthemeを指定する

デフォルトのテーマだとHello Worldのページ表示に1.44secかかっていたので、
もっと軽量で500ms以内でHello Worldぐらいの内容を返してくれるthemeを探ことにした。
(hexo serverにて計測)

HexoにはTheme 一覧ページがあったので、ここからいい感じのthemeを探す。

brewskiがすごく軽量だったので手元のHexoにインストールする。
(名前からしてbrew Licenceかと思ったが、MITだった。)

このthemeはドキュメントが充実していたのでドキュメント通りに下記を実行

$ git clone https://github.com/tiaanduplessis/hexo-theme-brewski.git themes/brewski
$ npm install --save hexo-renderer-pug hexo-generator-feed hexo-generator-sitemap
$ vim theme/_config.yml

menuは空の値を作るとこんなエラーがでてbuildできないので必ず埋めること。

不要であれば項目自体消す。

@@ -5,7 +5,7 @@
   Home: /
   About: /about
   Archives: /archives
-  GitHub: 
+  GitHub: {{GitHubのURLなどHeaderに付くリンク}}
   RSS: /atom.xml
 
 favicon: /favicon.svg
@@ -15,10 +15,10 @@
-disqus: 
+disqus: {{Disqusのshortname(必要であれば)}}
 
 # Analytics
-google_analytics:
+google_analytics: UA-XXXXXXXXX-1
 
 # Copyright Infomation
 copyright:
-  since:
-  name: 
-  url:  
+  since: 2018
+  name: {{名前}}
+  url: {{ブログのURL}}

ブログの確認

下記コマンドを実行して表示されたURLへブラウザでアクセスするだけ

$ hexo server

ブログのデプロイ

gitを利用したdeploy用のプラグインをインストールする

$ npm install hexo-deployer-git --save --no-optional

下記コマンドを実行してデプロイ
(gオプションをつけると静的ファイルをgenereateしてデプロイする)

$ hexo deploy -g

感想

ブログ程度の内容であれば、Github Pagesで十分事足りると思いやってみたらHexoがすごく簡単で驚いた。
また、vimで記事が書けるのはすごく良い。

Disqusについては簡単すぎて記事では書いていないけれども、下記の記事を参考にするとすぐに導入可能でしたので参考までに

Hexo に コメント欄 の Disqus を 設置

課題、気になること

• 元のmarkdownをhexo deployでバージョン管理できないのか
• Disqusでコメント機能を入れたが、barbaのpjaxなる機能で記事詳細に行った時に更新しないとDisqusが読み込まれない(修正後themeへ要PR)
• 注釈みたいな機能が欲しい(あるか確認してなければ作る)