2017/08/02

 Cryogen/Github-Pagesでブログを書く


  1. Cryogenでブログ作成〜Github-Pagesで公開まで
  2. 今後の記事を書く流れ
  3. 感想など

とりあえず、一通り、Cryogen/Github-Pagesで静的なWebページの公開までたどり着いたので、その紹介などをざっくりと書きます。

Cryogenでブログ作成〜Github-Pagesで公開まで

主にやったこととしては、

  1. Cryogenのプロジェクトをリモートリポジトリ(BitBucket1)にまるごと登録
  2. 諸々の設定ファイルを修正
  3. とりあえず、最初の記事を書く
  4. ローカル環境で表示確認のテスト
  5. username.github.ioのリポジトリを作成
  6. Cryogenで作成生成されたpublicファイルをgithub.ioのリポジトリに登録
    • とりあえず静的Webサイト(ブログ一式)が公開される
  7. ビーコン設置

といった流れで作成しました。

Cryogenでのブログ作成については、公式のREADME.md を見ながら作ったという感じです。

ドキュメント(cryogenweb.org)も整備されていたりします。

設定ファイルですが、主に以下のファイルに必要な情報を書き込んでいきます。

プロジェクトルート/resources/templates/config.edn

テーマは、今後変更する予定ですが、とりあえずデフォルトのテーマを使うことにしてます。

プロジェクトルート/resources/templates/themes/blue

デフォルトのテーマは上記にあるので、その辺りを自分好みに修正しました。 今後は、もっと修正をかけまくる or 別テーマにする予定です。今のテーマ、 残念ながら私好みでないので。。。

ブログ記事の生成は通常のleiningenを走らせるのと同様、

lein run

で生成できます。ローカルで生成結果を確認したい場合は、

lein ring server

などとするとページが表示され確認可能です。

この時、サーバを立ち上げっぱなしにしておくと、記事を修正とブラウザの更新を繰り返すことで 記事を書きながらその内容を即座に確認するといったことが可能になります。

記事は日付とタイトルを付けて以下に格納します。

プロジェクトルート/resources/templates/md/posts/YYYY-MM-dd-post-title.md

Cryogenでは、resource/template配下のファイルを読み取り、resource/public配下に公開可能な静的Webコンテンツ一式を出力します。

プロジェクトルート/resources/templates
プロジェクトルート/resources/public

Github PagesのリポジトリにCryogenで生成したpublic下ファイルを登録することで、ブログとして公開できます。

後は、アクセス情報なんかも欲しいので、以下の記事を見ながら、ga-beaconを使って見ました。

GitHub Pagesでga-beaconを使ってリアルタイムアクセス解析 - Quiita

以下の記事を見た感じだと、Cryogenでページ生成した場合、Google Analiticsを使う場合は、 やっぱり、base.html2下にタグを埋め込む(人が多い)のかなぁ、といった感じです。

feature request - google analytics support (solved if i add docs :-)) #88

プロジェクトルート/resources/templates/themes/blue/html/base.html

今後の記事を書く流れ

今後の記事公開までの主な流れとしては、

  1. ローカルでブログ記事を書く
  2. ページ生成とローカルで記事の表示テスト
  3. リモートリポジトリにまるごと差分をコミット
  4. 生成されたページをGithub-Pagesにコミット/プッシュで、公開

かな、と思ってます。

あとは、ブログのデザインについても適宜修正していく予定です。 特に最近は、flaticon.com がお気に入りなので、 ぜひ使わせていただければと考えています。

感想など

色々、設定は面倒ですが、Emacsで記事が書けるようになった点が幸せですね。 また、手元でファイル管理できるという点も既存のブログサイトの利用より、メリットがあるのではと思っています。 versionコントロールもしやすいので。

  1. 別にGithubに登録してもよかったのですが、無駄にリポジトリは公開したくない主義なので。。。
  2. base.htmlは、テーマ直下にあるテンプレートのベースとなるhtmlです。

  Cryogen blog