Jekyll is one of the most popular Static Site Generators (SSGs), widely used by the developer community to create blogs, portfolios, and personal websites. This article explains how to build a Jekyll site with GitHub Actions and deploy it for free with Kinsta’s Static Site Hosting.
Static Site Hosting is a free service to deploy static files (HTML, CSS, JS), currently in BETA. To use it before it becomes generally available, join the Kinsta Research Program and gain access to all beta features released by Kinsta. You can then contribute back to Kinsta by reporting bugs and leaving feedback.
Kinsta’s Static Site Hosting can automatically build sites from SSGs and web applications built on top of Node.js. To serve other static content, such as static sites generated by Jekyll (built on Ruby), we need another approach.
Requirements
For this tutorial, we assume you have:
- Experience with Jekyll and Git.
- A Jekyll website up and running locally.
To follow along, you can use this sample codebase as a reference.
Deploy Your Jekyll Website to Kinsta
There are different ways to deploy your Jekyll website to Kinsta, such as:
- Using Kinsta’s Application Hosting.
- Using Kinsta’s Static Site Hosting via either of these methods:
- A. Building your website with Continuous Integration and Continuous Deployment (CI/CD) before deploying to Kinsta.
- B. Serving your static files only.
In this article, we walk you through both methods of deploying Jekyll with Kinsta’s Static Site Hosting.
A. Build Your Website With GitHub Actions Before Deploying to Kinsta
This method uses a GitHub Actions (GHA) workflow to build your website to a specific branch (deploy) and use this branch to deploy the generated static files to Kinsta.
To use this method, as we use GitHub Actions, your codebase must be hosted on a GitHub repository (public or private). But you can use other CI/CD tools to achieve the same result.
The most significant advantages of this method are:
- You can further implement Continuous Integration (CI) processes for your site, for example, a
testand/or alintstage to check your code. - Your site is built automatically at every push to your repo. You don’t need to build it before pushing.
- You guarantee that your website is only updated if the CI/CD pipeline is completed successfully.
Steps:
- Open your terminal on your Jekyll site’s repository root.
- Create a new orphan (empty) branch (
deploy) and push it to your repo:
git switch --orphan deploy
git commit --allow-empty -m "Initial commit on deploy branch"
git push -u origin deployDon’t add any files to this branch. It will be automatically populated by the GitHub Actions workflow with the contents of the generated Jekyll’s _site folder.
- Checkout the
mainbranch:
git checkout main- Create a .github/workflows directory in
main.
- To configure GHA, create a new file gh-actions.yml under .github/workflows with the following content:
name: Deploy Jekyll
on:
# The workflow runs only on pushes to the branch
push:
branches: ["main"]
workflow_dispatch:
jobs:
build:
name: Build
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v4
- name: Setup Ruby
uses: ruby/setup-ruby@v1
with:
ruby-version: '3.2'
- name: Set up Jekyll
run: gem install bundler && bundle install
- name: Build site
run: bundle exec jekyll build
env:
JEKYLL_ENV: production
- name: Upload artifact
uses: actions/upload-artifact@v3
with:
name: compiled-site
path: _site
deploy:
name: Deploy
needs: build
runs-on: ubuntu-latest
permissions:
contents: write
steps:
# Commit and push the artifacts to the branch
- uses: actions/checkout@v4
with:
ref: deploy
- name: Download artifacts
uses: actions/download-artifact@v3
with:
name: compiled-site
path: _site
- name: Commit and push
# Replace "" with your GH org or user name
run: |
git config user.name ""
git config user.email "@users.noreply.github.com"
git pull origin deploy
git add _site
git commit -m "Auto generated from ${GITHUB_SHA::7}"
git push - Commit and push the code to
mainbranch.
At every push to the main branch, the GitHub Actions workflow:
- Builds your Jekyll website with the static files under _site.
- Creates artifacts with the content of _site.
- Checks out the
deploybranch. - Commits _site changes to the
deploybranch.
To update your site, you only need to push your changes to the main branch.
Do not push changes to the deploy branch directly. You can opt for locking this branch on GitHub to avoid unintended pushes.
See how to deploy it to Kinsta below.
B. Build Your Website Locally and Deploy it Directly to Kinsta
As an alternative to the method above, you can build your site locally (and update the content of the _site folder locally), then push the contents of your Jekyll’s _site folder to a repository (on GitHub, GitLab, or Bitbucket). By using this method, you don’t need GH Actions or any other CI/CD tool to build your site on every push to your repo, so it’s much simpler than the previous method.
The drawback of this method is that you must build your site contents before every push to your repository.
This method uses only the contents of the _site folder and directly serves them on Kinsta Static Site Hosting.
Steps:
- Open your repo’s .gitignore file and remove the line with
_site. - Commit and push the _site folder to your repo.
To update your website, ensure you build your site with Jekyll before pushing it to your repo.
Deploy Your Jekyll Site to Kinsta With Static Site Hosting
GitHub Actions Method
If you used the GitHub Actions workflow to build your website, follow the steps below to deploy it with Kinsta’s Static Site Hosting.
- Login to your MyKinsta account or create a new one.
- Subscribe to the Kinsta Research Program.
- Go to your MyKinsta’s dashboard.
- Click the menu icon in your screen’s top-left corner.
- From the sidebar, click Static Sites.
- On the top-right corner, click Add site.
- Authorize your Git provider.
- Select your repository.
- Select the
deploybranch as the Default branch (where the content of the _site folder is located). - Select Automatic deployment on commit to deploy your site at every push to your repo.
- Add a unique Display name to your site and click Continue.
- Set up your build settings:
- Build command: leave empty.
- Node version: leave as-is.
- Publish directory:
_site.
- Click Create site.
Kinsta deploys your site and prompts you with the default site URL. You can then add your own custom domain and your own SSL certificate if you’d like.
Local Build Method
If you used the local build method, follow these same steps to deploy your website. You only need to change the branch you want to deploy from (in step 8). Instead of the deploy, use main or any branch of your preference.
Summary
This article provided you with two possible methods to deploy your Jekyll website with Kinsta’s Static Site Hosting.
The first method uses CI/CD to build your application and generate the content of the _site folder on another branch of your repository. The greatest advantages of using this method with Kinsta Static Site Hosting are:
- With CI/CD, there are numerous processes you can add to your site.
- You deploy your site with an outstanding hosting service and serve it with maximum performance.
- You don’t need a GitHub premium account to keep your repository private (as you would if you use GitHub Pages, for example).
In the second method, we build Jekyll locally and push the content of the _site folder to the same branch as the rest of your Jekyll files. It can be repeated for repos hosted in other Git providers (GitLab and Bitbucket) with no further configuration needs. It is the simplest method but with the inconvenience of having to build your site before every push to your repo.
Additionally to these options, you can opt to deploy your Jekyll site with Kinsta’s Application Hosting. It provides greater hosting flexibility, a more comprehensive range of benefits, and access to more robust features. For example, scalability, customized deployment using a Dockerfile, and comprehensive analytics encompassing real-time and historical data.
Read more articles about static websites on the Kinsta Blog.
Marcia Ramos
I’m the Editorial Team Lead at Kinsta. I’m a open source enthusiast and I love coding. With more than 7 years of technical writing and editing for the tech industry, I love collaborating with people to create clear and concise pieces of content and improve workflows.
