LoginSignup
10
8

More than 5 years have passed since last update.

Jekyllを使って静的サイトを生成し、S3にホスティングする。

Last updated at Posted at 2014-09-22

流れ

  • Vagrant環境にJekyllをインストールする。
  • 新規にサイトを構築する。
  • ローカルで記事を投稿する。
  • s3_websiteを使ってS3にアップロードする。
  • コンテンツを確認する。

Vagrant環境にJekyllをインストール

$ mkdir jekyll
$ cd jekyll/
$ rbenv exec bundle init
Gemfile
source "https://rubygems.org"

gem "therubyracer"
gem "jekyll"
$ rbenv exec bundle install --path vendor/bundle

新規サイトをジェネレート。

$ bundle exec jekyll new new-site

サイトの確認。

$ cd new-site/
$ bundle exec jekyll serve --host 0.0.0.0

ローカルで記事の投稿

記事を書く。

$ cd _posts/
$ vi 2014-09-22-hogehoge.md
---
layout: post
title: fugafuga
---

- fumufumu
- fumufumu
- fumufumu

ビルドする。

$ cd ..
$ bundle exec jekyll build

サイトの確認をする。

$ bundle exec jekyll serve

S3にアップロード

s3_websiteを使ったら便利そうだったので、これを利用します。

ともあれインストール。

source "https://rubygems.org"
gem "therubyracer"
gem "jekyll"
gem "s3_website"
$ rbenv exec bundle install

s3_website.ymlの書き出しと設定をする。

$ cd new-site/
$ bundle exec s3_website cfg create
s3_website.yml
s3_id: [AWS Access Key Id]
s3_secret: [AWS Secret Access Key]
s3_bucket: [バケット名]
s3_endpoint: ap-northeast-1

バケットの作成をする。CloudFrontは使わないことに。

$ bundle exec s3_website cfg apply
Applying the configurations in s3_website.yml on the AWS services ...
Bucket snippets.itayan.com now functions as a website
Bucket snippets.itayan.com is now readable to the whole world
No redirects to configure for snippets.itayan.com bucket
Do you want to deliver your website via CloudFront, the CDN of Amazon? [y/N]

openjdk-7のインストール。

$ sudo apt-get install python-software-properties
$ sudo add-apt-repository "deb http://archive.canonical.com/ precise partner"
$ sudo apt-get update
$ sudo apt-get install openjdk-7-jre
$ java -version
java version "1.7.0_65"
OpenJDK Runtime Environment (IcedTea 2.5.1) (7u65-2.5.1-4ubuntu1~0.12.04.2)
OpenJDK 64-Bit Server VM (build 24.65-b04, mixed mode)

S3に書き出しをする。

$ bundle exec s3_website push
...
[info] Summary: Created 6 files. Transferred 30.5 kB, 6.0 kB/s.
[info] Successfully pushed the website to http://[バケット名].s3-website-ap-northeast-1.amazonaws.com

サイトの確認をする。

http://[バケット名].s3-website-ap-northeast-1.amazonaws.com

サイトの更新

ローカルでサイトの編集をし、ビルドをしてから

$ bundle exec jekyll build

書き出せばよい。

$ bundle exec s3_website push

Route53で独自ドメイン運用

せっかくなので独自ドメインでの運用方法も。

Management Consoleにログインし、Route 53を選択。

  • Hosted Zonesを押す。
  • 対象ドメインを選択し、Go to Record Setsを押す。
  • Create Record Setを押す。
Name: [ホスト名]
Type: A - IPv4 address
Alias: Yes
Alias Target: s3-website-ap-northeast-1.amazonaws.com
  • Createを押す。

はい、これだけ。

参考リンク

10
8
0

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
10
8