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
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.
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.
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