Illustration by Katerina Limpitsouni undraw.co/illustrations
Over the last months I have migrated my Drupal and Wordpress websites to the JAMstack (Javascript, API and Markup).
This blog series will focus on my first endeavour with Gastby and Netlify CMS, but this episode will also focus on my experience with other libraries and providers in the ecosystem.
3 reasons to migrate to the JAM stack
- No more server management! Upgrading LAMP stacks, maintaining Linux servers requires a lot of attention and knowledge and it is not my strong suit
- For small sites, you can host for free or very cheap using providers like Netlify, Vercel and others
- Learning new tools is FUN!
JAM stack tool considerations
You can find plenty of blogs or websites discussing the benefits and various tools available to you. To help you make a decision I'd recommend you consider these points. I'll share my personal findings for each point.
Easy deploy
I want to spend as little time configuring build/copy steps, exposing (public) folders and setting up SSL certificates as possible. I just want to define one npm script to execute and let the service do the rest. There are a couple options here such as Heroku, Netlify and Vercel. Due to the availability of a complementary CMS, form submission handling and a good starter template, I ended up with Netlify. But also give a good look at Vercel!
CMS for non-tech users
My users require a CMS with a admin interface which they can use. I also do not want to self-host my CMS elsewhere (headless CMS like Wordpress API). You can explore options on headlessCMS.org. Consider if you have a preference for a git-based or API-driven / SaaS CMS.
Some good options: Contentful (SaaS & free tier), Netlify CMS (git-based, so free), Strapi (self-hosted)
Extendable CMS (custom fields)
Make sure that your CMS supports extention of fields. Have you thought about comments, attachments, tags? Make sure your CMS supports adding these later on. Even better, your CMS should support creating new entities. For example I created an Author entitity so my users can place content on behalf of the actual authors.
Modern techniques
New tools not only drive your learnings, but also bring benefits such as faster loading. See if you can utilize new optimizations such as GraphQL, webp image formats, serverless functions, CDN edge servers and variable fonts. Don't forget the advances on the developer experience as well. Tools such as dependabot, Cypress.io and TravisCI can make updating a breeze.
Big community / ecosystem
Whenever choosing your JAM stack tools, you can make your life easier by choosing tools that are welcoming to newcomers. The documentation of Gatsby can be daunting at first due to its sheer size, but it does an amazing job of gradually learning you everything you need to know. To make things even easier there are plenty of starter templates for you to pick from. Gatbsy also has an amazing ecosystem of plugins that provide you with all kinds of functionality.
Another recommendation in the JavaScript space would be to consider 11ty, it is less mature than Gatsby but still has quite a community and plugins. The same goes for Vuepress.
Not too steep learning curve
Although learning new technologies, frameworks and techniques is really fun, you should also keep it manageable.
Certain techniques are easier to pick up than others. Below an overview of the learning curves for all tech that I've encountered in my journey. When describing difficulty I assume decent knowledge of HTML/CSS/JS/JS frameworks, but no prior experience with particular technology
| Name | Difficulty | Comment |
|---|---|---|
| GraphQL | 8 / 10 | |
| React | 6 / 10 | |
| Gatsby | 9 / 10 | Steep learning curve if stepping outside of templates, only try if comfortable with React or GraphQL |
| Svelte | 5 / 10 | Easy to pick up, ecosystem not fully mature |
| Sapper | 5 / 10 | Same as Svelte |
| Vue | 5 / 10 | Easy to pick up |
| Vuepress | 7 / 10 | Takes a bit to understand once going outside of themes |
My experiences
CMS
My biggest doubt when I embarked on this journey was that it might be difficult to find a CMS flexible enough to adjust to all the custom fields I needed, while at the same time be friendly to non technical editors.
Netlify CMS proved to handle both. Fields are extremely extendable. Netlify CMS also supports custom content types. Adding relations between content types was a challenge though (more on that in a next post).
Non tech users can create and edit content with the help of Identity. In the free tier that means your content editors can log-in using a Google account.
To be honest, Netlify was the first CMS I considered, also due to the ease of deployment and availability of start templates. I'm pretty sure other CMS systems would also satifsy these requirements so let me know your experiences!
Update, july 2020
Even though I experimented with other site generators (see next section), I stuck with Netlify CMS as my content system!
Static Site Generation (SSG)
Update, july 2020
This post originally only covered Gatsby, since then I've also tried other static site generators. This section is now updated.
Gatsby
Gatsby is one of the big names within the JAMstack space.
Strengths are:
- extensive, newbie-friendly documentation,
- newbie-friendly starter-kit and templates
- extensible plug-ins leading to a very lively and mature ecosystem
A potential downside is the learning curve if you are not already familiar with React or GraphQL. If you only need to learn either of those technologies, Gatsby is a great choice. If you are new to both React and GraphQL, choosing Gatsby might be too much to chew.
Nonetheless, the docs do a great job at introducing all the concepts of both React and GraphQL. The rest of this blog series is also aimed at making Gatsby more understandable.
The starter template I used is the Gatsby + Netlify CMS Starter. It proved a useful starting point, but my customizations were quick to follow as you can read in the rest of this series
Vuepress
Vuepress is a static site generator within the Vue ecosystem.
Strengths include:
- Built upon Vue, which is very easy to learn and has an awesome ecosystem. For example, the Vuetify component library / design system is one of the best across all JS frameworks.
- Has many out-of-the-box themes. This resembles Wordpress theme experience, allowing you to get up and running very fast
- Is extensible enough to create your own theme (for example using Vuetify)
Downsides:
- The ecosystem of Vuepress is less mature. For example, at the moment of writing there is no community-provided plugin for Netlify CMS relations (although I plan to write one, in the mean time check here
Sapper
Sapper is a static site generator within the Svelte community.
Strengths include:
- Lightweight builds, interesting if performance is paramount for you
- Svelte is easy to learn
Downsides:
- The ecosystem of Svelte is less mature than React (Gatsby) and Vuepress (Vue). I ran into this when looking for component libraries. Smelte is a perfect example: it is inspired by Vuetify, but less extensive. On the other hand it is way smaller and more performant.
Although I enjoyed experimenting with Sapper / Svelte, my personal preference is to lean towards something more batteries-included and take the performance penalty. But that is a trade-off every developer has themselve.
This blog is part of a series on how I migrated away from a self-hosted Drupal blog to a modern JAM stack with Gatsby and Netlify CMS.
Top comments (0)