Crealanta Magazine

Install a Jekyll Website and GitHub Actions (r)

Oct 20, 2023
Deploy a Jekyll site on

-sidebar-toc>

's Static Site Hosting can automatically build sites from SSGs and web applications built upon top of Node.js. To serve other static content, such as static sites generated by Jekyll (built upon Ruby) We require an alternative approach.

Requirements

For this guide, we will assume that you are:

  • The experience of Jekyll and Git.
  • A Jekyll site is up and operating locally.

For a better understanding to follow along, use this example codebase as a reference.

Set Up Your Jekyll Website to

There are many ways to make your Jekyll website  the following methods:

  • Utilizing's static site hosting using one of the following methods:
  • A. Building your site with Continuous Integration and Continuous Deployment (CI/CD) prior to deploying it to .
  • B. Serving static file exclusively.

In this blog in this post, we'll walk you through both methods to deploy Jekyll using's Static Site Hosting.

A. Make Your Website with the GitHub API before deploying to

This technique makes use of the GitHub Actions (GHA) workflow for building your website. It creates a specific branch ( deploy) using this branch. It then uses that branch to distribute the created static files .

In order to use this technique, as we use GitHub Actions to execute the actions you want, your source code must be hosted on an GitHub repository (public or private). You can also use other CI/CD tools to achieve similar results.

The most significant advantages of this method are:

  • Further, you can use Continuous Integration (CI) processes on your site, like testing your code with a test or stage called a lint stage for checking the software.
  • Your site is built automatically with each push to your repo. There is no need to create it before publishing.
  • Your website is only updated if the CI/CD pipeline has been complete.

Steps:

  1. Start your terminal in the Jekyll site's repository root.
  2. Create a new empty (empty) branch ( deploy) and add the branch 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. The branch will automatically be populated by the GitHub Actions workflow with the items in the created Jekyll's site directory.

  1. Visit the branch that is the main branch:
git checkout main
  1. Make the .github/workflows directory in the main.
  2. To set up GHA to be configured, you need to create a brand new file called gh-actions.yml under .github/workflows with the following information:
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
  1. The code is committed and pushed into the the main branch.

Every time you push the main branch it triggers the workflow of GitHub Actions:

  1. Builds your Jekyll website using the static files located under the _site.
  2. Produces artifacts using the contents of the website.
  3. Make sure to check out the deployment branch.
  4. Makes site modifications into the deploy branch.

For updating your website it is enough the changes you make into the main branch.

Do not push changes to the branch directly. Do not push changes to the branch directly. It is possible to consider the branch to be locked this branch on GitHub in order to stop unintentional pushes.

See below for how to deploy it to below.

B. Create Your Website Locally, and Deploy it Directly to

The drawback of this method is the fact that it is that you must create your website's content prior to each push to your repository.

This method uses only the content of the folder _site folder. It then connects them to Static Site Hosting.

Steps:

  1. Go to the repository's .gitignore file and take out the line that begins with the _site.
  2. Commit and push the site folder to your repo.

If you want to update your site make sure you develop your site using Jekyll before committing it to the repo.

Install Your Jekyll Website to Static Site Hosting

GitHub Actions Method

If you used the GitHub Actions workflow to build your website, then follow these steps to set it up it using's static site Hosting.

  1. Log in to your My account or create a new one.
  2. Log into your My's dashboard.
  3. Click the menu icon in your screen's top-left corner.
  4. In the sidebar, you can click on Static Sites..
  5. In the upper-right hand corner Click on the top-right corner. to add the site.
  6. Authorize your Git provider.
  7. Choose the repository you want to use.
  8. Choose the deploy branch as the default branch (where the content of the _site folder is stored).
  9. Choose Automated deployment when you commit to deploy your site each time you push your repo.
  10. Create a unique display name to your site then click to continue.
  11. Create your build configurations:
  12. Create command to leave the command empty.
  13. Node version  Leave the Node version as is.
  14. Publish directory: _site.
  15. Click for Create Site.

Local Method of Construction

If you chose to use the build locally method then follow the same steps for deploying your site. You only need to change your branch that you would like to deploy from (in step 8). Instead of deploy option, choose primary or whichever branch of your preference.

Summary

This article gave you two ways to launch your Jekyll website with 's Static Site Hosting.

This method employs the CI/CD method to create your application and generate the content of the site folder on another branch of your repository. The main benefits that this technique offers over Static Site Hosting is:

  • With CI/CD you can choose from a myriad of ways you can incorporate CI/CD into your site.
  • The site you create is hosted with an a top hosting provider and deliver it to you with top efficiency.
  • There is no need for an GitHub premium account in order to keep your repository secure (as you would using GitHub Pages, for instance).

If we choose the second approach, we develop Jekyll locally before transferring the content from the site folder into the same branch as the other Jekyll files. It can be repeated with repos hosted on other Git service providers (GitLab or Bitbucket) and there are no additional setup requirements. This is the easiest way, however it has the disadvantage of building your website before each push to your repository.

Marcia Ramos

I'm the Editorial Team Lead at . I'm a open source enthusiast and I love coding. Over the past seven years of writing technical content as well as editing experience in the tech industry, I love collaborating with people to produce short and precise articles and enhance workflows.