DEV Community

loading...

Building my site with GatsbyJS and TailwindCSS

Mihai Bojin
Hands-on Engineering Manager with a passion for building and mentoring teams! Technical Leader with expertise designing and developing highly-resilient backend systems for global enterprise companies.
Originally published at mihaibojin.com on ・5 min read

πŸ”” This article was originally posted on my site, MihaiBojin.com. πŸ””


Photo: Website mock-ups

Back in the introductory article in this series, I decided to base my tech stack on Gatsby.

I won't get into all of Gatsby's features, but here is why I chose this tech stack:

  • Performance: server-side rendered HTML that can be cached by a CDN and distributed globally to any user at blazingly fast speeds (Gatsby's automatic image optimizations also have a net benefit here!)
  • Strong, out-of-the-box SEO support - Gatsby makes it super easy to generate metadata, but it's also straightforward to write your code (e.g., adding structured semantic data with json-ld)
  • Articles in code - I did not want to integrate with a 3rd party CMS/backend - I find it simpler to commit Markdown to GitHub
  • Out of the box accessibility support; through linting and other features, Gatsby makes accessibility front-and-center!
  • Great ecosystem and easy extendability - Gatsby is built with React, making writing plugins and components super easy!

Setting up a new GatsbyJS site

Before going further, I recommend going through Gatsby's tutorial. It's an excellent resource for getting a high-level understanding of how Gatsby works!

The next step is to look at the starters library. One of these may even do what you need. In my case, I was a bit more opinionated towards what I wanted to achieve, so I started from a blank gatsby site.

The first step is to install Gatsby CLI. This command will be your entry point for all things Gatsby.

npm install -g gatsby-cli
Enter fullscreen mode Exit fullscreen mode

Then, create a blank Gatsby site; I called my repo personal-site, but you can choose any name:

gatsby new personal-site
Enter fullscreen mode Exit fullscreen mode

Next, it's time to install plugins; I decided to use Tailwind.

cd personal-site

# Install the necessary plugins
npm install -D gatsby-plugin-postcss tailwindcss@latest postcss@latest autoprefixer@latest

# Init the tailwind.config.js file
npx tailwindcss init -p
Enter fullscreen mode Exit fullscreen mode

(You can also follow a more in-depth tutorial if you want.)

To optimize your site in production, you should remove unused CSS styles from the resulting CSS code with purge.

To do that, add PostCSS by editing your gatsby-config.js file and appending gatsby-plugin-postcss to your configuration:

module.exports = {
  plugins: [
    ...
    `gatsby-plugin-postcss`,
  ]
}
Enter fullscreen mode Exit fullscreen mode

Side-note: gatsby-config.js is the 'heart' of your GatsbyJS project - this is where you define configurations, add plugins, and can even store metadata about your site (e.g., title, site_url, etc.).

The final step is to add all of Tailwind's CSS to your project.

Create a file called: src/styles/global.css and define the following directives:

@tailwind base;
@tailwind components;
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode

For my site, as I'm not a UI designer, I decided to buy TailwindUI. I am delighted with my choice! It is one of the best investments I have made so far!!! It allowed me to get a great-looking site with almost zero CSS knowledge and minimal effort.

Disclaimer: I am not associated with any of the Tailwind products and have provided an objective view based on my own experience!

To set up TailwindUI, I installed these plugins:

npm install tailwindcss@latest

npm install @tailwindcss/forms @tailwindcss/typography @tailwindcss/aspect-ratio

npm install @headlessui/react @heroicons/react
Enter fullscreen mode Exit fullscreen mode

Optional configuration

Syntax highlighting

Since this site targets software engineers, you will also need syntax highlighting for any code samples. The obvious choice is PrismJS.

Install the necessary plugins:

npm install gatsby-transformer-remark gatsby-remark-prismjs prismjs
Enter fullscreen mode Exit fullscreen mode

Then add gatsby-remark-prismjs to your gatsby-config.js file:

module.exports = {
  plugins: [
    ...
    `gatsby-remark-prismjs`,
  ]
}
Enter fullscreen mode Exit fullscreen mode

Code linting

The site would be pretty much ready to use, but I like a bit of consistency in my code, so next, I configured Prettier and ESlint:

npm install -g prettier eslint
Enter fullscreen mode Exit fullscreen mode

I'm using VSCode, and I installed the prettier plugin:

# Open the command palette (Cmd-Shift-P on MacOS)
type: ext install esbenp.prettier-vscode
press Enter
Enter fullscreen mode Exit fullscreen mode

Next, I stored my prettier configs in the project's workspace. Again, from the command palette (Cmd-Shift-P), select "Preferences: Open Workspace Settings (JSON)" and add the following configuration:

{
  // Set the default
  "editor.formatOnSave": false,
  // Enable per-language
  "[javascript]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "markdownlint.config": {
    "MD033": false
  }
}
Enter fullscreen mode Exit fullscreen mode

Also, create a .prettierrc file and add the following config:

{
  "arrowParens": "always",
  "semi": true,
  "trailingComma": "all",
  "singleQuote": true,
  "printWidth": 70
}
Enter fullscreen mode Exit fullscreen mode

Replacing the main font

One last thing you can do is configure a custom font - I went with TailwindUI's one.

# Install the font
npm install @fontsource/inter
Enter fullscreen mode Exit fullscreen mode

Then edit gatsby-browser.js and add:

import '@fontsource/inter';
Enter fullscreen mode Exit fullscreen mode

Finally, edit tailwind.config.js and add the following block:

  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter', ...defaultTheme.fontFamily.sans],
      },
    },
  },
Enter fullscreen mode Exit fullscreen mode

It's worth saying that the official tutorial didn't quite work for me. If you compare these steps with the official docs, you'll notice that I'm importing @fontsource/inter, not @fontsource/inter.css, and the font name is Inter, not Inter var. I hope this is useful to others!

Running the site

You can run the site in development mode (fast refreshes) with:

gatsby develop
Enter fullscreen mode Exit fullscreen mode

which will host your Gatsby site running in development mode at http://localhost:8000/.

When you're ready to publish it, execute:

gatsby build
gatsby serve
Enter fullscreen mode Exit fullscreen mode

which will host your Gatsby site running in production mode at http://localhost:9000/.

At this point, you can start adding pages and content. For now, I won't cover adding pages or where to host, but here is a list of resources that should help:


If you enjoyed this article and want to read more like it, please subscribe to my newsletter; I send one out every few weeks!

Discussion (0)