Creating a free JAMStack website with Gatsby, Prismic CMS and Netlify
Post as seen on my personal website - www.ptalmeida.com
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.