For a first blog post, I wanted to go simply to the point by writing you a small tutorial on how to set up this blog, so that you can reproduce it yourself.
Choosing the right solution
Choosing the right solution to create your blog is not necessarily easy as there are so many solutions available: hosted CMS, ready to use blog platform, static applications… The best thing is to define your initial needs so that you don’t end up with a gas factory to manage.
First attempt using OrchardCore
I already tried to use another framework to build this blog, which is OrchardCore, a powerful dotnet CMS well known by the community. But there was some drawbacks that I found pretty annoying, such as:
- The cost on Azure: To setup Orchard properly on Azure, you need an AppService, an AppService Plan and a mySql Database instance. The appservice plan can be setted to Basic so it doesn’t cost you anything. But it’s not the case of the mySQL DB instance which can cost you up to 6 euros a month at the lowest tier.
- The heavy user experience behind Orchard admin panel.
- The lack of customization on UI.
As Orchard is a wonderful project and can fit many other usecases, I didn’t find it very handy for writing a personal blog. So I decided to turn to a lighter, simple and mostly free solution on Azure to setup my blog, the Azure static web apps.
Why choosing Azure static web apps ?
Mainly because:
- Azure offers a free hosting plans for personal projects or blogs for static web apps.
- You don’t need any dependancies other than the static web app itself on Azure, no db or app service plan cost.
- You get free SSL certificates from Azure
- You can make awesome looking blogs using popular open-source static site generators like Hugo or Gatsby. I personally choosed Hugo.
- Your blog remains light, hyperfast, and editable easily using markdown.
Creating the blog
Prerequisities:
- An Azure account, which is completely free .
- A GitHub account, which … also free 😁
Building and pushing our blog on GitHub
So here we go ! First, we’ll create a repository, build and test our blog locally using Hugo.
-
Follow the instructions to install the Hugo framework on your machine, I personnally use Windows and installed it using Chocolatey.
-
Create a new hugo app using this command:
hugo new site my-personal-blog
- Go into your app dir and init a new Git repo with a main branch:
git init
git branch -M main
- Now we’ll choose a Hugo theme for our blog, and add it to the current app. You can find a lot of gorgeous Hugo themes here . I personnally used charlolamode which is simple and classy ✨ When your theme is found, add it to the project using the command provided in the theme installation instructions page. For example, for charlolamode:
git submodule add https://github.com/charlola/hugo-theme-charlolamode.git themes/charlolamode
echo "theme: charlolamode" >> config.yml
- You can now start you app:
hugo server
Access it via http://localhost:1313 to see what it looks like !
-
Now on GitHub, create a new repository that will contain your blog:
-
Commit all your changes to your main branch:
git add .
git commit -m "init"
- Then link you local repository to your remote GitHub repo:
git remote add origin https://github.com/<YOUR_USER_NAME>/my-personal-blog
git push --set-upstream origin main
Deploying on Azure
Nice ! 🔥 Now your app is hosted on your private GitHub repository. We will use it as a source to deploy on the Azure static webapp.
-
On your Azure portal , create a new Static web app:
-
Then enter the details on your app and connect to your GitHub account in order to let Azure get the sources from there. Select Free plan type, your main branch, Hugo in build presets and keep others values to default:
Note that if you click on the Preview workflow file button, it will show you the yaml definition of CI/CD pipeline, also known as Github Action. It is this file that defines how your sources are built using GitHub actions and deployed on Azure.
When creating the static web app, Azure automatically generates a yaml pipeline for us. This file will be contained in our repo in this location: .github\workflows
-
Hit the Review + Create button. Your app is now created on Azure and you will notice that a new GitHub Action is happening on GitHub on your repository. Github has actually triggered to pipeline to deploy on Azure. Each time you push on your main branch, it’ll trigger a github workflow and push the new content on your static app ! Each of your pipeline triggers can be seen in the Action tab on your GitHub repo.
-
Your app is deployed ! ❤️ Access it using the url provided in your Azure static web app overview in Azure Portal.
Adding content to the blog
Now time to add some content to our blog 🔥
To add a new post, generally you’ll have add a markdown file with the name of your new post under the /posts folders. But this can change depending on the theme you are using. So keep an eye on the installation instructions page of the theme you choose, it will certainly contain some hints about how to add a new post.
For example, using charlolamode theme that I modified a little bit, I put my posts under /content/blog/
After adding a new markdown file (and its content), you’ll see your new post instanly in the posts list, as hugo uses a hot reload mode:
Then push it to main 💣
git add .
git commit -m "first post"
git push
Keep in mind that every time you want to make changes to your blog, you’ll have to commit and push on main to trigger deployment.
To go further
Now you know how to setup your blog using Azure static web apps and Hugo ! You can go even further by setting a custom domain on your static app. You can by one on GoDaddy and configure your domain using Azure DNS.
I hope this post has been helpful.
Happy coding and blogging 👨💻❤️