DEV Community

Cover image for My free Jamstack tools choices
Hugo Torzuoli
Hugo Torzuoli

Posted on

My free Jamstack tools choices

In 2020, Jamstack is becoming very popular in the frontend world. If you don't know it, it allows developer to create static websites with modern tools such as React, Vue, Go etc.

In this post, I won't focus on what Jamstack is, there are plenty of articles about it. I will just present you my tools pick from static generator tool to CDN choice, including Headless CMS and data storage.

tl;dr > all steps I follow in my Jamstack projects

Static Generator

My static generator tool choice is Gatsby, the React Jamstack framework.

It comes with all the benefits of React ecosystem : lot of libraries, big community, easy styling.
On Gatsby official website, you will find a great documentation, with several tutorials, a showcase (almost 1000 websites submitted), lot of starters, and a plugin for any of your need.
Configuration is very easy, in a single file gatsby-config.js that includes all your plugin configurations and more.

An example of Gatsby Page that will generate a static HTML page.

// src/pages/index.js
const Index = () => (
  <Layout>
    <SEO title="My Gatsby website" />
    <h2>Hello World</h2>
  </Layout>
)
Enter fullscreen mode Exit fullscreen mode

Headless CMS

You have to pick a Headless CMS to edit data of your website.
My personal choice is NetlifyCMS.

NetlifyCMS is an customizable, git-based, open source CMS.
The configuration of content type is very easy: a single YAML file where you will define every options of the CMS.

My basic NetlifyCMS configuration is:

backend:
  name: git-gateway
media_folder: "static/images"
public_folder: "/images"
Enter fullscreen mode Exit fullscreen mode

All my data is stored in Git (GitHub as host). As said above, NetlifyCMS is git-based. That means that all data is pushed in repository.

I parse Rich Content with Remark.

CDN

As a Content Delivery Network, I use Netlify. It provides free host with powerful CDN, great Build & Deploy system, and, the most important, Identity.

I use Netlify Identity to connect to NetlifyCMS and push data with git.

With free plan, Netlify allows to create 5 Identity Users in each project.

Netlify Identity


Steps

  • Install Gatsby CLI
npm install -g gatsby-cli
Enter fullscreen mode Exit fullscreen mode
  • Create new Gatsby project
gatsby new my-website
Enter fullscreen mode Exit fullscreen mode
  • Install Netlify CMS dependencies
npm install --save netlify-cms-app gatsby-plugin-netlify-cms
Enter fullscreen mode Exit fullscreen mode
  • Create config file in static/admin/config.yml
backend:
  name: git-gateway
media_folder: "static/images"
public_folder: "/images"
Enter fullscreen mode Exit fullscreen mode
  • Add NetlifyCMS Gatsby plugin in gatsby-config.js
plugins: [`gatsby-plugin-netlify-cms`]
Enter fullscreen mode Exit fullscreen mode

Once deployed, you will be able to connect with Identity and edit data at https://your-website-url/admin.


And you? What are your Jamstack tools?

Top comments (0)