A Git setup installed. If you don't have one, you can install Git.
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.
Bash
jekyll new static-app
Go to the newly created app.
Bash
cd static-app
Initialize a new Git repository.
Bash
git init
Commit the changes.
Bash
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.
Region for Azure Functions API and staging environments
Select a region closest to you.
Source
GitHub
Select Sign in with GitHub and authenticate with GitHub.
Enter the following GitHub values.
Property
Value
Organization
Select your desired GitHub organization.
Repository
Select jekyll-static-app.
Branch
Select main.
Note
If you don't see any repositories, you may need to authorize Azure Static Web Apps on GitHub.
Browse to your GitHub repository and go to Settings > Applications > Authorized OAuth Apps, select Azure Static Web Apps, and then select Grant. For organization repositories, you must be an owner of the organization to grant the permissions.
In the Build Details section, select Custom from the Build Presets drop-down and keep the default values.
In the App location box, enter ./.
Leave the Api location box empty.
In the Output location box, enter _site.
Review and create
Select Review + Create to verify the details are all correct.
Select Create to start the creation of the App Service Static Web App and provision a GitHub Actions for deployment.
Once the deployment completes, select Go to resource.
On the resource screen, select the URL link to open your deployed application. You may need to wait a minute or two for the GitHub Actions to complete.
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.
YAML
- name:BuildAndDeploy 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
If you're not going to continue to use this application, you can delete the Azure Static Web App resource through the following steps:
Build end-to-end solutions in Microsoft Azure to create Azure Functions, implement and manage web apps, develop solutions utilizing Azure storage, and more.