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
1 2 3 4 5 | # Build command gridsome build # Publish directory dist |
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
1 2 3 4 5 6 | 5:07:31 PM: 0 new functions to upload 5:07:31 PM: Starting post processing 5:07:31 PM: Post processing <span class="token keyword">done</span> 5:07:32 PM: Site is live 5:07:49 PM: Finished processing build request <span class="token keyword">in</span> 53.638337233s |
As a result, you will get a preview page like this https://5ed0df6612552aca80108a9e–hungry-poincare-77411b.netlify.app/