Tutorial: Publish a Jekyll site to Azure Static Web Apps Preview
In this tutorial, you learn how to:
- Create a Jekyll website
- Setup an Azure Static Web Apps
- Deploy the Jekyll app to Azure
- 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):
From the terminal, run the Jekyll CLI to create a new app.
jekyll new static-app
Navigate to the newly created app.
Initialize a new git repository.
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.
Create a blank GitHub repo (don't create a README) from https://github.com/new named jekyll-azure-static.
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
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
Navigate to the Azure portal.
Click Create a Resource.
Search for Static Web Apps.
Click Static Web Apps (Preview).
For Subscription, accept the subscription that is listed or select a new one from the drop-down list.
In Resource group, select New. In New resource group name, enter jekyll-static-app and select OK.
Next, provide a name for your app in the Name box. Valid characters include
For Region, select an available region close to you.
For SKU, select Free.
Click the Sign in with GitHub button.
Select the Organization under which you created the repo.
Select the jekyll-static-app as the Repository.
For the Branch select master.
Next, you add configuration settings that the build process uses to build your app. The following settings configure the GitHub Action workflow file.
Click the Next: Build > button to edit the build configuration.
Set App location to /_site.
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
Click the Review + Create button to verify the details are all correct.
Click Create to start the creation of the Azure Static Web Apps and provision a GitHub Action for deployment.
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.
Open the Jekyll app in a text editor and open the .github/workflows/azure-pages-<WORKFLOW_NAME>.yml file.
Replace the line
- uses: actions/checkout@v1with 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
Commit the updated workflow and push to GitHub.
git add -A git commit -m "Updating GitHub Actions workflow" git push
Wait for the GitHub Action to complete.
In the Azure portal's Overview window, click the URL link to open your 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:
- Open the Azure portal
- In the top search bar, search for your application by the name you provided earlier
- Click on the app
- Click on the Delete button
- Click Yes to confirm the delete action