Deploy a Jekyll Site With Kinsta and GitHub Actions

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 test and/or a lint stage 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:

1. Open your terminal on your Jekyll site’s repository root.
2. 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 deploy

Don’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.

3. Checkout the main branch:

git checkout main

4. Create a .github/workflows directory in main.

5. 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 <main> 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 <deploy> 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 "<username>" with your GH org or user name
        run: |
          git config user.name "<username>"
          git config user.email "<username>@users.noreply.github.com"
          git pull origin deploy
          git add _site
          git commit -m "Auto generated from ${GITHUB_SHA::7}"
          git push

6. Commit and push the code to main branch.

At every push to the main branch, the GitHub Actions workflow:

1. Builds your Jekyll website with the static files under _site.
2. Creates artifacts with the content of _site.
3. Checks out the deploy branch.
4. Commits _site changes to the deploy branch.

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:

1. Open your repo’s .gitignore file and remove the line with _site.
2. 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.