Launching This Site With Gatsby

I discussed the benefits of building static websites in my last post. In this post, I want to expand on that discussion and explain how I built this amazing website. It was quite an involved process and the results should speak for themselves.

The design for this personal blog was last updated in 2015. It existed on a different domain and used a custom theme that I created for Blogger, Google's blogging platform. A lot has changed since then and it was time to refresh this website. I wanted a completely static website and I wanted more control than blogger or WordPress would allow me. This new website will hold blog posts and portfolio pieces. I had also owned my personal domain name for some time, and this website redesign was a perfect opportunity to utilize it. I had recently completed launching the Skyclops Pictures website and was initially planning to use Hugo for the site as well. Luckily, I discovered Gatsby before I began work on this redesign.

What is GatsbyJS?

Gatsby is a blazing-fast static site generator for React.

Okay great. So what is React?

React is a Javascript library for building user interfaces.

React allows developers to create large web applications that use data which can change over time, without reloading the page. It's super modern and very advanced. Its main goal is to be fast and scalable. It was created by Facebook to solve some modern problems such as third-world internet where Progressive Web Apps are very popular. It was deployed on Facebook's newsfeed in 2011 and open-sourced by Facebook in May of 2013. The industry quickly adapted React and now it is used by the notable players such as Netflix, Coursera, Khan Academy, Dropbox, and the NFL.

React is a future-proof way to build websites. The future of the web is Javascript, APIs, Markup, and Mobile aka the JAMstack. Every website is a web app and every web app is a website. Web apps were actually Steve Jobs' original vision for the iPhone ecosystem — applications would exist entirely as web apps with shortcuts on the home screen. There was no need for an App Store as you could install a web app by visiting its website. Of course, this was before Apple discovered that the App Store could be a very profitable money-maker. Apple gets to keep a 30% commission on all App Store sales. Ultimately this means that mobile Safari is now deliberately crippled in order to make it difficult to create native iOS applications that exist on the web.

Gatsby is a static PWA generator. Gatsby only loads critical HTML, CSS, data, and Javascript so the site loads as fast as possible. Once loaded, Gatsby prefetches other pages so clicking around to other pages is lightning fast.

And because Gatsby.js is a static website generator, all the benefits of static sites exist as well. No need to wait to generate pages when requested, pages are prebuilt and the website can exist entirely on the CDN (Content Delivery Network) ¹.

How Gatsby Works

When it comes to data, GatsbyJS is a lot more flexible than tools such as Hugo. While Hugo requires content to exist as markdown files, Gatsby can pull data wherever it is. Like WordPress, Gatsby has a plug-in system. Use node package manager to install additional plug-ins depending on the source of your data. Do you still manage content with a legacy CMS such as WordPress? Install the WordPress Gatsby plug-in. Now your web clients can continue to use the content management system they're familiar with but you can now more easily scale the website and the websites can handle much higher traffic load. Your content management system is now decoupled from the website build! Gatsby takes your data from resources using GraphQL, which is a database query language not unlike SQL. Gatsby then builds the website to static HTML CSS and React which you can then deploy to Amazon S3, GitHub Pages, Netlify, or your own server.

The Trifecta

This website uses a combination of three different services: Gatsby, Contentful, and Netlify. Gatsby is the tool that generates the website. Contentful, is a Content as a Service (CaaS) solution which manages all the website content.

Contentful solves the very modern problem of future-proofing your content

With Contentful, your content is available via API for any digital product, whether that is a website, app, or device.

The Contentful UI is very intuitive and should feel right at home for any WordPress user. With Contentful, it is possible to have the best of both worlds: a blazing-fast static website and an intuitive Content Management System. So why is this so great?

With Hugo, content is limited to markdown files in the git repo. The simplicity of this is great. You get the benefit of "owning" the content. Each blog post exists as a separate physical text file in your git repository and you can back that up any way you want. However, this also creates a lot of noise in the git repo as every content update creates its own commit and actual code and design changes get lost in the shuffle. There is no separation of concerns. Further, while git is very easy to use for those familiar with the tool, i.e., web developers, it gets messy when you start asking content writers or web clients to make git commits to manage content. To solve this problem, Netlify has a nice CMS which you can add to your Hugo website. This CMS is basically just a frontend for Git that offers a nice login screen to add or change content. I would certainly recommend it for any client projects built with Hugo. There is one last reason why Contentful is a great addition to the static web development stack:

Automation

Automation is where Contentful has a chance to shine and it pushes the boundaries of what one can do with a static website. Contentful integrates well with Zapier, which can be considered the glue of the Internet. It is essentially an IFTTT alternative aimed at more professional and business applications. My legacy blog website was automated and I wanted to ensure that this one is as well. For instance, whenever I post a new YouTube video, Zapier will get to work and automatically add a Contentful entry with the video embed code and description. Right now I have it set to create a draft so I can make some tweaks and batch publish new videos, but I could just as easily have Zapier publish that new blog entry. From there, Netlify rebuilds the website and pushes the new post live.

Another example is in my photography portfolio. I plan to set it up so that when I upload a new folder of pictures to Dropbox, Contentful will automatically generate and publish a new gallery post.

I also am considering maintaining a Google Sheet of link posts (useful bookmarks to share with my short summary) to be pushed to Contentful, though I may end up having Gatsby query the Google Sheet directly.

Netlify

Lastly, Netlify handles the actual web hosting and deployment to a global content delivery network ¹. When I push design changes as a commit to GitLab or update content in Contentful, a webhook tells Netlify to run the gatsby build command which automatically deploys the changes to the content delivery network. Netlify also handles the contact form with some nice spambot filtering. Dynamic features on a static website!

Netlify also handles DNS so I could use the naked domain (without the www at the front) and it automatically manages HTTPS certificates issued by Let's Encrypt. Very Slick! This is an entirely serverless solution ².

These three tools I consider the trifecta of modern static site creation. If you are interested in going this route, have a look at the GCN Starter. I recently made a lot of contributions to this open source project and worked with the developer to add a lot of essential features such as SEO optimizations, JSON-LD Schema, RSS, Google Analytics, offline support, and my own Gatsby Standard module (v1.0.3 - v1.2.1+). This starter template is minimal and is made to be customized or torn apart. It will even set up the contentful space with sample content so you can get started right away.

Building this Website

I built this website over the course of six weeks. It required more than 3,500 lines of source code. The learning curve for using Gatsby, React, Netlify, and Contentful is quite high compared to Hugo. However, the result is nothing short of amazing.

I didn't just build a website. Instead, I built the world's best blogging platform, and this platform just happens to power my own personal website. -- This I can say with confidence.

The Design Process

I wanted something that was simple and sleek. The design was inspired by the Ghost Casper Theme. I also found inspiration in the HPSTR Hugo theme. You can tell I'm a fan of box-shadows. This is evident in my senior portfolio as well. I believe it is important to have content boundaries clearly defined rather than having a sea of whitespace, and I really like the paper-like look that the box-shadow provides.

Typography uses native system fonts (no need to download web fonts!) and is a design departure from the GCN Starter. This itself took considerable time: getting the rhythm, relative font sizes, weights, and margins to look elegant and uniform.

I wanted big, bold headlines on the header of each post with the hero image behind. To accomplish this, I used fluid typography and its own React component that calculates the maximum font size for each post's main headline based on the length of the text and viewport size. This was import as some of my headlines are a lot longer than others. Longer headlines have a smaller font size on mobile screens to fit nicely, while shorter headlines can be fluid at a larger scale to really pop!

I also knew from the start of the project that I wanted a vCard that called attention to my bio and resume. This exists as its own component and involved some algebra calculations for CSS functions to get it to display nicely on both mobile screens and widescreens. The FitText headline component came in handy here as well!

Gatsby Starter GCN

I started the process by adding all the generic features I wanted to Ryan's repository. It is true that there is an existing Casper-themed Gatsby starter. Unfortunately, its codebase is quite a mess. It looks great visually, but there are several unwelcome complexities such as a mess of subfolders, unnecessary layout components, and CSS imports of empty files. Ryan's GCN project was a much better fit. The design is simple and the Contentful integration was already completed. I helped him find and fix bugs such as a Firefox flexbox issue and a double download of images. After that, I was back up to speed with git, Gatsby, React, Javascript, and CSS in JS, and I ended up adding a lot of exciting features such as a custom SEO component, SEO JSON-LD Schema, OpenGraph sharing support, sitemap generation, Google Analytics, Progressive Web App manifest, logos, Offline Support, RSS feed creation and support, Gatsby Standard module for linting Javascript with StandardJS, and Stylelint support for Styled Components to lint the CSS in JS for errors. I also fixed a layout jump issue and cleaned up the codebase, removing unused react imports.

Gatsby Standard

While working on Gatsby Starter GCN, I created Gatsby Standard, an ESLint rule configuration module for Gatsby Sites. This rule set is designed to closely match the Gatsby Starters while still following StandardJS style. Simply install and extend to clean up your GatsbyJS code! The plugins and parser used are dependencies of the project. There is no need to specify them separately.

This config is designed to be used in conjunction with prettier for automatic code formatting. Conflicting rules have been disabled through eslint-config-prettier.

This open source tool has been downloaded by 400 web developers since I published it as of this writing. I find this awesome considering I have not marketed the tool at all. It is a simple and easy way to clean up Javascript code style and lint it for errors. I am glad others have found it to be useful.

BrandonKalinowski.com

Once the Gatsby Starter got to the point where it had all the generic features that I wanted, I branched off from there. I moved the git hosting to GitLab for the free private repository feature and began work tearing the Starter Design apart. See the "Design Process" section above for more details.

Porting my legacy blog posts from Blogger to Contentful proved to be a chore. Blogger only provides XML export rather than the JSON needed for Contentful. A transformer tool for Blogger to Contentful is not available and building it myself seemed more trouble than it was worth given the relatively low amount of content I needed to port over (90 blog posts - 60 of which I actually deemed worthy enough of port over [technology changes rapidly]).

What I did do was transform the Blogger XML output to markdown for Hugo. From there it was mostly a ritual of copy and paste into Contentful. Then I had to update the YouTube embed codes manually and fill in the title, post date, and tags. I went through my Lightroom catalog and brought in about 100 photos for hero images. All photos were taken by me except where otherwise noted in the image credit.

The End Result

I truly believe that this is the world's best blogging platform and I am still excited about it. I'll back that up by asking you to find a website or blog that loads faster. Clicking between pages is instantaneous, thanks to prefetching and React router. There is one case where that claim may not be the case, as it may appear that I have left out a comment system. This is certainly possible with this platform and static sites in general, and I have plans to implement a comment system on another blog using this platform. However, I do not currently have plans to add it to this blog. I still very much value your feedback and opinions and for those cases, I encourage you that you contact me via the contact form.

I also hope to teach others how to build awesome websites using these ultra-modern tools. Now that this platform is complete, starting a similar blog will a simple process. I will add features in time such as adding portfolio pages.

Finally, I would like to conclude with a short list highlighting some of the cool capabilities of this blog:

1. You can read my blog in the subway thanks to offline support. You can finish reading this post and even click around to other posts and continue reading. You may notice that some hero images are not fetched while offline but the site will otherwise continue to function even in cases where you have no internet connection
2. You can install this website as a native app on your phone. If you use Chrome, you should see a prompt to add this website to your home screen. If you dismissed the notification you can still install it by clicking on the menu. On Android, a native APK will be installed so the blog actually is visible in the app drawer and not just on the home screen. Once installed, links to my blog posts will open in the app. This also works on iOS.
3. Images are dynamically queried and scaled. If you snoop through your browser's network requests, you will see that the website downloads images based on the viewport size. On mobile, smaller images are downloaded than when viewing the same page on a desktop. This keeps things blazing fast.
4. Full RSS support. Simply add https://brandonkalinowski.com/rss.xml to your news feed reader of choice. You can read my blog posts in full.
5. Social Share Support. Social Sharing buttons are available at footer of each post for easy sharing. No Facebook or Twitter tracking pixels are installed on this website. The buttons are there for your convenience and make sharing interesting posts easy.

What is Next

Now I am working on a live streaming platform that allows for creators to host a Subscription Video Service. I am really excited about this opportunity. JAMStack will certainly come into play with the development of this new platform.