Automatically JAM Stack website on Netlify

Tram Ho

In the 2 previous articles I mentioned JAM Stack , JAM Stack stands for Javascript, API and Markup. Recently, JAM stacks have become more popular besides existing stacks like LAMP, MEAN. The static web that we built in the previous 2 articles, I will deploy them on Netlify , a static hosting (with a free option).

Introducing the JAM Stack

JAM Stack is:

  • Javascript (J): Front end framework, run entirely on the client side, can use any popular framework like VueJS, ReactJS, AngularJS
  • API (A): Self-created HTTP APIs or vendor APIs can be accessed with Javascript Client.
  • Markup (M): The template is built before deploying, then pushed to the server and when the server can be considered as a static website.

Applications using JAM Stack are deployed simply, the source code is stored on Git, when you want to change the content of the website, we change the source code and push to Git. The Github Account associated with the Netlify App will make Netlify recognize the changes and proceed to rebuild the source code and save it there.

What strengths does JAM Stack have?

  • Fast loading speed: All website pages are built into static pages and hosts, they do not need access to the DB. The cache will use the Service Worker to cache website content on the client.
  • Good security
  • Offline support: With Service Worker, users can still access your website without internet.
  • Good load bearing
  • Low cost: With the use of JAM Stack, there are many choices of hosting providers from cheap to free.

Netlify

Netlify is an all-in-one platform for web project implementation. Instead of older hosting architectures, Netlify provides a CI, deployment pipeline with a simple process.

Link Netlify account with Github repository.

After registering a Netlify account, to deploy a new website on Netlify , click New site from Git .

You must allow Netlify access to your Github account through the Github App, then in step 2, select the Github Repository of the website to deploy.

Here I will deploy the website built using Gridsome in the previous article, so I’ll fill it out

And select Deploy Site .

You can go to the Deploy Log page to view the application build process

The output of such logs is successful

As a result, you will get a preview page like this https://5ed0df6612552aca80108a9e–hungry-poincare-77411b.netlify.app/

Share the news now

Source : Viblo