Hosting Jekyll website on Azure Static WebApps
Tags: jekyll, azure, web, staticwebapps
Published: 2021-02-24 16:09:43

---
title: Hosting Jekyll website on Azure Static WebApps
published: true
date: 2020-05-24 23:00:00 UTC
tags: 
 - jekyll
 - azure
 - web
canonical_url: https://www.visualstudiogeeks.com/azure/jekyll/jekyll-website-on-azure-static-webapp
---

Now that Azure now has a free service for hosting static web apps via [Azure Static Web Apps](https://docs.microsoft.com/en-us/azure/static-web-apps/), I decided to write a quick post on how to host Jekyll website on Azure Static WebApps. To my surprise it turned out to be quite simple and easy to host.

<!--more-->
### Jekyll - static site generator

[Jekyll](https://jekyllrb.com/) is a simple, static site generator.

#### Installation

Jekyll website has a good post on [installation](https://jekyllrb.com/docs/installation/) already based on your operating system. You can use WSL (Windows Subsystem for Linux) and it works just fine. If you specifically like to have Windows installation guide, David Burela has posted a neat trick to install it in 3 easy steps [here](https://davidburela.wordpress.com/2015/11/28/easily-install-jekyll-on-windows-with-3-command-prompt-entries-and-chocolatey/) using Chocolatey.

#### Creating a simple blog

Once you have Jekyll working, you can create a simple blog post by running the following command

```bash
jekyll new .
```

This will create a basic a blog structure which will look like below.

![](https://www.visualstudiogeeks.com/images/screenshots/utkarsh/2020-05-26-jekyll-website-on-azure-static-webapp/folder-structure.png)<figcaption>Jekyll folder structure</figcaption>

The `_posts` folder will contain all your blog posts and each post is a markdown file. Each markdown contains a [front matter](https://jekyllrb.com/docs/front-matter/) which allows you to add the meta data for the post.

Now to run your website locally run `jekyll serve` and you will see the blog up and running in local machine under port 4000 at [http://localhost:4000](#).

> Jekyll will build your site using `jekyll build` and store the generated static content in `_site` folder. Your site will be served from this `_site` folder.

![Home Page](https://www.visualstudiogeeks.com/images/screenshots/utkarsh/build-jekyll-website/blog-local.png)

### Source control your website using GitHub

1. Initialise the repo

```bash
 git init
```

2. Commit the changes

```bash
 git add -A
 git commit -m "initial commit"
```

I committed mine [here](https://github.com/utkarshdemos/jekyll-azure-static). Finally push the changes to the repo.

3. Next, create a repo on GitHub (if you have not done already) and add the remote to that GitHub repo.

```bash
 git remote add origin https://github.com/<YOUR_USER_NAME>/jekyll-azure-static
```

4. Finally, push the repo

```bash
 git push --set-upstream origin master
```

### Deploying the to Azure Static Web App

### Create the application

1. Navigate to the Azure portal
2. Click `Create a Resource`
3. Search for Static Web Apps
4. Click `Static Web Apps (Preview)`
5. Click Create
6. Fill the details and click `Sign in with GitHub` button

![](https://www.visualstudiogeeks.com/images/screenshots/utkarsh/2020-05-26-jekyll-website-on-azure-static-webapp/create-static-web-app.png)<figcaption>Create the Static WebApp resource</figcaption>

You will be prompted to authorise the Azure Static WebApp to GitHub. Make sure you `Grant` access to organisation that has the repo.

![](https://www.visualstudiogeeks.com/images/screenshots/utkarsh/2020-05-26-jekyll-website-on-azure-static-webapp/authorise-github.png)

Complete the steps in the popup and you will see the below screen where you will select the `repository` and `organisation`. My values look as below.

![](https://www.visualstudiogeeks.com/images/screenshots/utkarsh/2020-05-26-jekyll-website-on-azure-static-webapp/final-values.png)

> ⚠️ If for any reason, you missed granting access to the right organisation, you have to _Revoke_ that Authorisation from GitHub by going to `Applications` section in the `Settings` and Revoking for `Azure Static Web Apps` as shown below

![](https://www.visualstudiogeeks.com/images/screenshots/utkarsh/2020-05-26-jekyll-website-on-azure-static-webapp/revoke-auth.png)

### Setting up Build

1. Next click `Next: Build >` button to edit the build configuration.
2. Set the `App location` to `_site` since, that is the default folder where Jekyll puts the generated files.
3. No need to fill the `App artifact location` and also `API location` as this is not an API.

![](https://www.visualstudiogeeks.com/images/screenshots/utkarsh/2020-05-26-jekyll-website-on-azure-static-webapp/build-config.png)<figcaption>Build configuration</figcaption>

### Review and create

1. Click the `Review + Create` button to verify the details are all correct.

2. Click `Create` to start the creation of the Azure Static Web Apps and provision a GitHub Action for deployment.

![](https://www.visualstudiogeeks.com/images/screenshots/utkarsh/2020-05-26-jekyll-website-on-azure-static-webapp/create.png)

1. Once you see the notification that resource deployment is successful, the `Azure Static Web App` would have created a workflow for `GitHub Action` on the repository.

2. Navigate to your terminal and pull the commit with the GitHub Action to your machine.

```bash
 git pull
```

3. In the workflow at `.github\workflows\<workflow-file-name>.yml`, replace the line `- uses: actions/checkout@v1` with the following, to build the Jekyll application.

> In the below steps, I am setting up Ruby (needed for installing Jekyll and dependencies), then installing the dependencies (using `bundle install`) and finally calling `jekyll build` to generate the static site.

```yml
    - uses: actions/checkout@v2
      with:
      submodules: true
        
    - name: Set up Ruby
      # To automatically get bug fixes and new Ruby versions for ruby/setup-ruby,
      # change this to (see https://github.com/ruby/setup-ruby#versioning):
      # uses: ruby/setup-ruby@v1
      uses: ruby/setup-ruby@ec106b438a1ff6ff109590de34ddc62c540232e0
      with:
      ruby-version: 2.6

    - name: Install dependencies
      run: bundle install

    - name: Jekyll build
      run: jekyll build

    - name: Build And Deploy
      id: builddeploy
      uses: Azure/static-web-apps-deploy@v0.0.1-preview
      with:
      azure_static_web_apps_api_token: $
      repo_token: $ 
      action: 'upload'
      app_location: '/_site' # App source code path
      api_location: '' # Api source code path - optional
      app_artifact_location: '' # Built app content directory - optional

```

> I had a struggle with this to be honest. Eventually I had to change the `app_location` path to generated `/_site` instead of setting it as just `_site` (see line # 27)

> Refer to the [complete workflow file](https://github.com/utkarshdemos/jekyll-azure-static/actions/runs/115464754/workflow) in the [![GitHub User](https://img.shields.io/badge/github-jekyll--azure--static-brightgreen?logo=github,github-actions)](https://github.com/utkarshdemos/jekyll-azure-static) repository

1. Commit the updated workflow and push to GitHub.

```bash
 git add -A
 git commit -m "Updating GitHub Actions workflow"
 git push
```

2. Wait for the GitHub Action to complete.

3. In the Azure portal’s Overview window of newly created Azure Static Web Apps resource, click the URL link to open your deployed application. You can check the the demo site [here](https://purple-pebble-02aed5b03.azurestaticapps.net)

![](https://www.visualstudiogeeks.com/images/screenshots/utkarsh/2020-05-26-jekyll-website-on-azure-static-webapp/final.png)

Isn’t it cool! Go check it out.