Build a JAMstack-Powered Website in 4 Steps

According to jamstack.org, when talking about JAMstack, we no longer talk about operating systems, specific web servers, backend programming languages, or databases. The JAMstack is not about specific technologies. It’s a new way of building websites and apps that delivers better performance, higher security, lower cost of scaling, and a better developer experience. What does it entail?

- Javascript

- APIs- Markup

If you are wondering whether you are currently running on JAMstack, a couple of dead giveaways that you aren’t is if you’re using an installed content management system like a WordPress, Drupal, Joomla or even a browser-builder like a SquareSpace or Wix. A good example of a JAMstack-capable system is Cosmic JS, an API-first cloud-based content management platform that works by decoupling content from code and is programming language agnostic.

In this blog I will detail how to Build a JAMstack-Powered Static Website in 4 steps. This powerful website gives you both the flexibility to manage content from the Cosmic JS API and the speed of static HTML. The static website will use Webhooks and Markdown to automatically rebuild itself once content is changed dynamically with the Cosmic JS Content Management API. While I’m simply picking up a content-ready static website from the Cosmic JS Apps Page, you can see how the API-Powered Static Website was built with Node.js (specifically the Express Framework) by reading How to Build an API-Powered, Static Website.

I’ll be using Cosmic JS for this example app. Cosmic JS is an API-first CMS that makes managing and building websites and applications faster and more intuitive. By decoupling content from code, Cosmic JS empowers developer flexibility while ensuring content editors can plan and deploy content as it best suits them. We’ll be using Cosmic JS to install our example app, deploy and make content updates moving forward from the cloud-based Content Management Platform.

Resources

View the Static Website demo here.

View the Static Website codebase on GitHub here.

View the Static Website App page on Cosmic JS.

1. Create a New Bucket with Cosmic JS

Sign up for Cosmic JS or navigate to your Cosmic JS Dashboard to Add a New Bucket.

Once you’ve added a new bucket, you will be prompted to create your Bucket’s name. This will assign the bucket slug that will be used for your application’s API endpoint.

I named my bucket “JAMstack” as an example for this blog.

2. Install The Cosmic JS API-Powered Static Website

Once I’ve saved my bucket, I will have the option to install an application or get straight into creating my object types. I am installing the API-Powered Static Website from the Cosmic JS Apps Page.

Once you’ve selected apps you will see the Apps Page within your Cosmic JS Dashboard. You can filter between Node.js, PHP, React as well as other tags to filter between content-ready websites and apps.

I install the Static Website and am greeted with a Deploy to Web modal. I enjoy deploying my applications the minute I install them so that I can edit my web application within the Cosmic JS CMS and refresh to see my results in real time as the API updates my app immediately.

3. Deploy Static Website

Once you select Deploy to Web, you will have options to set environment variables as well as add hosting features such as and one-click SSL.

Click Deploy to Web and a “Deploy Web App” modal appears to clarify my GitHub branch, deployed location and the like. Average deployment on Cosmic JS takes 2 minutes. I receive an email with the live link to my Static Website.

4. Manage Dynamic Content and Review

Static HTML and Markdown combines for a fast experience. The Cosmic JS API provides the dynamic content for the API-Powered Static Website, controlled through the Cosmic JS Content Management Platform.

Edit objects, add new media and publish content to your Static Website. The static website rebuilds itself with each content change upon page load, so you stay real-time with the ease of maintenance of a Static Website.

Cosmic JS is an API-first cloud-based content management platform that makes it easy to manage applications and content. If you have questions about the Cosmic JS API, please reach out to us on Twitter or Slack.