Installing Jekyll on Amazon S3, CloudFront and GoDaddy DNS

Categories

  • jekyll

Now that you have created your shiny new Jekyll site it’s time to move past the local server hosting on http://127.0.0.1:4000

  1. Login to Amazon AWS Console
  2. Click on S3 under storage
  3. Click the create bucket button
  4. Name your bucket with your domain name (ex: www.example.com) and place whatever comment you like.
    • The buckets name has to be unique across all bucket names, that’s why you should use your domain.
    • Select the region that makes sense for you
  5. Click next to enter the configuration options step. I left everything unchecked, do what you like.
  6. Under permissions uncheck “Block all public access” and accept the warning.
  7. Click next, review your setup and create the bucket.
  8. Select your newly created bucket by clicking on it.
  9. Click on the permissions tab.

  10. Click on bucket policy and enter the text below, changing out www.example.com for your domain.

    {
"Version": "2012-10-17",
"Statement": [    {
    "Sid": "AddPerm",
    "Effect": "Allow",
    "Principal": "*",
    "Action": "s3:GetObject",
    "Resource": "arn:aws:s3:::www.example.com/*"
}
    ]
}
    • I’ll be honest here I haven’t read up on the AWS Version numbers and how the work. This one works, you can change it but it will need to be a valid version number.
  11. Click Save.
    • You will now see that your permissions tab has a “public” marker on it.

Enable static website hosting

  1. Click the Properties tab.
  2. Click on Static website hosting.
  3. Enter the name of your index document as index.html.
  4. Enter the name of your error document as 404.thml.
  5. Click Save.

Install and Configure the Amazon CLI

For my purposes I am installing this on an Ubuntu system. For a great tutorial on this with pretty pictures, visit Linuxhint

  1. sudo apt update
  2. sudo apt install awscli
  3. aws configure
  4. Enter the information that makes sense for you.

Note: You can create an AWS access key by logging into the AWS console. Clicking on your user in the top right. My Security Credentials. And visiting the “Access keys” drop down. Note2: Visit the AWS Service endpoints page for more information on the available regions.

Upload your project to the Bucket

There are a number of ways to accomplish this goal. You could just take the contents of your built project under the _site directory and manually upload the files by clicking the upload button when you have selected your bucket.

To make things easy lets install the Jekyll ‘s3_website’ Gem.

  1. Edit your Gemfile and add the following to the bottom of the file:

     gem 's3_website'
  2. Run bundle install
  3. Run s3_website cfg create
  4. Edit the newly created s3_website.yml file.

  5. Edit the following:

     profile: <%= ENV['AWS_PROFILE'] %>
 s3_bucket: <%= ENV['S3_BUCKET'] %>

    Adding in your id/secret and uploading this code to a public repository such as Github is a surefire way to have a bad day. Keep your secrets secret and never use your root AWS account.

You should now have all of your _site content inside your bucket.

Wait my site looks like hot garbage?

If none of your css/js/image assets are loading, it is likely due to the change in your baseurl.

While editing locally on your system you are likely using http://localhost:4000. When looking at the source for your page you will see things similar to:

<link rel="stylesheet" href="/assets/css/main.css">

But now that you have deployed them to an S3 bucket they should look like:

<link rel="stylesheet" href="/www.my.bucket.name.ca/assets/css/main.css">

You can remedy this issue by setting the baseurl setting in your _config.yml file to be your bucket name:

baseurl: "www.my.bucket.name.ca/"

After executing a bundle exec jekyll serve to rebuild your _site folder and then executing a push to Amazon as outlined above everything should work in the Bucket.

But, if you were to visit localhost:4000 everything is broken here since you do not have the same baseurl structure on your local machine.

The easiest way to resolve this issue is to copy your _config.yml file to _config_dev.yml and remove the baseurl entry. When building locally for your development environment use the command:

bundle exec jekyll serve --config _config_dev.yml

Get yourself a certificate

In order to run this site with https enabled, we will need to get our hands on a signed certificate. We will be able to do this using the AWS Certificate Manager.

  1. Under Services select AWS Certificate Manager.
  2. Click Request a certificate
  3. Select Request a public certificate and click the Request a certificate button.
  4. Add your domain names. Make sure you add mydomain.com and www.mydomain.com
  5. Select DNS validation and click next.
  6. Add some tags if you like and click review.
  7. After clicking Confirm and request you will be given a CNAME entry for each of your domain entries. You need to add these CNAME entries to your DNS manager in GoDaddy or your host of choice.

After these CNAME entries are added it’s just a waiting game. You need to wait for all the DNS records to be propagated. Take a 15 minute break.

Configuring CloudFront

  1. In your AWS console select CloudFront, under Services->Network & Content Delivery
  2. Click Create Distribution
  3. Under Web, click Get Started
  4. Under Origin enter the URL for the S3 bucket that is hosting your files.
    • there are entries that come up in the drop down. Don’t use these manually enter the url for your bucket.
  5. Origin Protocol set to HTTP Only
  6. Under Default Cache behavior, set Viewer Protocol Policy to Redirect HTTP to HTTPS
  7. Make sure you enter your Default Root Object to be index.html
  8. In the Distribution Settings section set SSL Certificate to Custom SSL Certificate and select the cert you created in the above step.
  9. Click Create Distribution

After CloudFront has distributed all of your content you should be able to able to go to https://blahblahblah.cloudfront.net and see your site. (Once again the CSS may be messed up due to the BASE_URL being off, this will be resolved in the final steps)

  • Note that this may take some time for CloudFront to build all the distributions for your site.

Configuring GoDaddy DNS

  1. Add a CNAME to your dns for www pointing to xxxxxxxxxxx.cloudfront.net
  2. Under Forwarding select Forward to https
  3. For the url I enter www.yourdomain.com to redirect yourdomain.com to www.yourdomain.com. I didn’t have any luck doing it the other way arround since the CNAME in your DNS is for a www entry, pointing at CloudFront.
  4. Forward Type: Permanent (301)
  5. Settings: Forward Only
  6. Save

After the DNS entries have updated you should be able to navigate to https://yourdomain.com and see your content rendered properly with the correct CSS since we now have a / baseurl.