In this post I’ll explain how to set up a blog with the best performance and security you can get for free for the first year and for less than $1/month afterwards. The setup uses Jekyll to build your blog, and Amazon Web Services (AWS) S3 and CloudFront to host it and serve it to visitors. The first year of AWS will be free (unless you have a huge site with a lot of traffic). After the first 12 months you’ll probably pay less than $1 per month to AWS.

Set up the Jekyll

Jekyll is an application for creating blogs and websites. What is special about Jekyll is that it generates a static version of your site, in this case your blog.

jekyll-logo

If you are using a Mac, installing it is straight forward since Macs come with Ruby installed by default. Open the Terminal application and type the following:

~ $ gem install jekyll
~ $ jekyll new my-awesome-site
~ $ cd my-awesome-site
~/my-awesome-site $ jekyll serve

If you are on Windows, you may need to install Ruby first. Use this great step by step tutorial to run Jekyll on Windows.

Once you have Jekyll installed, you may want to use a different template from Jekyll Themes.

Finally, you will need to write your blog posts. You have to create your blog posts inside the _posts folder. Or if you want to start with a draft, you will have to create a _drafts folder and add it there. There are some rules to follow for the filename and the structure of the post. They are very easy to learn. Everything is described on the Jekyll website.

If you want to be more productive, focus on the content and get a consistent style for all your posts, I suggest you use a text editor (I use Sublime Text but any other will do) and a markup language like Markdown. It comes with Jekyll by default and if you have used a wiki before, the syntax will be familiar to you. The best thing is that you don’t need to care about the HTML markup at all and hence can focus on creating great content.

Hosting: Amazon Web Services

In order to host your site and deliver it with the best performance we will use Amazon S3 and Amazon Cloudfront. S3 is a redundant cloud storage solution where you will store your blog and Cloudfront is a Content Delivery Network that caches your site in multiple locations around the globe so that when a visitor access your site they get the content from the closest location, dramatically reducing lattency. This combined with the fact that your site is pre-generated will make your blog lightning fast.

Before you start uploading your blog to S3 and you configure Cloudfront you need to (create an AWS account)[http://aws.amazon.com/free/].

Once you have your account created, go to the AWS Management Console and follow the steps below.

AWS Management Console

AWS Management Console

Set up S3

  1. Go to S3 under Storage & Content Delivery
  2. Click on “Create Bucket”
    1. Select a Bucket Name. I recommend you use the url you are going to use for your blog. For example: mybeautifulsite.com.
    2. Select a Region. Select the one that is closer to where you are since you will be uploading your blog files to a server in that region. For example, I’ve selected Ireland since I am Europe.
  3. The bucket will appear in the list of buckets.
  4. Click on the bucket name and then on the Properties tab to access its properties.
  5. Under Permissions, select “Add bucket policy” and copy paste the following code (make sure you replace mybeautifulsite.com with the name of your bucket):
     
    1
     2
     3
     4
     5
     6
     7
     8
     9
     10
     11
     12
     13
     14
    {
       "Version": "2012-10-17",
       "Statement": [
         {
           "Sid": "AddPerm",
           "Effect": "Allow",
           "Principal": {
           "AWS": "*"
           },
           "Action": "s3:GetObject",
           "Resource": "arn:aws:s3:::mybeautifulsite.com/*"
         }
       ]
     }
    
  6. Under Static Web Hosting
    1. Select “Enable website hosting”.
    2. Enter index.html in the “Index Document” field.
    3. Enter the path to the error page in your blog in the “Error Document” field. In the template I’m using that page is 404.html on the root of my site.
    4. Click Save.
  7. Note down the value of Endpoint under “Static Website Hosting”.
Bonus

If you have a domain you want to redirect to your blog you can also use S3 for that. For example, you may want to redirect www.mybeautifulsite.com to mybeatutifulsite.com.

To do that you have to

  1. Create another S3 bucket for the url that you want to redirect. For example, you can name it www.mybeautifulsite.com.
  2. Click on the bucket name and then on the Properties tab to access its properties.
  3. Under “Static Web Hosting”, select “Redirect all requests to another host name”.
    1. Enter your blog url, for example, mybeautifulsite.com in the “Redirect all requests to” field.
    2. Click Save.
  4. Update the DNS
    1. Note down the value of Endpoint under “Static Website Hosting”.
    2. Go to your DNS management tool usually provided by your domain registrar and enter a CNAME entry for your.alternative blog hostname (ex: www.mybeautifulsite.com) that points the Endpoint value.

Set up CloudFront

  1. Go to CloudFront under Storage & Content Delivery.
  2. Click on “Create a Distribution”.
  3. Click on “Get Started” under Web.
  4. Fill in the details:
    1. Origin Domain Name – enter the S3 Endpoint from your main S3 bucket. Don’t use the autocompletion feature.
    2. Object Caching – you may want to use Customize to refresh the caches sooner. The default value is 48 hours.
    3. Leave all other fields with default values.
    4. Click on “Create Distribution”.
  5. Click on the newly created distribution.
  6. Click on Edit to update the distribution settings:
    1. Price Class – select “Use All Edge Locations (Best Performance)”.
    2. Alternate Domain Names (CNAMEs) – enter your blog hostname. Example: mybeautifulsite.com.
    3. Default Root Object – enter index.html.
    4. Click “Yes, Edit”.
  7. Update the DNS
    1. Note down the value of “Domain Name” under the General tab of your distribution.
    2. Go to your DNS management tool usually provided by your domain registrar and enter a CNAME entry for your.alternative blog hostname (ex: www.mybeautifulsite.com) that points the “Domain Name” value.

Publish your blog

You are finally ready to publish your blog. The last step is to push your content to S3 which will in turn will push your content to CloudFront as it is being accessed by visitors.

Tu publish your site I suggest you use s3_website but before you can do that, you must create AWS API credentials with sufficient privileges:

  1. Go to the AWS Management Console.
  2. Under Security & Identity select “Identity & Access Management”.
  3. Add a new policy:
    1. Click on Policies in the sidebar.
    2. Click on “Create Policy”.
    3. Select “Create Your Own Policy”.
    4. Enter a name. For example: mybeautifulsite.com.
    5. Copy and paste the following code into the “Policy Document” textarea (replace mybeautifulsite.com with the name of the S3 bucket where you will be hosting your blog):
     
    1
     2
     3
     4
     5
     6
     7
     8
     9
     10
     11
     12
     13
     14
     15
     16
     17
     18
     19
     20
     21
    {
       "Version": "2012-10-17",
       "Statement": [
         {
           "Effect": "Allow",
           "Action": "s3:ListAllMyBuckets",
           "Resource": "arn:aws:s3:::*"
         },
         {
           "Sid": "Stmt1455493198000",
           "Effect": "Allow",
           "Action": [
             "s3:*"
           ],
           "Resource": [
             "arn:aws:s3:::mybeautifulsite.com",
             "arn:aws:s3:::mybeautifulsite.com/*"
           ]
         }
       ]
     }
    
  4. Add a new user:
    1. Click on Users in the sidebar.
    2. Click on “Create New Users”.
    3. Enter a user name, for example, mybeautifulsite.com. Make sure “Generate an access key for each user” is checked.
    4. Click on “Show User Security Credentials” and take note of your Access Key ID and your Secret Access Key.
    5. Click on the newly added user.
    6. Go to the Permissions tab.
    7. Click on “Attach Policy.
    8. Select the policy you just created before.
    9. Click “Attach Policy”

Once that is done we can move forward getting your content published to S3:

  1. Install s3_website and create the configuration file:
    ~ $ gem install s3_website
    ~ $ cd my-awesome-site
    ~/my-awesome-site $ s3_website cfg create
  2. Edit s3_website.yml and set the following parameters:
    1. s3_id – enter the API Access Key ID for the AWS user you created before.
    2. s3_secret – enter the API Secret Access Key for the AWS user you created before.
    3. s3_bucket – the name of the S3 bucket where you will be hosting your website.
    4. s3_endpoint – the region that you set when you created your S3 bucket. Check AWS for the right value to use in your case.
  3. Build your blog:
    ~/my-awesome-site $ jekyll build
  4. Push your blog to S3:
    ~/my-awesome-site $ s3_website push

That’s it, you have completed the setup 🙂

Whenever you have new changes to your blog, just build your jekyll website and push the changes to S3 (steps 3 and 4). Just bear in mind that your changes may not be visible in your blog immediately because of CloudFront is caching the pages. If you want to see what you have pushed you can open your S3 Endpoint url in your browser.