LoginSignup
36

More than 5 years have passed since last update.

静的ウェブページはJekyllとAWS-S3が簡単確実

Last updated at Posted at 2013-08-08

Warning: 2014-5-15 このページの情報は古くなっています。jekyll-s3のメンテが中止されて、新しくs3_websiteとなり使い勝手が変わっています。気が向いたらアップデートの記事を書きます。こちらの記事は参考程度としてくださいm(_ _)m

Jekyllで生成したウェブページをAmazon Web ServiceのS3上にデプロイしてホームページを作成してみました。これがものすごく簡単だった(かつ、管理がやりやすい)ので是非オススメしたいと思って記事を書きます。

尚、S3を使うことで多少のコストは発生しますが、Jekyllで作ったページをGitHub Pages上にホスティングすれば完全無料のウェブページを公開することができます。(今回はアクセスが少ないのですが商用ページだったためS3を利用しました)

Jekyllとは

JekyllはWebページののジェネレータです。MarkdownやTextile,Liquidのようなよくある形式で静的なページをパブリッシュします。難しくないので利用方法公式ページを参照いただくと簡単に理解できると思います。

Jekyllへ移行のコツ

今回は、既存のウェブページからの移行でしたので、既存のコンテンツを傷つけないように作業をする必要がありました。まず、jekyllのディレクトリのトップに、_originalのディレクトリを作成しここに既存のコンテンツをすべて展開、git add _originalgit commitしてリポジトリに格納します。Jekyllテンプレートを作成しながら、jekyll -d ./_original buildとして、コンテンツを生成後git statusgit diffで差分を確認→修正を繰り返す。これで既存のコンテンツを変えてしまう事無くJekyll化することができました。

AWS S3の準備

AWSのマネージドコンソールにアクセスして、まだS3を使ったことがなければサインアップ。その後旧形式のアクセスキーを取得する必要があります。アクセスキーIDとシークレットアクセスキーはこの後使います。

AWS S3にパブリッシュ

jekyll-s3 というgemを利用します。Gemfileに以下のように書いて

Gemfile
source :rubygems

group :development do
  gem "jekyll", "~> 1.1.2"
  gem "jekyll-s3", "~> 3.2.0"
end

bundlerの実行をします

$ bundle

jekyll-s3がインストールされるとjekyll-s3というコマンドが実行できるようになるので、実行します

jekyll-s3

すると、_jekyll_s3.ymlが生成されるので、修正します。

_jekyll_s3.yml
s3_id: YOUR_AWS_S3_ACCESS_KEY_ID
s3_secret: YOUR_AWS_S3_SECRET_ACCESS_KEY
s3_bucket: your.blog.bucket.com

このYAMLはERBでパースされているので、ファイルに書きたくない人は環境変数にキーを入れて、以下のように書くこともできます。

s3_id: <%= ENV['AWS_S3_ACCESS_KEY_ID'] %>
s3_secret: <%= ENV['AWS_S3_SECRET_ACCESS_KEY'] %>
s3_bucket: your.blog.bucket.com
s3_endpoint: ap-northeast-1

もし、東京以外のS3のリージョンを使うなら、Regions and Endpointsから適切なリージョンを選んでs3_endpointに書いてください。

あとは、以下のコマンドで、S3をセットアップします。バケツも自動で作ってくれます。

configure-s3-website --config-file _jekyll_s3.yml

これで次のようなURLでウェブサイトが公開されるようになりますので、http://www.example.com.s3-website-ap-northeast-1.amazonaws.com独自ドメインを使いたい場合は、このホスト名をCNAMEに設定します。設定方法は各DNSサービスのドキュメントを御覧ください。

www.example.com CNAME www.example.com.s3-website-ap-northeast-1.amazonaws.com

以降コンテンツの更新は

jekyll build

ローカルで確認したいときには

jekyll server

S3へのアップロードは

jekyll-s3

簡単ですね。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
36