Skies Website Tech Stack Explained

Last modified
July 23, 2020
Time to read
4 min read

Photo by Ian Dooley

Table of Contents

Introduction

In this article, I'll explain the technology I chose when developing the skies.dev website.

TL;DR: Skies utilizes the JAMstack. The site is statically generated with Gatsby.js, styled with Tailwind CSS, versioned on GitHub, and hosted on Netlify.

Gatsby

Gatsby.js is an open-source framework I'm using to drive this site. I chose Gatsby for several reasons.

  • Developer experience: Gatsby lets me write my application in React and handles all the low-level optimizations to get the site ready for production.
  • Plugins: There are a lot of plugins that make life easy when developing a site.
  • Ecosystem: Gatsby has a great community. There's a lot of help on the internet whenever I run into issues.

I bootstrapped the site with the good ol' gatsby-starter-default.

Plugins

The plugins ecosystem is something that makes Gatsby really special in my opinion. Two of the many plugins I'm using are

  • gatsby-plugin-mdx: This plugin lets me write blog posts (such as this one) in Markdown/JSX. MDX is a convenient way of quickly writing content using markdown but still having the flexibility to use React when needed. Gatsby is able to take these MDX files and generate web pages from them. Really cool.
  • gatsby-image: Images are often a bottleneck in a website's performance. I use this plugin to handle optimizing images for performance so I don't have to think as much about it.

There are many other plugins that I use for other things here and there. Check out my gatsby-config for a look at all the plugins and configurations I'm using.

TypeScript

Another cool benefit of Gatsby is TypeScript worked out of the box with the starter I used. Since I've been wanting to get more comfortable with TypeScript, I used building this site as an opportunity to learn TypeScript better.

To make things a little simpler on myself, I've set my compiler settings to be less strict giving me the option to opt out of writing out all the types when I'm being lazy or am in a hurry. This is not too much of a problem though because the tooling I've set up reminds me to fix any development shortcuts I may have made.

Tooling

Below I list out the tools that I use for continuous integration and continuous deployment (CI/CD).

ESLint

I use ESLint to improve the quality of my code. My ESLint configuration extends the Airbnb style guide. I use ESLint to help me with the following.

  • Find code smells: I'm not a perfect developer. I rely on ESLint to let me know when I'm doing something that could potentially cause problems.
  • Enforce code style: I use ESLint in conjunction with Prettier to format my JavaScript.
  • Find accessibility issues: I use eslint-plugin-jsx-a11y to let me know how I can improve the accessibility of my site. I find this really useful for catching little things you can add to your markup to make the site more accessible.

Prettier

ESLint handles JavaScript; Prettier formats just about everything else. I'm using Prettier to format filetypes such as JSON, HTML, CSS, etc. Prettier also can play nicely with ESLint using eslint-plugin-prettier.

Husky and lint-staged

Husky and lint-staged help me with CI. With these tools, I set it up so that formatting, linting, and testing happens all before I check anything into Git. If any of the formatting, linting, or testing steps fail, then the code won't be committed to Git. This is a great way to be reasonably sure that the code I check in will not contain many issues. Knock on wood. 馃槄

If you want to try these tools, Prettier has simple documentation for setting this up.

Tailwind CSS

I use Tailwind CSS because I wanted my styles to adhere to a design system, but I didn't want to be locked into a component-based CSS framework like Bootstrap, as those types of frameworks have given me trouble in the past when trying to handle nitty-gritty styling details.

Tailwind CSS is basically just CSS, except I write my "CSS" as class names. Because I'm not a CSS expert, this is really useful because I can apply a class and a CSS rule with a sensible value will be set.

For example, let's say I asked you how you would overflow text with an ellipsis using CSS. Maybe you would know how to do that; I would need to look it up. With Tailwind, I just apply the truncate class and the following CSS rules are applied. Easy.

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

Tailwind has a great developer experience (DX), but the DX doesn't come without a cost (large CSS files). For this, I use PurgeCSS and cssnano to help reduce the size of my CSS. I also use autoprefixer because Tailwind CSS doesn't do that automatically. All of this stuff is pretty standard when using Tailwind CSS.

GitHub

For version control, I am using GitHub. Is there much more to say? GitHub is the most popular Git platform and has the most community. Overall GitHub is a solid platform to version control the site (and act as a CMS).

Netlify

Another company that offers a great DX is Netlify, and that's why I am using them to host Skies. Netlify integrates well with GitHub. With little setup, I set up CD to trigger a new build of the site whenever I push a new commit to the master branch. This makes it really easy to hot-fix bugs and push new features. Netlify also makes it easy to enable an SSL/TLS certificate so visitors on my site feel secure. Super cool stuff.

Notable Libraries

Here are some other notable npm packages I'm using to help drive the site.

  • js-search: This is the client-side search library I'm using to search for blogs on the home page.
  • react-icons: This package lets me easily use icons from popular icon libraries as React components.
  • react-helmet: I use this library to modify the <head> of my document and get that awesome SEO juice.

There's more that are not mentioned so feel free to dig into the package.json if you wish to see what other libraries I'm using.

Future Plans

I've thought about possibly adding a more complex backend to the site to add more sophisticated features. For now, I like the simplicity of keeping Skies as a JAMstack application, writing my content in Markdown (MDX), and having commits pushed to master automatically trigger a build on Netlify.

Last modified
July 23, 2020
Time to read
4 min read

Get the latest articles
Sign up for the newsletter

I will not send you spam. Unsubscribe at any time.

Was this helpful?