You might have heard the term JAMstack if you're into web development at all. It is similar to the LAMP or MEAN stack, which describes a certain technology stack used in web development. But if you are unsure what it is all about, JAM stands for JavaScript, API, Markup. Some core characteristics of the JAMstack includes:
This is the future way of building websites.
And you are done!
When you are running a site with a server side CMS, most popular examples of this setup includes WordPress, Drupal and Joomla.
If you have a single page application with isomorphic rendering, in other words a React application with server side rendering.
Or if you have a site that runs with a backend language like Ruby on Rails, Node.js or Java.
There are a few best practices which will make the most out of you JAMstack site if you stick to them. These guidelines and best practices are mostly standard when you are working the most popular and largest frameworks and tools, but these are some key points to keep in mind when working with JAM.
There are several great SSG's out there, but some of the most popular ones are includes Gridsome, Nuxt, Next, Gatsby, Hugo and Jekyll. You can find SSG's on this site: https://www.staticgen.com/.
The most popular host today is by far Netlify, but also Zeit's Now and Github Pages. You can find out more about hosting services here: https://www.thenewdynamic.org/tools/hosting-deployment/.
The most widely used and best supported service is Github which is what I can recommend you chose if you aren't invested into another service already. Microsoft has done a great job improving Github, and if you are using Visual Studio Code there are great integrations between them.
Now you can start coding and when you push your commits to Github, Netlify will automatically build and deploy your application, simple as that!
Since you are working with static files once your web app is built, you wont have any problems deploying anywhere. It is very easy to move your application to a new hosting service.
You also have the advantage when dealing with a headless CMS to more easily be able to move to another service since it is completely decoupled from the frontend.
You also have the option to work with local markdown files in the project and using a service like Forestry to interact with the content as if they were located in an external CMS. This way you will have even more freedom of how you chose to interact with your content.
I have been a big fan of Vue.js for a long time and love the things Gatsby.js is providing. After I found out about Gridsome, I can say it's the perfect match for me. Providing a great developer experience giving you powerful tools when working with data from example a CMS. GraphQL is used to give a unified layer of which you interact with to fetch data from all kind of sources. Much can be said about how great Gridsome is, but I will instead leave it up for you to try it out yourself and see how awesome it is!
Read more here: gridsome.org
Try out one of my starters for Gridsome: