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>
)
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"
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.
Steps
- Install Gatsby CLI
npm install -g gatsby-cli
- Create new Gatsby project
gatsby new my-website
- Install Netlify CMS dependencies
npm install --save netlify-cms-app gatsby-plugin-netlify-cms
- Create config file in
static/admin/config.yml
backend:
name: git-gateway
media_folder: "static/images"
public_folder: "/images"
- Add NetlifyCMS Gatsby plugin in
gatsby-config.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?
Top comments (0)