Build an API-Powered Static Website in 4 Steps
Carson Gibbons is the Co-Founder & CMO of Cosmic JS, an API-first Cloud-based Content Management Platform that decouples content from code, allowing devs to build slick apps and websites in any programming language they want.
In this blog I will detail how to Build a API-Powered Static Website in 4 steps. 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.
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 “Carson’s Static” 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 custom domainsand one-click SSL.
Click Deploy to Web and a “Deploy Web App” modal appears to clarify my GitHub branch, deployed location and the like.
Start counting down until your Static Website is live, but don’t let it stop you from editing Globals, Pages, Content, Media or whatever your heart desires :)
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
Naturally, I click to view my Static Website and it’s live at http://carsons-static.cosmicapp.co.
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.
I used Developer PageSpeed Insights from Google a minute after deployment success and my Static Website was already firing off zippy HTML coupled with the Static Website’s Markdown files for a fast loading experience.
View the Static Website demo here.
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.
Hacker Noon is how hackers start their afternoons. We’re a part of the @AMI family. We are now accepting submissions and happy to discuss advertising & sponsorship opportunities.
If you enjoyed this story, we recommend reading our latest tech stories and trending tech stories. Until next time, don’t take the realities of the world for granted!
