{"componentChunkName":"component---src-templates-post-template-js","path":"/posts/cicd-for-jekyll-websites","result":{"data":{"markdownRemark":{"id":"18a9c24e-bab1-5761-93e0-9f8d9682e106","html":"

CICD for Jekyll Websites

\n

Intro

\n

I am going to show you how easy it is to set up a simple pipeline that will be able to automatically deploy the latest changes of your jekyll website everytime you push to master.\nThis ensures that the latest deployed copy of your website is always in sync with the master branch, and simplifies the deployment by controlling it with familiar git tools.

\n

Pre-requisites

\n

In order to follow along you will need

\n\n

Deploying the site

\n

In order to deploy my blog I have to create an S3 bucket with website setup. This is extremely simple, just follow these steps

\n\n

Now in order to deploy the website, all I have to do is run the following\njekyll build && aws s3 sync _site s3://<my-bucket-name>

\n

Unfortunately, this requires that I have the correct AWS credentials whenever I run this command, and I still have to invoke it manually each time there’s an update.\nSo, using AWS CodePipeline I can set this up automatically!

\n

Automating the deployment

\n

First we need to create a buildspec.yml file which will tell the pipeline how to build the blog/website/whatever program you’re creating.\nBy convention, it’s easier if you keep this file in the root of your project directory.

\n

The buildspec.yml

\n
version: 0.2\nphases:\n  install:\n    commands:\n      - gem install jekyll  \n  pre_build:\n    commands:\n      - bundle install\n  build:\n    commands: \n      - echo "Building site"\n      - JEKYLL_ENV=production jekyll build \n      - echo "Copying to S3"\n      - aws s3 sync _site s3://$BUCKET_NAME\n      - echo "Success"
\n

Now, we need to set up AWS CodePipeline and CodeBuild to run this on each push to master.\nWe do this via CodePipeline. I use CloudFormation to template the pipeline, so I can easily provision (and update/remove) AWS resources. I save the template under ci/cicd.yml.\nThe template can be found on this website’s repo.

\n

The template will provision a CodePipeline with a source stage and a build stage. The source stage will trigger based on the parameters of the template. The build stage simply delegates to our buildspec.yml. The bucket it will deploy to is specified as a parameter in the template.

\n

Given the template is located at ci/cicd.yml, you can deploy the template as follows:

\n
aws cloudformation deploy \n  --stack-name website-cicd \\\n  --capabilities CAPABILITY_NAMED_IAM \\\n  --template-file ci/cicd.yml \\\n  --parameter-overrides \\\n      GithubBranch=master \\\n      GithubRepo=<Your repo> \\\n      GithubOwner=<Your github username> \\\n      GithubToken=<Your github token> \\\n      BucketName=<Bucket to deploy to>
\n

Once that has successfully completed, you should be able to push any changes on your blog, and it will automatically deploy to the specified S3 bucket.

\n

Conclusion

\n

As you can see it’s very simple to add CICD for a simple jekyll blog using AWS CodePipeline. Although pretty pointless and probably overkill for this type of project, this can easily be extended to support multiple different types of projects, as most of the work is done in the buildspec.yml.

","fields":{"slug":"/posts/cicd-for-jekyll-websites","tagSlugs":["/tag/post/","/tag/jekyll/","/tag/cicd/"]},"frontmatter":{"date":"2018-04-09T00:00:00.000Z","description":"How to set up continuous integration and deployment for a jekyll blog using AWS tools","tags":["post","jekyll","cicd"],"title":"CICD for Jekyll Websites","socialImage":"/media/cicd-header.jpeg"}}},"pageContext":{"slug":"/posts/cicd-for-jekyll-websites"}}}