🔔 This article was originally posted on my site, MihaiBojin.com. 🔔
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
Then, create a blank Gatsby site; I called my repo personal-site, but you can choose any name:
gatsby new personal-site
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
(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`,
]
}
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;
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
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
Then add gatsby-remark-prismjs to your gatsby-config.js file:
module.exports = {
plugins: [
...
`gatsby-remark-prismjs`,
]
}
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
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
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
}
}
Also, create a .prettierrc file and add the following config:
{
"arrowParens": "always",
"semi": true,
"trailingComma": "all",
"singleQuote": true,
"printWidth": 70
}
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
Then edit gatsby-browser.js and add:
import '@fontsource/inter';
Finally, edit tailwind.config.js and add the following block:
theme: {
extend: {
fontFamily: {
sans: ['Inter', ...defaultTheme.fontFamily.sans],
},
},
},
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
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
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!
Top comments (0)