Static website on Amazon S3

Previous post Hello World with Jekyll describes how to get started with Jekyll. Next we will look at how to deploy a static website on Amazon S3. Storage services like S3 is easy, cheap and reliable service for serving a static website. This tutorial use S3, but there are other storage services providing the similar functionality.

Amazon AWS

Go to Amazon login, create an account if needed, and login to AWS console.

AWS login

Create S3 bucket

Name the bucket jekyll-web-site.

Configure bucket

Edit jekyll-web-site bucket’s policy to enable website hosting.

// Bucket policy
{ 
  "Version":"2012-10-17",
  "Statement":[{
	"Sid":"AddPerm",
        "Effect":"Allow",
	  "Principal": "*",
      "Action":["s3:GetObject"],
      "Resource":["arn:aws:s3:::jekyll-web-site/*"
      ]
    }
  ]
}

Notice the bucket name jekyll-web-site in the bucket policy above.

Test bucket configuration (optional step)

Upload a simple index.html file to bucket root and visit bucket url. If Hello World, as shown below, then the bucket have been configured correctly.

<!-- index.html -->
<html>
  <body>
    <h1>Hello, World!</h1>
  </body>
</html>

Deploy hello-world-jekyll

Now the bucket is ready to serve HTML content. Go to your Jekyll project and jekyll build to generate your site.

dan@binsy:~/Projects/hello-world-jekyll$ jekyll build
Configuration file: /Users/dan/Projects/hello-world-jekyll/_config.yml
            Source: /Users/dan/Projects/hello-world-jekyll
       Destination: /Users/dan/Projects/hello-world-jekyll/_site
      Generating... 
                    done.
 Auto-regeneration: disabled. Use --watch to enable.

Upload _site to bucket root.

Yay, hello-world-jekyll is now available on the Internet :)