Deploy a Jekyll Site for Free With GitHub Actions and Kinsta Static Site Hosting

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.

  1. Checkout the main branch:
git checkout main
  1. Create a .github/workflows directory in main.
  1. 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
  1. 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.

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.

  1. Login to your MyKinsta account or create a new one.
  2. Subscribe to the Kinsta Research Program.
  3. Go to your MyKinsta’s dashboard.
  4. Click the menu icon in your screen’s top-left corner.
  5. From the sidebar, click Static Sites.
  6. On the top-right corner, click Add site.
  7. Authorize your Git provider.
  8. Select your repository.
  9. Select the deploy branch as the Default branch (where the content of the _site folder is located).
  10. Select Automatic deployment on commit to deploy your site at every push to your repo.
  11. Add a unique Display name to your site and click Continue.
  12. Set up your build settings:
    1. Build command: leave empty.
    2. Node version: leave as-is.
    3. Publish directory: _site.
  1. 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.

The post Deploy a Jekyll Site for Free With GitHub Actions and Kinsta Static Site Hosting appeared first on Kinsta®.

版权声明:
作者:lichengxin
链接:https://www.techfm.club/p/75237.html
来源:TechFM
文章版权归作者所有,未经允许请勿转载。

THE END
分享
二维码
< <上一篇
下一篇>>