Preparation
Push Jekyll Project to Github Repository
while AWS amplify support multiple repository, github will be used on this article. below are the project repository url
https://github.com/deganandapriyambada/playpumpkin.com
with following project skeleton:
drwxr-xr-x@ 19 deganandaferdian staff 608 Sep 4 23:11 .
drwxr-xr-x 29 deganandaferdian staff 928 Aug 10 11:26 ..
-rw-r--r--@ 1 deganandaferdian staff 8196 Sep 4 22:47 .DS_Store
drwxr-xr-x 14 deganandaferdian staff 448 Sep 4 23:13 .git
-rw-r--r-- 1 deganandaferdian staff 41 Sep 4 21:27 .gitignore
drwxr-xr-x 4 deganandaferdian staff 128 Sep 4 21:45 .jekyll-cache
-rw-r--r-- 1 deganandaferdian staff 393 Sep 4 21:27 Gemfile
-rw-r--r-- 1 deganandaferdian staff 3150 Sep 4 21:43 Gemfile.lock
-rw-r--r-- 1 deganandaferdian staff 2112 Sep 4 23:11 _config.yml
drwxr-xr-x 7 deganandaferdian staff 224 Sep 4 23:12 _drafts
drwxr-xr-x 5 deganandaferdian staff 160 Sep 4 22:19 _includes
drwxr-xr-x 5 deganandaferdian staff 160 Sep 4 22:14 _layouts
drwxr-xr-x 5 deganandaferdian staff 160 Sep 4 22:14 _posts
drwxr-xr-x 3 deganandaferdian staff 96 Sep 4 23:06 _sass
drwxr-xr-x 9 deganandaferdian staff 288 Sep 4 23:12 _site
drwxr-xr-x 5 deganandaferdian staff 160 Sep 4 22:53 assets
-rw-r--r-- 1 deganandaferdian staff 871 Sep 4 23:11 index.html
-rw-r--r-- 1 deganandaferdian staff 269 Sep 4 21:27 readme.md
-rw-r--r-- 1 deganandaferdian staff 0 Sep 4 22:12 sw.js
explanation:
1.Gemfile store list of ruby package that used for the jekyll project
# frozen_string_literal: true
source "https://rubygems.org"
# gem "rails"
gem "jekyll"
gem "jekyll-paginate"
gem "jekyll-paginate-categories"
gem "jekyll-paginate-tags"
gem 'jekyll-feed'
gem 'jekyll-sitemap'
gem 'jekyll-archives'
gem 'jekyll-tagging-related_posts'
gem 'jekyll-last-modified-at'
gem 'jekyll-loading-lazy'
gem 'jekyll-glossary_tooltip'
gem 'wdm', '>= 0.1.0', platform: :mingw
2.Config.yml - jekyll plugins configuration and site configuration (eg : title, description, max post per page, etc)
3._includes - a folder that store html web component (eg: header, sidebar, footer, etc) 4.Layout - layout for each mardown types. Post, category and tag has their own html layout. 5.Assets - store the images used on the posts 6._site - dist folder. Contain the compiled html files generated by jekyll for each page.
Hence, _site folder need to be picked by AWS Amplify (after the project has been bult)
Deploy to AWS
go to aws console launcher and search for aws amplify project.
AWS Amplify can be found on the console launcher
Create new App
inside the aws amplify landing page, click the create new app button on the top right.
Choose the repository sources
There are several repository supported by jekyll :
- github
- bitbucket
- gitlab
- Commit
however, the _site file can also be zipped and manually uploaded to the AWS Amplify (not recommended).
manualy deployment is not recommended, any changes will need manual intervention.
Ideally, it should be retrieved from the repo, build and deploy each time there is changes on the release branch (master/release).
Choose appopriate repository that used by the project.
by default Jekyll is not supported by AWS Leave tempalte as unchoosen. Need to pre-determine the deployment script manually.
define the release branch name and repository name
Release branch configuration and Repository name
Configure the deployment script
AWS Amplify has its own CICD (based on AWS services), it will not use the repository CICD such as github action.
AWS has a deployment pipeline config file called as amplify.yml
Similar with azure devops yaml or jekyll yaml. A-Z deployment steps will be determined here. From pulling the code, build and deploy.
Jekyll (version 4.x) project build steps.
Other version might have slightly different steps, but the main logic is the same.
Pre-build
- Determine ruby version (jekyll is based on ruby) eventhrough the final build output is plain html.
- add ruby to the path
- set language UTF-8 (to avoid any issue on the jekyll markdown redering)
- Install the bundle based on Project gemfile that contains list of ruby package for jekyll project and its depedencies.
preBuild:
commands:
- rvm install 3.1.3
- rvm use 3.1.3
- pip install --user jupyter
- export PATH=$PATH:/root/.local/bin
- export LANG=C.UTF-8
- export LC_ALL=C.UTF-8
- bundle install
Build
re-execute steps 1 ~ 3 from prebuild and build the jekyll project
build:
commands:
- export PATH=$PATH:/root/.local/bin
- export LANG=C.UTF-8
- export LC_ALL=C.UTF-8
- bundle exec jekyll build
Set dist folder
by default jekyll will build the project output on _site folder. Artifact need to be pointed on those folder after prebuild and build completed
artifacts:
baseDirectory: _site
files:
- "**/*"
Final Amplify.yaml for AWS Amplify deployment pipeline.
version: 1
frontend:
phases:
preBuild:
commands:
- rvm install 3.1.3
- rvm use 3.1.3
- export PATH=$PATH:/root/.local/bin
- export LANG=C.UTF-8
- export LC_ALL=C.UTF-8
- bundle install
build:
commands:
- export PATH=$PATH:/root/.local/bin
- export LANG=C.UTF-8
- export LC_ALL=C.UTF-8
- bundle exec jekyll build
artifacts:
baseDirectory: _site
files:
- "**/*"
cache:
paths: []
make sure the yaml file is properly configured and click “save & deploy”
Deploy using predefined amplify.yml
Deployment result
once deployment is iniated, AWS Amplify will execute the cicd pipeline that determined on the amplify.yml
all the deployment detailed logs can be seen on the overview page
Access the deployed jekyll project
all html generated by jekyll inside _site folder will be automatically deployed on specific aws amplify url / sub domain.
https://master.d3rbadms89ye7m.amplifyapp.com/
After the deployment is completed and successful. Go to the amplifyapp url to see the deployed jekyll project.
