Tutorial: Publish a Jekyll site to Azure Static Web Apps Preview

This article demonstrates how to create and deploy a Jekyll web application to Azure Azure Static Web Apps.

In this tutorial, you learn how to:

  • Create a Jekyll website
  • Setup an Azure Static Web Apps
  • Deploy the Jekyll app to Azure

If you don't have an Azure subscription, create a free account before you begin.

Prerequisites

Create Jekyll App

Create a Jekyll app using the Jekyll Command Line Interface (CLI):

  1. From the terminal, run the Jekyll CLI to create a new app.

    jekyll new static-app
    
  2. Navigate to the newly created app.

    cd static-app
    
  3. Initialize a new git repository.

     git init
    
  4. Commit the changes.

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

Push your application to GitHub

Azure Static Web Apps uses GitHub to publish your website. The following steps show you how to create a GitHub repository.

  1. Create a blank GitHub repo (don't create a README) from https://github.com/new named jekyll-azure-static.

  2. Add the GitHub repository as a remote to your local repo. Make sure to add your GitHub username in place of the <YOUR_USER_NAME> placeholder in the following command.

    git remote add origin https://github.com/<YOUR_USER_NAME>/jekyll-static-app
    
  3. Push your local repo up to GitHub.

    git push --set-upstream origin master
    

Deploy your web app

The following steps show you how to create a new static site app and deploy it to a production environment.

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. For Subscription, accept the subscription that is listed or select a new one from the drop-down list.

  7. In Resource group, select New. In New resource group name, enter jekyll-static-app and select OK.

  8. Next, provide a name for your app in the Name box. Valid characters include a-z, A-Z, 0-9 and -.

  9. For Region, select an available region close to you.

  10. For SKU, select Free.

    Details filled out

  11. Click the Sign in with GitHub button.

  12. Select the Organization under which you created the repo.

  13. Select the jekyll-static-app as the Repository.

  14. For the Branch select master.

    Completed GitHub information

Build

Next, you add configuration settings that the build process uses to build your app. The following settings configure the GitHub Action workflow file.

  1. Click the Next: Build > button to edit the build configuration.

  2. Set App location to /_site.

  3. Leave the App artifact location blank.

    A value for API location isn't necessary as you aren't deploying an API at the moment.

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.

  3. The deployment will first, fail because the workflow file needs some Jekyll-specific settings. To add those settings, navigate to your terminal and pull the commit with the GitHub Action to your machine.

    git pull
    
  4. Open the Jekyll app in a text editor and open the .github/workflows/azure-pages-<WORKFLOW_NAME>.yml file.

  5. Replace the line - uses: actions/checkout@v1 with the following configuration block.

    - uses: actions/checkout@v2
      with:
        submodules: true
    - name: Set up Ruby
      uses: ruby/setup-ruby@ec106b438a1ff6ff109590de34ddc62c540232e0
        with:
        ruby-version: 2.6
    - name: Install dependencies
        run: bundle install
    - name: Jekyll build
        run: jekyll build
    
  6. Commit the updated workflow and push to GitHub.

    git add -A
    git commit -m "Updating GitHub Actions workflow"
    git push
    
  7. Wait for the GitHub Action to complete.

  8. In the Azure portal's Overview window, click the URL link to open your deployed application.

    Deployed application

Clean up resources

If you're not going to continue to use this application, you can delete the Azure Static Web App resource through the following steps:

  1. Open the Azure portal
  2. In the top search bar, search for your application by the name you provided earlier
  3. Click on the app
  4. Click on the Delete button
  5. Click Yes to confirm the delete action

Next steps