My free Jamstack tools choices
Tags: webdev, jamstack, javascript
Published: 2020-07-04 00:56:10

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](#steps)**

## Static Generator

My static generator tool choice is [Gatsby](https://www.gatsbyjs.org/), 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](https://www.gatsbyjs.org/showcase/) (almost 1000 websites submitted), lot of [starters](https://www.gatsbyjs.org/starters/?v=2), and a [plugin](https://www.gatsbyjs.org/plugins/) 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.

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

## Headless CMS

You have to pick a Headless CMS to edit data of your website.
My personal choice is [NetlifyCMS](https://netlifycms.org).

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:


```yaml
backend:
  name: git-gateway
media_folder: "static/images"
public_folder: "/images"
```

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](https://remarkjs.com).

## CDN

As a Content Delivery Network, I use [Netlify](https://www.netlify.com/). 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](https://dev-to-uploads.s3.amazonaws.com/i/sgsg133nap6zsuvkse25.png)

___ 

## Steps

- Install Gatsby CLI

```bash
npm install -g gatsby-cli
```

- Create new Gatsby project

```bash
gatsby new my-website
```

- Install Netlify CMS dependencies

```bash
npm install --save netlify-cms-app gatsby-plugin-netlify-cms
```

- Create config file in `static/admin/config.yml`

```yaml
backend:
  name: git-gateway
media_folder: "static/images"
public_folder: "/images"
```

- Add NetlifyCMS Gatsby plugin in `gatsby-config.js`

```js
plugins: [`gatsby-plugin-netlify-cms`]
```

- Add version control to your project : https://www.netlifycms.org/docs/gatsby/#push-to-github

- Create your Netlify project : https://www.netlifycms.org/docs/gatsby/#add-your-repo-to-netlify

- Enable Netlify Identity : https://www.netlifycms.org/docs/gatsby/#enable-identity-and-git-gateway

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?