Navigate back to the homepage

How I set up my blog

Patrick Zhao
March 31st, 2019 · 4 min read

Initiative

I had been a WordPress blogger for over one year time. I was on a Blogger plan which costs $48.0 a year and I also purchased a domain for $30.05 a year. A total cost of $78.05 annually seems too much for a blogging site. When I received a notification from WordPress for renewing my subscription and domain for the coming year, I sat down and had a thought that I might need to review my personal expectation/requirement for my blog. WordPress is the most popular content management system especially good for blogging while it could be an overkill for me.

Requirement Analysis

I basically needs the following features for my blog site

  • A static site without interactive features such as comments or tipping
  • Easy CMS process, I don’t mind blogging in markdown language
  • Cheap or no database persistance
  • Basic SSL and straight forward configuration
  • Easy to migrate my blog content to new template in future
  • Most importantly - $ as cheap as possible

I now see my blog a place to share my experience and stories for my career and any technology related topics. Features that I don’t need now are:

  • Searching - I don’t have many blogs now and in near future);
  • Commenting - Audience who has any question can reach me via other social media links easily

As a result, I have made a decision to host my blog as a static site. For the CMS part, I am open to write my blog as code and generate the site by building my code.

Architecture Overview

After a close look and analysis about my own requirement, I started searching for technologies that suit my need.

Firstly, Azure Blog Storage comes to my mind when I think about the key term “Static Site”. Azure Blog Storage is super cheap plus it is fully capable of hosting static site.

Then I started considering the content management requirement. If I follow the traditional pattern, I will need a content management system and some kind of storage to save my content. However, as I specified in my requirement analysis, I could simplify the workflow by writing my blog as code and build it into a static site using a static site template. Now, the problem becomes which templating system/library suites my need.

I heard about GatsbyJS from one of my friends a while ago. Recently at my company - SSW, my colleagues have built a side using GatsbyJS for our SSW people. The feedback I have heard about GatsbyJS is quite positive. GatsbyJS is easy to start with and it has a rich template marketplace for developers to pick template from. Also, it is based on React and as an Angular Developer for a long time, I am always keen to learn React and see how it is different from Angular.

Architecture Design

The architecture of my blog is

  • Blog in markdown in GitHub
  • Using GatsbyJS blog template to generate the static site
  • GitHub action will pick up my blog update and run a workflow to build a static site and upload to Azure Blog storage static site
  • Blog site is hosted as static site with custom domain I purchased via Godaddy
  • SSL is configured via Cloudflare proxy
Patrick Zhao Blog Architecture

Step-by-step story

With the architecture decision made above, I start implementing my blog site.

Purchase a custom domain from Godaddy

I simply went to https://au.godaddy.com and look for a domain that interests me, then I purchased it and now you are reading this blog from the domain. Godaddy does offer some SSL certificate options, they are all too expensive for me as a blogger. So I am not using their SSL service.

Instead, I have decided to use Cloudflare to act as a proxy and provides a Cloudflare Universal SSL certificate. To set it up, I followed the steps below

Once it’s complete, when I log in my account, I can see the dashboard as below.

Cloudflare Dashboard

Out of the box, Cloudflare offers a universal SSL as shown below

Cloudflare Edge Certificate

Next, go back to the domain provider to configure it point to Cloudflare name server. The name servers fields need to be set to point to Cloudflare servers as below.

Godaddy Name Servers Configurations

After we have completed configuring the SSL gateway and domain, we can now start to implement my blog.


Blog Template

According to my requirement listed above, easier to scaffold and maintain is the top one requirement of the template tool I am choosing. I am using the Novela Theme which is one of the most popular among Gatsby themes.

To set it up, I literally followed the steps they specified on their Github repo:

Step 1: Starter installation

With gatsby-cli:
1gatsby new novela-site https://github.com/narative/gatsby-starter-novela
With git clone:
1git clone [email protected]:narative/gatsby-starter-novela.git novela-site
2
3cd novela-site
4
5yarn

Step 2: Develop & Build

Once installed or cloned locally and all packages are installed you can begin developing your site.

1# Run localhost
2yarn dev
3
4# Build your Gatsby site
5yarn build

Once the project has been scaffolded, there are couple of places which worth highlights.

  • Authors folder
    • Author description ./content/authors/authors/{name}.yml
    • Avatar ./content/authors/authors/avatars/{your-avatar}.jpg
  • Posts folder
    • Content of blog post ./content/posts/YYYY-MM-DD-{title}/index.md
    • Images of the blog post ./content/posts/YYYY-MM-DD-{title}/images/{place-blog-images}

I’m now ready to start my blogging journey…but hold on..how can I let others to see my blog? Yes we need to host our blog post on to our domain name. But how?


Hosting and DevOps

I am going to need a simple hosting option that allows easy configuration to point to my custom domain that we purchased from Godaddy earlier.

I decided to use Azure Storage Account and it allows hosting static site easily. I followed the following steps

  • Go to Azure Portal and create a storage account
  • Enable static website from Static website blade
    • Make sure the index document name is set to index.html
  • On the Custom domain blade, add the domain name
Custom Domain Configuration
  • Next, all we need to do is to upload our blog content (html files, images..etc) onto the blog directory $web

I want to automate the DevOps process so that I don’t need to manually upload the files built on my local machine onto the cloud blog storage we created and configured above.

I am going to use GitHub Actions to automate the process. The workflow is defined as an YML file under .github\workflows folder

1name: Build and deploy to Azure Storage as static Site
2
3on:
4 push:
5 branches: [ develop ]
6 pull_request:
7 branches: [ develop ]
8
9jobs:
10 buildAndPublish:
11 runs-on: ubuntu-latest
12
13 strategy:
14 matrix:
15 node-version: [12.x]
16
17 steps:
18 - name: Branch Check Out 🛎️
19 uses: actions/[email protected]
20 with:
21 persist-credentials: false
22
23 - name: Use Node.js ${{ matrix.node-version }}
24 uses: actions/[email protected]
25 with:
26 node-version: ${{ matrix.node-version }}
27
28 - name: NPM Install 🛠
29 run: npm install
30
31 - name: NPM Run Build 🔨
32 run: npm run build
33
34 - name: Azure Storage Action 🚀
35 uses: lauchacarro/[email protected]
36 with:
37 enabled-static-website: 'true'
38 folder: 'public'
39 connection-string: ${{ secrets.BLOG_STORAGE_CONNECTION_STRING }}
40 env:
41 CI: true

Few things to highlight in the workflow above

  • It is triggered by the [ develop ] branch
  • The connection-string ${{ secrets.BLOG_STORAGE_CONNECTION_STRING }} is defined in Secrets menu under Settings
  • You can find the Actions template from this link

Now, we are all done. All we need to do is to commit our change and push to remote, then you should see this post on my blog 😄

More articles from Copyright Patrick Zhao 2021

Building a modern WebRTC streaming solution using Agora

The global pandemic has changed the way people communicate. Online streaming has become a new fashion and norm . I will show you how easy it is to build a reliable and scalable streaming solution using Agora

December 3rd, 2020 · 1 min read

Headless and headache-less

Headless CMS is popular now. It helps you manage your content at the backend and integrate with the data persistence of your own choice. It also leaves you the freedom to design and implement your own front end.

March 4th, 2020 · 3 min read
© 2019–2020 Copyright Patrick Zhao 2021
Link to $https://twitter.com/paladinapayLink to $https://github.com/PatrickZhao1989Link to $https://www.linkedin.com/in/patrickzhao1989/