Building with Gatsby
24th Sepetember, 2018
As a freelance developer I have been in a fortunate position of having small but regular work but now with an aim to grow my business further I felt it was time to address the one thing that I lacked and that was my online presence; or lack of; when it came to my own website. It was also an opportunity to try new things, new ways of working and new frameworks and move away from ASP.NET MVC 4 that I had invested many hours with over for the past ten years and seen grow up from its initial conception way back in 2002.
I also had to dust off my design skills and reacquaint myself with prototyping software. This, like the development also saw me shift my skills away from Adobe Photoshop to use Adobe Illustrator and then at the latter stages Adobe XD.
Design process
I started the process of building my new site at the design and prototyping stage, although I have heard of great things with the Sketch app, this is currently only available for MacOS, so as a Windows user I decided to adopt Adobe Illustrator instead.
Using Adobe Illustrator I first designed the initial home page, creating separate artboards for each viewport size, this was easy to do, requiring me to copy across the elements from one artboard to the other and then adjusting the necessary components to work with the reduced width. I found this new prototyping and design process easier, more flexible and more efficient to use rather than the old days of using Adobe Photoshop. It also had the added advantage of having the various elements ready and waiting for export as SVG assets which all modern browsers now support.
With the home page designed I turned my attention designing the other pages that would make up the new website and this saw me shift away from using Adobe Illustrator, instead looking to use Adobe XD with its promise of going from concept to prototype faster. It’s an all-in-one UX/UI solution for designing websites, mobile apps, and more. It has a relatively easy learning curve which allowed me to quickly put together the other pages that I required. The design process for the other pages went incredibly fast and I feel moving forwards I will adopt Adobe XD from the beginning using Adobe Illustrator solely for asset creation.
Development stage
With the design stage now complete I turned my attention to the development, I knew I wanted to move away from using the Microsoft web architecture of ASP.NET and their Visual Studio IDE. Instead adopting Visual Studio Code which is a free open-source Microsoft developed source code editor for Windows, Linux and macOS. This has become a popular tool for web development due to its ease of use, extensive array of plugins and being cross platform.
With this as one of my requirements I had to choose what language and framework I would build my new site with. Having recently been reading up on the use of static site generators like Jekyll, Hugo and Gatsby and as my site wouldn’t be heavily dynamic I knew building my site with a framework like ASP.NET Core 2 would be overkill. As I would be responsible for content updates I could also take advantage of not requiring a content management system. However knowing that there are options available if this did become a requirement also helped me to commit to build my site with a static site generator. Static sites load pages and content much more quickly than dynamic sites, with dynamic sites needing multiple back and forth calls to a server in order to fully render. Furthermore displaying a web page, a static site by its very nature simply has to render static content requiring far fewer calls to a server as well as not requiring any server side code. This therefore is less overhead and a big gain in performance.
I quickly decided on using Gatsby (www.gatsbyjs.org) as my static site generator of choice as it employs some of the latest web technologies such as React to create static PWAs (progression web apps). It also utilises GraphQL at build time to retrieve data and content from data sources including Markdown documents and content management systems.
My first hurdle was getting to grips with a completely new way of developing a website, being both new to React and Gatsby but I quickly managed to get to grips with the core structure of a Gatsby site. After installing their command line interface it was an easy task to create, develop and build a site. I started from one of their minimal predefined templates but there is a growing number of templates to choose from including templates that will set up the core structure if using a CMS like Contentful. As Gatsby uses React I quickly found out that everything was built with components which took me a while to get my head around but now feels natural and allows for many benefits including React’s approach to DOM rendering. As an example, here’s a simple index page component that utilises a reusable Header and Footer.
import React from "react";
import Header from "../components/header";
import Footer from "../components/footer";
export default () => (
<div>
<Header className="Home Page">
<p>
<strong>Index page</strong>
</p>
</Header>
<p>Welcome to the index page and my GatsbyJS playground</p>
<Footer />
</div>
);Challenge: JavaScript
My second hurdle to overcome was understanding how Gatsby and React handle client side JavaScript especially as a Gatsby site is a progressive single page web app. I found my initial prototype JavaScript either failed to load or was called in the wrong places. Working my way through both the Gatsby tutorial and their supporting documentation I quickly discovered the best way to integrate client side JavaScript was to embed it into a component. As an example my Google map script used to reference a separate JavaScript file but now the JavaScript code has been moved into a reusable Map React component reducing page load times.
With Gatsby fast becoming an enjoyable way to develop a website I turned by attention to two more new skills that I would require, GraphQL and Markdown. GraphQL was initially developed by Facebook but now publicly released and is a more efficient, powerful and flexible alternative to REST by allowing clients to define the structure of the data required. Markdown on the other hand is a lightweight markup language with plain text formatting syntax and is designed so that it can be converted to HTML or any other format. Using both GraphQL and Markdown allows the site to be content driven with pages being saved as a Markdown document and GraphQL used at build time to retrieve these documents and build out the necessary pages. As an example the GraphQL query to retrieve blog posts for the Blog index page can be seen below.
query blogPages {
allMarkdownRemark(
filter: { frontmatter: { layout: { eq: "Blog" } } }
sort: { fields: [frontmatter___date], order: DESC }) {
edges {
node {
frontmatter {
title
}
fields {
slug
}
excerpt(pruneLength: 500)
}
}
}
}
The GraphQL query above simply retrieves all Markdown documents, checks they are a blog post and not a portfolio case study by using a filter. It then orders the blog posts by date using a sort before retrieving the title, slug url and excerpt for display on the index page. As this is all done at build time to create static pages it eliminates the need for server side round trips meaning the site loads up faster and requiring far few resources.
With GraphQL used to query and fetch Markdown documents the final requirement was to write some content in Markdown. The Markdown syntax is user friendly and easy to learn, an example Markdown document is shown below and the syntax available at www.markdownguide.org.
A First Level Header
====================
A Second Level Header
---------------------
Now is the time for all good men to come to the aid of their country. This is just a regular paragraph.
The quick brown fox jumped over the lazy dog's back.
### Header 3
> This is a blockquote.
>
> This is the second paragraph in the blockquote.
>
> ## This is an H2 in a blockquote
The one issue I faced with Markdown is the ability to tailor it to fit my page design, it worked great for the work page but I wanted a little more flexibility for a blog post as I wanted to separate images and code into their own containers. I decided for this first release to use a Markdown document for just the blog index page and then create a specific static page for each blog post if needed. I’m sure in time once I have more experience in both Gatsby, GraphQL and Markdown that I could achieve a fully flexible page design using just Markdown especially if used in conjuction with a content management system like Contentful.
Global deployment, continuous integration, and automatic HTTPS
With the development complete I turned my attention on hosting the site and had heard good things about Netlify especially when it came to continuous integration. As a newly converted user of the command line I was pleasantly surprised to see how easy it was to commit my changes to BitBucket and have these changes automatically published on the live site; no more need for ftp software. Netlify also simplifies HTTPS certificate generation by utilising Let’s Encrypt; all of that for free using their free tier.
In conclusion
With the design, development and hosting of my new site I now have skills in Adobe XD, Gatsby, Git, GraphQL, Markdown and Netlify. The build process for my site went incredibly fast and came together in as little as a month. I’m really excited with the future of using Gatsby as one of my new development frameworks and already plan to use it on my next project where it suits.