Skip to content
Open Source Blog

This article will show how to build a blog (or any other static content) using a very popular JAMstack (GatsbyJS, GraphQL, Markdown) and host it on static website hosting for Azure Storage, which provides a cost effective and scalable solution for hosting static content and JavaScript code.

We will demonstrate how to optimize the website and provide global reach by enabling Azure CDN. And, to make all the blog posts continuously build and deploy to Azure, we will utilize Azure Pipelines. Then, we will provision Azure resources using the simple and powerful language of  Terraform and a Docker container running inside the pipeline.  The following diagram shows the workflow described in the article:

What is JAMstack

Static site generators have been around for a while — tools like Jekyll and Hugo are widely adopted. Recently the notion of JAMstack is making a buzz. It is a modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup. The main difference with traditional CMS based systems (like Drupal or WordPress) is that there is no backend logic or persistence layer access — everything is encapsulated in the API.

Image from jamstack.org

The key benefits are:

  • Faster to load – just static files, no server side
  • Cheaper – no servers to maintain
  • Easier to scale – serve files in more places like CDN
  • Developer experience – easier to develop
  • Security – best practices encapsulated in API

You can see a lot of JAMstack examples listed on their site here.

Why GatsbyJS

GatsbyJS is a new player in JAMstack and is quickly gaining popularity. At the time of this writing, it is in the fourth place according to https://staticgen.com.

What makes GatsbyJS especially attractive is the power of the latest web technologies – React.js, Webpack, modern JavaScript, and GraphQL API.

Image from gatsbyjs.org

The process for building the site in Gatsby could be summarized as:

  • Defining data sources (GitHub markdown in our example)
  • Querying data with GraphQL and making it available to the page
  • Rendering data using React components
  • Generating static pages and hosting it (Azure Static site in our example)

Among the main benefits of GatsbyJS is the usage of familiar frontend technologies such as React and Webpack, extensibility – it has tons of plugins (PWA, SEO, etc.), optimized performance, and build tooling. The only downside I noticed is that for now it does not have as many themes built by communities as for Hugo or Jekyll, but it is already growing.

Creating a Gatsby site

For my blog I have chosen clean and simple GatsbyJS minimal blog starter: https://github.com/LekoArts/gatsby-starter-minimal-blog. It has all the basic features and plugins already integrated – Markdown, Styled components, offline support, and SEO. To start, the site based on this template, install Gatsby CLI and generate the site (the only prerequisite is node.js):

npm install --global gatsby-cli
gatsby new gatsby-site https://github.com/LekoArts/gatsby-starter-minimal-blog

To start the generated site in develop mode that supports hot reload:

>cd gatsby-site
>gatsby develop

success update schema — 0.623 s
success extract queries from components — 0.734 s
success run graphql queries — 0.208 s — 4/4 20.57 queries/second
success write out page data — 0.150 s
success write out redirect data — 0.006 s
⡀ onPostBootstrapdone generating icons for manifest
success onPostBootstrap — 0.501 s
info bootstrap finished - 157.202 s
 DONE  Compiled successfully in 20983ms                                                                                                 

You can now view gatsby-starter-minimal-blog