JAMstack Static Websites with Netlify and Github Continuous Development Cheatsheet

Recently, I’ve been looking into alternatives to single page apps. Why might you ask? Well, single page apps have their advantages, but they do provide a significant drawback if you consider search engine optimization (SEO) as part of your app’s deployment strategy.

Search engine optimization needs to be part of every business’s marketing strategy and being a former marketer, I know that the bottom line of many company’s is determined by hits and subs instead of profitability in many cases. Many companies these days receives millions based on trending metrics and spend years losing money.

Investors like Warren Buffet would say it’s ludicrous to take such risks as an investor, but if everyone thought like that, Amazon wouldn’t exist. Now, even Warren says he missed the boat on Amazon.

JAMstack 101

The JAM in JAMstack stands for Javascript, API, and Markup. If you would like to go into depth on the subject please visit the Wikipedia for more information.

Simply put, JAMstacks make deploying and editing a website far simpler than the traditional dynamic websites that uses SQL databases, servers and caching. That kind of website is still very needed in certain settings, but for most of the websites being created it’s far better and more secure to use this new architecture.

Some of the benefits include speed, security, and are language agnostic for the most part. You can combine GO with Vue or Python with React and it still works just as well, so just use what ever feels right for you and deploy quickly with systems like Netlify CMS or Strapi to name a few.

The JAMstack website is a great place to to see all the options that are available.

A Simple Deployment

Let’s say you made a website in NuxtJS. After you get the basic functions set up you should upload this file to Git for continuous development and then deploy it on Netlify.

Here is a quick guide on how to do that. You will need to use your terminal and have already created a GitHub account that is linked to your terminal and an account with Netlify. These are free by the way.

Once you’re all signed up you’re ready to begin.

Here’s the cheatsheet.

Create website.

then,

git init

create new repo

git remote add origin https://github.com/<github_user_name>/<ENTER_NEW_WEBSITE_NAME>.git

git pull origin master

git add .

git commit -m ‘initial commit’

git push — set-upstream origin master

then, go to Netlify and setup continuous deployment with git

Import from Git

Select Repo. I have to add it from git by means of configuring link

Set Owner to “me”

branch to deploy “main”

Basic build settings

build command = <name_of_app>

publish directory = public

deploy site

add new baseURL from netlify to config.toml file — — i think this could be the yaml file also

to make changes then just recommit the normal way

git add .

git commit -m ‘yourmessage’

git push

it will take a minute and maybe need to restart the netlify page to get to change