エンジニアのための超爆速ブログ構築HOWTO

ちょっと前までGithubページ上にブログを配置させてもらっていたのですが、 SOFT SKILLS って本に触発されて真面目にブログサイト作ってみよーと思い、独自ドメインで運用してみることにしました。ついでにAWS S3、CloudFrontに移行してみたら激安で爆速なブログサイトになったので紹介させていただきます。

TL;DR;

Jekyll でブログ書いて、s3_website でs3、CloudFront使おうって話です。

この記事書いてる途中で気づいたのですが、2年前に同じようなことやってた人がいたみたいでした。 - 2年前におなじようなことやってた人の記事

2年も立ってるので、多少勝手が変わってましたが、だいたい同じです。

ブログ開設初期

日頃なんでもマークダウンでメモったりしてるので、そのままブログに使えたらいいなーっと思ってました。ちょっと探してみたらJekyllっていう静的ページ生成ツール(？)に出会いました。 GitHubページのバックグラウンドでも動いてるらしく、まさしく探してるものだったので採用しました。

jekyllでフォークしてGitHubページ作った

ここに書いてる通り、 GitHub上でポチポチするだけでGitHubページができちゃいます。

このリポジトリをFork
Forkしたリポジトリ名を {GitHubアカウント名}.github.io にリネーム
https://{GitHubアカウント名}.github.io にアクセスして確認

終わり。ちょーかんたん。

{リポジトリ}/_posts 配下に YYYY-MM-DD-name-of-posts.md のフォーマットでファイルを配置すれば記事が生成され、 http://{githubアカウント名}.github.io/name-of-posts のurlでアクセスできるようになります。

独自ドメインにこだわらなければこれだけでも十分かと思います。

参考

クリック1発で、Github上にブログを無料で作成できる「Jekyll Now」が超絶便利！
GitHubのREADMEにもgif動画で解説されてます

下書き保存したりローカルでプレビューしたりしたくなった

GitHub上の操作だけであっさりページ作れたのは非常に良かったのですが、勉強会とか行ったときに空いた時間に下書きをプレビューしてみたくなってきました。

jekyllをインストールしてローカルで動かした

これも公式サイトに乗ってるのですが、ローカルにjekyllインストールしてGitHubページのリポジトリをローカルにcloneしてjekyll起動するだけで出来ました。

forkしたリポジトリをクローンしたディレクトリで sh gem install jekyll jekyll serve --drafts

参考 - Github

下心でてきた

世の中、ブログで稼いでる人いっぱいいるじゃないですか。少しは恩恵受けたいですよね。ってことで、広告仕込んでみたくなりました。 (このあたりから既存のブログサービスではやりにくいことかなと。)

レイアウト修正して広告刺さるようにした

広告は、Google AdSenseでアカウント作成して、まず、ページ一覧に広告さしてみました。ページ一覧のテンプレートはリポジトリ直下のindex.htmlを修正することでカスタマイズ可能なようです。

{workspace}/index.html

---
layout: default
---

<div class="posts">
  {% for post in site.posts %}
  <article class="post">
    <h1><a href="{{ site.baseurl }}{{ post.url }}">{{ post.title }}</a></h1>
    <div class="entry">
      {{ post.excerpt }}
    </div>
    <a href="{{ site.baseurl }}{{ post.url }}" class="read-more">Read More</a>
  </article>
  <!-- ad senseの管理画面でタグコピペ -->
  {% if forloop.first or forloop.last %}    (1)
  <ins class="adsbygoogle"                  (2)
    style="display:block"
    data-ad-client="xxxx"
    data-ad-slot="xxx"
    data-ad-format="auto"></ins>
  <script>
    (adsbygoogle = window.adsbygoogle || []).push({});
  </script>
  {% endif %}
  {% endfor %}
</div>

広告が出すぎるとうざいのでループの最初と最後だけ広告が出るようにしてます。
AdSenseの管理画面で広告のタグをコピペしてください

jekyllのテンプレートエンジンは Liquid が使用されているようです。テンプレートについてはこちらが参考になります。

文字ばかりでつらいので。ここらでちょっと広告を。

独自ドメインで運営したくなった

っていうより、いろいろ実験用に取得したドメインがもったいなくて、もっと活用しようと思い・・・ってのと、awsでなにか運営して金額感身につけたかったので。

S3へ移行

ローカル環境はできていて、仕組み的に、 _site 配下をウェブサーバーで公開してるだけなので、ビルド後の_siteをそのままs3に置けばいいだけじゃね？って思ったのだけど、そんな誰でも思いつくこと、とっくに誰かが対応してるんじゃないか？っとおもむろに検索してみると、ドンピシャな記事にたどり着きました。

はったりエンジニアの備忘録

はい。やりたかったことを2年も前にやってるお方がおりました。。。

s3_website ってgemで至れりつくせりのようです。

$ : gem インストール
$ sudo gem install s3_website
$ : configファイルscaffolding作成
$ s3_website cfg create

以上で、s3_website.ymlってのが出来るので、awsのapi keyとsecretを設定します。

s3_id: <%= ENV['S3_ID'] %>
s3_secret: <%= ENV['S3_SECRET'] %>
s3_endpoint: ap-northeast-1
s3_bucket: hogehoge-banana.xyz
site: _site

erbが使えるymlなので、キー情報は環境変数で参照してます。環境変数の管理はdirenvで行っており、 direnvの設定ファイルである.envrcをgitignoreに入れてます。

以上で設定は完了で、参考サイトのように

$ s3_website cfg apply
$ s3_website push

で指定したバケットに_site をアップしてくれるのですが、生成された設定ファイルをよくみると、cloudfrontの設定項目があるのに気づきました。 s3_websiteのREADME見てみると、cloudfrontの設定やリフレッシュまで面倒見てくれるようです。

ドメイン設定

cloudfrontの設定あたりでドメインの設定が絡んできます。このサイトのドメインであるhogehoge-banana.xyzは、もともとテスト用に使用していたドメインなのでDNSのRoute53への移行は済んでいたため、バケット、やクラウドフロントを紐付けるだけでした。

単純に特定のS3のバケットへサブドメインを割り当てるだけならRoute53へバケットのエンドポイントにCNAMEを割り当てるだけ。今回はcloudfront経由なので、クラウドフロントにCNAMEを割り当てる手順となりました。このあたりの解説はawsのサイトが詳しいかと思います。

想定外の出来事

s3に移行して、クラウドフロントも仕込んで、「サイトパフォーマンス良すぎwww すげーwww」って大はしゃぎしてると、翌日知人から指摘が。

「サイト、not foundになってるけど？」

え、そんな馬鹿な。天下のaws様が落ちるわけない。ましてやs3のSLAなんか9が何個並んでると思ってるの？とか思いながらサイトチェックすると、たしかにnotfound。

コンソールで確認すると、バケット内のファイルが全部消えてました。意味がわからない。なぜ？

っと、冷静によく見てみると、もともと、検証用に使ってる個人アカウントのバケットだったため、バケットのライフサイクルが1日になっていて、アップしたファイルは1日後に消える設定になってました。俺のバカ

ライフサイクルの設定外して再度s3_website push実行してめでたしめでたし。

気になるコストは?

ぶちゃけ、そんなアクセスないのでAWSのコストは100円未満で済んでます。($0.7 くらい。) ドメインの年間コスト月額計算しても総額200円にも満たない程度。

ブログのコストではなく、AWSの学習コストと考えれば、自分への良い投資だと思ってます。

まとめ

長くなりましたが最後まで読んで下さいましてありがとうございます。以上が、このサイトがGitHubページに始まり現在に至るまでの経緯でございます。

途中にも触れましたが、2年も前に同じことやった人の記事をみつけちゃって、もやはこのページの意義が微妙ですがw

もともとブログとかあまり書いてなかったのですが、マークダウンでかけたり、awsつかったり、普段使わないテンプレートエンジン調べたりしながら記事書くのは結構楽しいですね。クラウドフロントに移行して爆速になったのはなかなかテンション上がりました。

ってことで、エンジニアの皆さん、ブログを始めましょーw

参考にさせていただいたサイト

Written on December 30, 2016