Home Azure Static WebApps hosting Jekyll with GitHub
Post
Cancel

Azure Static WebApps hosting Jekyll with GitHub

Table of Contents

Expected knowledge level:

  • Jekyll: Novice
  • Azure™: Novice
  • GitHub: Novice

Cost of this Deployment for One Month

As each region price varies below price is created in the Central US region, and the prices are at the time of the blog:

Product Cost Region
Resource Group Free Central US
Static Web App Free Central US

Total: Free for 250MB of max app size and less than 100GB per subscription per month.

Overview

This post will explain how to host a static website on Microsoft Azure™ via Azure Static Web Apps, using Jekyll and GitHub.

Jekyll

Jekyll is a static site generator that takes your content, renders Markdown and Liquid templates, and spits out a complete, static website. An example of Jekyll sites are GitHub Pages, Twitch Developers Documentations, and Jekyll.

Installation

On Jekyll website has a installation post based on your operating system. You can use Windows Subsystem for Linux (WSL).

Create Jekyll App

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

jekyll new .

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

The _posts folder will contain all your blog posts, and you typically write posts in Markdown.

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 Home Page

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.

  1. Navigate to the newly created app.
    cd static-app
    
  2. Initialize a new Git repository.
     git init
    
  3. 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 Azure-Static-WebApps-hosting-Jekyll.
  2. Add the GitHub repository as a remote to your local repo. Make sure to add your GitHub username in place of the USERNAME placeholder in the following command.
    git remote add origin https://github.com/USERNAME/Azure-Static-WebApps-hosting-Jekyll
    
  3. Push your local repo up to GitHub.
    git push --set-upstream origin main
    

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

Deploying to Azure Static 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 Click Create a Resource
  3. Search for Static Web Apps
  4. Click Static Web Apps
  5. Click Create Click Create
  6. Fill the details and click Sign in with GitHub button Fill the details
  7. Sign into GitHub Sign in GitHub
  8. Click Authorize Azure Azure-App-Service-Static-Web-Apps button Authroize GitHub
  9. 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. Fill Build Detail
  10. Review Settings and Press Create Review and Create
  11. Once the deployment completes click, Go to resource.
  12. 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 Action to complete. Azure Static Web App
https://docs.microsoft.com/en-us/azure/static-web-apps/
https://docs.microsoft.com/en-us/azure/static-web-apps/publish-jekyll
This post is licensed under CC BY-SA 4.0 by David Marker