Hexo と Github Pages で簡単シンプルブログを作成するときに参考にさせてもらったサイトまとめ

INDEX

  1. はじめに
  2. Wordpress でええやん?
  3. 静的サイトジェネレータの現状
  4. 環境作りから初期設定まで
    1. Hexo 周り
    2. Github Pages 周り
  5. カスタマイズ周り
    1. コメント欄の設置
  6. 独自ドメインの設定方法が知りたい
    1. 関連する投稿をレコメンド
    2. Google Adsense 設置
    3. プラグイン全般
  7. 別のフレームワークからの移行
  8. テンプレートに迷ったら
  9. テンプレートから逸脱して技術的にもデザイン的にもかっこいいサイト
  10. 最後に

はじめに

この記事は、Hexo のような静的サイトジェネレータ + Github Pages でサイトを作りたいと思っている人の参考となることが目的です。
私自身もわからないとよく参照させてもらっているサイトなので、逆引きできるようにまとめておけたらいいなと思っていました。

Wordpress でええやん?

たしかに似ている点が沢山あります。シンプルにサイトが構築でき、そのなかでテンプレートを選べたり、Plugin を入れて機能追加して育てる点だったり。
静的サイトジェネレータの場合は、レンタルサーバを借りずとも Github Pages に無料でホスティングできる点が大きな魅力だと言えます。

静的サイトジェネレータの現状

こちらをみると、
Jekyll, Hugo, Hexo の順番で人気がありそうです。Jekyll = Ruby, Hugo = Go, Hexo = JavaScript というように使われている言語や HTML テンプレートがそれぞれ異なりますので、いま使いたい/学習したい技術を選ぶというのもありです。
Github Pagesでブログ構築ができる静的サイトジェネレーター総まとめ

環境作りから初期設定まで

Hexo 周り

公式サイト 
Hexoで気軽に静的ブログ作成 (1)環境導入

Github Pages 周り

Git初心者でも大丈夫!完全無料でGithub PagesにWebページを公開する方法
所要時間3分!? Github PagesとHEXOで爆速ブログ構築してみよう!
Hexo と GitHub Pages でブログ環境を構築して公開する
Hexo でブログをつくるまで

カスタマイズ周り

コメント欄の設置

Disqus 一択だと思っています。
Disqusを使ってブログ(Hexo)にコメント欄を設置しました & ブログにコメント欄を設置した理由
その時の作業メモ:
Hexo にコメント機能と自動生成目次(toc)を追加しました

独自ドメインの設定方法が知りたい

かなり丁寧に解説されているサイトが多いです。
GitHub Pages でWebサイトをホスティングする(独自ドメイン使用)
Hexo/Github Pagesで、独自ドメインを設定する
その時の作業メモ:
Github Pages をお名前.com で取得した独自ドメインに変更しました

関連する投稿をレコメンド

2つ選択肢がありそうです。作っちゃうのがすごいです。
Hexoで関連記事や人気記事を生成するプラグインを作った
関連記事を表示するHexoプラグインを作った

Google Adsense 設置

中国語の記事が多い印象です。
HexoにGoogle Adsenseをセットアップする
その時の作業メモ:
Hexo に Google adsense 設置&バナー編集

プラグイン全般

Hexoブログで使ってるプラグインを晒してみる
【Node.js】hexoのプラグインの作り方からインストールまで

別のフレームワークからの移行

やったことないですが一応お見かけしたものをば。
本家サイト - Migration
WordpressからHexoに移行してGitHub Pageで公開した
HexoにWordPressの記事をマイグレートする
サイトジェネレーターをOctopressからHexoに変更
blogをpowered by Hexoにした。
また見つけて追記してきます。

テンプレートに迷ったら

最初は特に決めずにいろいろ hexo s して試すのが一番いいと思います。
Hexoのブログデザインテーマ調べたものまとめ
自作して theme を公開されている方も
技術ブログのためのHexoのテーマ Ingenuous をリリースしました

テンプレートから逸脱して技術的にもデザイン的にもかっこいいサイト

text perforation
Hexoブログで使ってるプラグインを晒してみる

最後に

Hexo でブログを作成してから、いろんなサイトを作成者目線で見ることが増えました。「このサイトのベースは Landscape だ」などと気付けてニヤニヤしたりできます。

ƒ