Building a JAMstack site with NextJS + Netlify CMS by Chad Drummond

Building a JAMstack site with NextJS + Netlify CMS

A quick dive into building your portfolio or blog on the hot new JAMStack. We’ll be generating output as a static site using React Components in NextJS and flat JSON files created with Netlify CMS, a simple configurable admin interface for easy data input. We’ll also discuss some tradeoffs between the many JAMStack options out there (Gatsby, Strapi, etc.)

#nextjs #netlify #json

What is GEEK

Buddha Community

Building a JAMstack site with NextJS + Netlify CMS by Chad Drummond

Building a JAMstack site with NextJS + Netlify CMS

A quick dive into building your portfolio or blog on the hot new JAMStack. We’ll be generating output as a static site using React Components in NextJS and flat JSON files created with Netlify CMS, a simple configurable admin interface for easy data input. We’ll also discuss some tradeoffs between the many JAMStack options out there (Gatsby, Strapi, etc.)

#nextjs #netlify #json

Jamstacking a free CMS site with Svelte/Sapper, Netlify and FaunaDB

In this tutorial, we’ll build a small content website based on the Sapper template from Nicholas Christ, and modify it to use FaunaDB as storage and Netlify as free host. It uses Svelte and Tailwind CSS to make creating and designing webpages very clean and easy.

The first part is just an easy starter so everyone can follow along. You need some git knowledge (or use a git gui). It’s up to you to take it to the next level.

Here’s the plan:

1. Clone template repository
2. Build/run/push back
3. Deploy to Netlify
4. Add FaunaDB & posts
5. Glueing it together

You can do step 2 after you add FaunaDB, but I was happy to see it running on the net first and then adding features later.

---

1. Clone the repository

I started from https://github.com/nhristov/sapper-template-rollup, a modified Sapper template, that uses postcss, purgecss, cssnano, tailwindcss and svelte-preprocess.

The original sapper-template-rollup

Create a new repo from an existing one

Once you set it up on GitHub, you need it on your machine. Clone the repo via the command line if you’re familiar with it, or you can drag the url from your browser in a gui like Tower or SourceTree.

Open the project in your editor of choice, I use WebStorm, and in a terminal type npm install to install any dependencies that are needed. If you see mention of vulnerabilities, type npm audit to fix those before you continue.

2. Build, run and push back

Now you can build your project and run it locally. You do this with npm run dev and if all goes well you’ll see the http://localhost:3000 link appear. Test it in your browser.

I tried this sample project on 2 machines, one succeeded and the other failed. At first, I couldn’t figure out why… a call for help to the guys at Hackages resulted in the solution: make sure to run thelatest nodejs_ on your machine. At the time of writing this was 14.2.0. Problem solved._

Our project running locally

Click around in the top navigation and notice how snappy it works. On the blog page you’ll find a list of articles. That is the list we will convert to the FaunaDB online data store.

Let’s change something on the first page, just to make sure our updating works. Open the /src/routes/index.svelte file in your editor, and change the main title to

We did it!

or something similar.

When you save the index.svelte file, your browser should update and show the changes you made.

Committed and pushed the change to the title

Now commit the changes to git and push it to your repo on github.

#svelte #programming #netlify #jamstack #cms

How to Deploy Your FullStack NextJS App for Free on Netlify

In this lesson we look at how easy it is to get started with #Netlify and what we mean by the "netlify workflow".

We use a sample Fullstack #NextJS / #TypeScript / #React application but you can always bring your own

We deploy this Fullstack application to netlify and demo it in production 

#netlify #nextjs #next #fullstack 

Jamstacking a free CMS site

In the second and final part of this tutorial, we’ll finish up by adding FaunaDB to our stack and integrating it in the Svelte/Sapper site.

If you remember from the first part, here’s the plan:

1. Clone template repository
2. Build/run/push back
3. Deploy to Netlify
4. Add FaunaDB & posts
5. Glueing it together

We already tackled 1, 2 and 3. Let’s go!

---

4. Add FaunaDB to the mix

Faunadb is a serverless database. It starts with a free account, and very generous limits. It’s fast, global and easy to implement.

Sign up for free, then follow the short onboarding tutorial — highly recommended.

When you’re ready, let’s create a new database. For this tutorial, we’ll use the same name (sapper-cms) again. Do not check the box for demo data, we don’t need that.

Create new database in FaunaDB

Next we need a table to hold our blog posts. Tables are called Collections here, so click on New Collection and give it the name posts. Don’t change the History Days and TTL options, we don’t need it.

Adding a new collection (table) to our database

Now we have a new collection without any documents (=rows in a table) and no indexes.

To add a new document, we can use the web interface of FaunaDB, but ultimately that is not what we want. At some point in time we want this to happen behind the scenes.

On the other hand, adding an index is something that happens usually only when setting up the database, so we can already do it from here.

In the New Index dialog, give a name like posts-by-title, and fill in the first edit box of Terms with title. It will change into data.title when you save it.

Now comes the hardest part. Programmatically adding the data from our blogposts to our new collection. Open the file /src/routes/blog/_posts.js and you’ll see that the blog posts from our site are stored in there as some kind of js format.

Unfortunately we’ll need to massage this a bit until we can use it for FaunaDB: On the left side in the FaunaDB Console you can click on Shell. This opens a black terminal at the bottom and a blue results window on top of it. Click on [Run Query] to execute whatever is in the terminal.

It took me a bit of digging in the FaunaDB online help to find the correct usage of functions, but this is the notation of how you can add multiple documents with multiple fields in 1 operation:

Map(
    [
        [ "title 1", "slug-1", "content 1\n" ],
        [ "title 2", "slug-2", "content 2\n" ],
        [ "title 3", "slug-3", "content 3\n" ],
    ],
    Lambda(
        ["post_title", "post_slug", "post_html"],
        Create( Collection("posts"),
            {
                data: {
                        title: Var("post_title"),
                        slug: Var("post_slug"),
                        html: Var("post_html")
                    }
            }
        )
    )
)

#cms #faunadb #netlify #jamstack #svelte

Up and running with JAMstack CMS

Learn about how to get up and running with JAMstack CMS in this 25 minute video capture from the Twitch.tv live stream.

https://github.com/jamstack-cms/jamstack-cms

#cms #jamstack #jamstack cms