Creating a free JAMStack website with Gatsby, Prismic CMS and Netlify

28.07.2020
Pedro Almeida
Webdev
, 
Gatsby
, 
Prismic
, 
Netlify

I made this portfolio and blogging website to showcase some of my work and also to learn more about web-development, and, more specifically, to dive for the first time into the JAM-Stack. Below I'll run you through what tools I used and why, from the largest and most important to the smallest, but nonetheless essential.

I'll also give you a brief rundown of what features the website has. Since it was the first time I used many of these technologies it took me more than I expected to bring it to a point where I'm comfortable making it public, 3 weeks.

Gatsby

The main element. Gatsby is a Static Site Generator based on React that has a large library of plugins and good documentation to assist developers in quickly creating a well structured websites. Using GraphQL for data fetching and building tiny incredibly efficient pages, Gatsby was ultimately the framework I chose for this project. NextJs was also an option I pondered, but I ultimately chose not to use it for having a smaller plugin and developer community (although this is quickly changing, and may one day replace Gatsby for this website).

Cost: 0€ (other than my time)

Netlify

There really isn't a better alternative for an individual programmers to deploy JAM-Stack websites than Netlify. I used automated builds from my linked GitHub repo to continuously deploy the project, and with hundreds of free build time it's really hard for a small (and somewhat responsible) operation to go over their limits. It has other great features such as forms and analytics, but I chose not to use them for now.

I looked into Github Pages for their similar services, but after some research I went with Netlify.

Cost: 0€

Prismic CMS

Now, where should I source my content from? Wanting to respect the core principle of the "JAM-Stack" I decided to use a decoupled source, a Headless-CMS. After a lot of research, I chose Prismic.

First, I planned to use Strapi, and open-source self-hosted alternative to CMS's like Prismic and Contentful, running in my own Heroku instance; but the Prismic features of slices, language localisation and their easy-to-use layout sold me on their platform (great decision in retrospection).

I also set up a hook to Netlify to instantly rebuild when I update the site's content, but be careful as this can quickly drain your free build time.

Using a static site generator, this (and most others) CMS is effectively free, as it's virtually impossible for me to use their request bandwidth (in GBs per month) just building a website without huge amounts of content. I wanted to keep all aspects of this project easily duplicate-able and easy to use for non technical people, should I want to copy this format and make simple websites for family, friends, or small businesses.

However, not everything is perfect: there are no proper official source plugins from Prismic for Gatsby, only open source alternatives with their fair share of problems, and no Slice-Machine as there is for NextJS.

Cost: 0€

Google Domains

The DNS for this website. Easy to set up email forwarding to a Gmail account of mine. Namecheap seems to be cheaper and still reliable, might be an option for me in the future.

Cost: 11€/ year

Plugins, tools and libraries used

Feel free to look into them or to contact me to know more.

  • gatsby-plugin-emotion - Emotion.js, a CSS-in-JS library.
  • gatsby-plugin-catch-links - Catch local links.
  • gatsby-plugin-typography - Typography.js.
  • gatsby-plugin-react-helmet - React Helmet, SEO.
  • gatsby-plugin-google-analytics - Analytics.
  • gatsby-plugin-sitemap - SEO.
  • gatsby-plugin-manifest - SEO.
  • gatsby-plugin-page-progress - Shows page progress bar on blog posts.
  • gatsby-plugin-netlify - For Netliify.
  • gatsby-source-prismic - Source data from Prismic.
  • gatsby-plugin-svgr - Svgs to React components.
  • gatsby-plugin-offline - Work offline and in bad connections.
  • prismjs - Syntax highlighting.
  • emotion-icons - Icon library for Emotion.
  • https://previewed.app - Preview images generator tool.
  • Github, GitKraken. I also experimented with Github project boards for the first time, and so far it's been really good.

Cost: 0€

Total cost of creating this very speedy website, with great load-times and SEO, as well as an easy content management workflow(work time not included): 11€/ year

Website Features

I'm sure to have forgotten some when writing this post, but here are the main ones.

  • Localisation: Portuguese and English. Easily extendable as well.
  • Dark mode.
  • Projects, Posts, Categories, all sourced from Prismic for their Locale.
  • Great base SEO results.
  • Great load times.

Design

I'm very very far from being a designer, but it is still an important part of a website. For this I took inspiration from Porto's graphical design. Walking around the city was where the "Pedro." idea came from.