Create your GitHub repository

Your first step will be create a repository on GitHub. This can be public or private. All the site files will be housed here alongside some configuration for Jekyll to work.

Follow this tutorial and come back when you're done, or move on if you already have a repository.

The next step happens in Visual Studio Code, but you’ll also need an Azure account. Follow this tutorial but stop before the next section. This will walk you through creating your Azure Static Web App and hooking it to Github actions to deploy automatically. Once you have this working and a successful site, you should already be able to hit the external azurewebsites url. You’ll have no content, but the hosting is live already. This step may also be completed this step in the Azure Portal

You could stop here if all you want is a static site publishing automatically. Everything in your repository is going to push to your app now, and if you don’t want Jekyll, you’re done.

NOTE: If you’re going to move forward with Jekyll, you have to set the app location to _site when creating the app. If you forget this step, the workflow yml file has the setting:

app_location: "_site/" # App source code path

This yml file is created for you automatically when you connect the Static Web App to a Github repository. It has everything neessary to publish your static site to your Azure Static Web App. Now it’s time to get your Jekyll pipeline up and running!

Github actions are powerful.

Add this section to your action workflow yml file:

- name: Setup Ruby
uses: ruby/setup-ruby@v1 # v1.127.0
with:
  ruby-version: '3.1' # Not needed with a .ruby-version file
  bundler-cache: true # runs 'bundle install' and caches installed gems automatically
  cache-version: 0 # Increment this number if you need to re-download cached gems
- name: Build with Jekyll
# Outputs to the './_site' directory by default
run: bundle exec jekyll build --baseurl "$"
env:
  JEKYLL_ENV: production

Now the Github action is going to run Jekyll against the repository and output to the _site folder. The static site is setup to load the app from _site, so now everything should be completely hooked up, and you’re ready to start building an actual site.

I created a public Github repository which follows the patterns in this article. The site is freely hosted over at https://azure-jekyll-tutorial.datti.net

All the code is hosted at  https://github.com/kainazzzo/AzureJekyllTutorial