publish-jekyll.md

title	description	services	author	ms.service	ms.topic	ms.date	ms.author
Tutorial: Publish a Jekyll site to Azure Static Web Apps	Learn how to deploy a Jekyll application to Azure Static Web Apps.	static-web-apps	craigshoemaker	static-web-apps	tutorial	05/11/2021	cshoe

Tutorial: Publish a Jekyll site to Azure Static Web Apps

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

In this tutorial, you learn how to:

[!div class="checklist"]

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

[!INCLUDE quickstarts-free-trial-note]

Prerequisites

• Install Jekyll
  • You can use the Windows Subsystem for Linux and follow Ubuntu instructions, if necessary.
• An Azure account with an active subscription. If you don't have one, you can create an account for free.
• A GitHub account. If you don't have one, you can create an account for free.

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-azure-static

3. Push your local repo up to GitHub.

   git push --set-upstream origin main

   [!NOTE] Your git branch may be named differently than main. Replace main in this command with the correct value.

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. Select Create a Resource

3. Search for Static Web Apps

4. Select Static Web Apps

5. Select Create

6. On the Basics tab, enter the following values.

   Property	Value
   Subscription	Your Azure subscription name.
   Resource group	jekyll-static-app
   Name	jekyll-static-app
   Plan type	Free
   Region for Azure Functions API and staging environments	Select a region closest to you.
   Source	GitHub

7. Select Sign in with GitHub and authenticate with GitHub.

8. Enter the following GitHub values.

   Property	Value
   Organization	Select your desired GitHub organization.
   Repository	Select jekyll-static-app.
   Branch	Select main.

9. In the Build Details section, select Custom from the Build Presets drop-down and keep the default values.

10. In the App location box, enter ./.

11. Leave the Api location box empty.

12. In the Output location box, enter _site.

Review and create

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

2. Select Create to start the creation of the App Service Static Web App and provision a GitHub Actions for deployment.

3. Once the deployment completes click, Go to resource.

4. On the resource screen, click the URL link to open your deployed application. You may need to wait a minute or two for the GitHub Actions to complete.

   :::image type="content" source="./media/publish-jekyll/deployed-app.png" alt-text="Deployed application":::

Custom Jekyll settings

When you generate a static web app, a workflow file is generated which contains the publishing configuration settings for the application.

To configure environment variables, such as JEKYLL_ENV, add an env section to the Azure Static Web Apps GitHub Actions in the workflow.

- name: Build And Deploy
   id: builddeploy
   uses: Azure/static-web-apps-deploy@v1
   with:
      azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
      repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for GitHub integrations (i.e. PR comments)
      action: "upload"
      ###### Repository/Build Configurations - These values can be configured to match you app requirements. ######
      # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
      app_location: "/" # App source code path
      api_location: "" # Api source code path - optional
      output_location: "_site" # Built app content directory - optional
      ###### End of Repository/Build Configurations ######
   env:
      JEKYLL_ENV: production

Clean up resources

[!INCLUDE cleanup-resource]

Next steps

[!div class="nextstepaction"] Add a custom domain