DEV Community

Cover image for Host Jekyll Site in AWS S3
Taufek Johar
Taufek Johar

Posted on Originally published at blog.taufek.dev on

Host Jekyll Site in AWS S3

In previous post, I’ve wrote about on how to push a Jekyll site to Heroku. In this post it will be about how I host this blog in AWS S3 bucket.

Turns out it is much simpler to do it in S3.

Create a S3 bucket

Create a S3 bucket and enable Web Hosting in the properties.

Configure Github Action

You will need to configure following secrets in your Github setting.

  1. AWS_S3_BUCKET with your bucket name.
  2. AWS_ACCESS_KEY_ID with your AWS access key id.
  3. AWS_SECRET_ACCESS_KEY with your AWS secret access id.
name: Sync to S3

on:
push:
branches:
    - master

        jobs:
        deploy:
        runs-on: ubuntu-latest
        steps:
    - uses: actions/checkout@v1

    - name: Retrieve Gem Bundles Cache
        uses: actions/cache@v2
        with:
        path: _bundle
        key: ${{ runner.os }}-gems-${{ hashFiles('**/Gemfile.lock') }}
        restore-keys: |
        ${{ runner.os }}-gems-

    - name: Generate site
        run: |
        mkdir -p _bundle/cache
        chmod a+rwx -R .
        docker-compose run -e JEKYLL_ENV=production jekyll bundle install
        docker-compose run -e JEKYLL_ENV=production jekyll bundle exec jekyll build --trace

    - uses: jakejarvis/s3-sync-action@master
        with:
        args: --acl public-read --follow-symlinks --delete
        env:
        AWS_S3_BUCKET: ${{ secrets.AWS_S3_BUCKET }}
        AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
        AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
        AWS_REGION: 'ap-southeast-1'
        SOURCE_DIR: '_site'

With a push to master branch, it will trigger a build which will

  1. Checkout code from master branch.
  2. Generate Jekyll static files.
  3. Push generated files inside _site folder to your S3 bucket.

Conclusion

This seems like a cheaper option for hosting a static site and have SSL configured in CloudFront compared to paying for a dyno in Heroku to host a site with SSL. For Heroku, I will need to pay atleast $7/month for a dyno and for CloudFront it will based on usage. Since my blog does not have much visitors, my AWS bill is very small which is around $1/month. This includes S3, Route 53 and CloudFront services.

Top comments (0)