Create your website with Jekyll, Azure and GitHub
In this tutorial I will explain how to create your own static web page, for blog or other projects, for free.
Before we start
Before we start with this tutorial, you will need to have these tools installed:
- Ruby (https://www.ruby-lang.org/en/)
- Git (https://git-scm.com/)
Ruby on Windows can be installed using RubyInstaller, which I will be using (https://rubyinstaller.org/), this is the solution recommended from the official Ruby web page.
Configure git
If it’s the first time you use git on the machine you are on, you must configure these settings. Open a command line and run the following commands, replacing the values for the ones you want:
1
2
git config --global user.name "FIRST_NAME LAST_NAME"
git config --global user.email "MY_NAME@example.com"
Create the needed accounts
For this tutorial we’ll be using Azure and GitHub for setting up and serving our static web page.
The accounts you’ll need:
- Azure
- GitHub
Install Jekyll and Bundler
Once you have Ruby installed on your machine, you will need to install Jekyll and Bundler, these will be installed globally, so you have to do it only one time, unless you download a template from Internet where it might be necessary to install a specify version (and we will see this later on). Open a command line and run the following command:
1
gem install jekyll bundler
Create the repo and upload the website data
We will use a repo to store the data that Jekyll uses for building our web page, this is not where it will be hosted, that would be the Azure Static Web Apps service, but Azure will use this to build our page and the result will be hosted in Azure.
Create a repo in GitHub, name it whatever you like. You can mark it private even with a free account, so only you have access to the Jekyll source of the page. Then clone that new repo to your machine using the git command line:
1
git clone <repo>
Now we will create our Jekyll website, run the following command:
1
jekyll new <site-name>
Replace <site-name> with whatever you want to call your website, and copy the contents of this new folder to the folder that git generated when you cloned your repo. Alternatively, if you are using a template downloaded from Internet, copy the contents of the template to the folder that git created, and run the following command to install all the specific packages that template might need:
1
bundle install
Make all the changes you want, and test that your page is working as expected by running a small test web server with Jekyll:
1
bundle exec jekyll serve
Once everything is ok, push all the files to your repo.
Configuring Azure Static Web Apps
Now go to Azure Portal:
- Select Create resource
- Search for Static Web Apps
- Select Static Web Apps
- Select Create
- On the Basics tab, enter the following values:
| Property | Value |
|---|---|
| Subscription | Your subscription name |
| Resource group | The resource group name *1 |
| Name | The name of the website *1 |
| Plan type | Free |
| Region for Azure Functions API and staging environments | Select a region closest to you |
| Source | GitHub |
*1: The resource group will contain all the resources that are needed for this app to run, I would call it the same as the website name. For example, if my website is Yasoukyoku.com, I would call both the resource group and the Static Web App yasoukyoku.
- Select Sign in with GitHub and authenticate with GitHub
- Enter the following GitHub values:
| Property | Value |
|---|---|
| Organization | Select your desired GitHub organization |
| Repository | Select your GitHub repo name you created previously |
| Branch | Select main (or the branch you are using if you are not using the default) |
- 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 - Select Review + Create, verify that all the values are correct, and then press Create
Once the deployment is complete, click on Go to resource, then on the resource screen, click the URL to open your website, you should see your web site up and running. Take note that it might take some time until the webpage fully builds and gets published on Azure, so wait a little if you don’t see your site up immediately.
From now on, all you have to do to update your website is make changes and push them to the branch you defined when creating the Azure Static Web App, it will automatically run a GitHub workflow, build you website and upload it to Azure.
Next up you can configure your custom domain if you have one. I recommend following the official Microsoft documentation for configuring custom domains with Azure Static Web Apps as it is pretty well explained there.
Remember after configuring the custom domains, depending if you want your page to redirect from non www to www or viceversa, in your Static Web App resource page go to Settings > Custom domains, and there select either the record with apex or with www subdomain and then click on Set default at the top, being the default the one to which it will redirect.