Carson Gibbons is the Co-Founder & CMO of , an API-first Cloud-based that decouples content from code, allowing devs to build slick apps and websites in any programming language they want. Cosmic JS Content Management Platform 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 , you can see how the API-Powered Static Website was built with Node.js, specifically the Express Framework by reading . Cosmic JS Apps Page How to Build an API-Powered, Static Website 1. CREATE A NEW BUCKET WITH COSMIC JS for 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. Sign up Cosmic JS 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 from the . API-Powered Static Website Cosmic JS Apps Page Once you’ve selected apps you will see the within your Cosmic JS Dashboard. You can filter between Node.js, PHP, React as well as other tags to filter between . Apps Page content-ready websites and apps I install the 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 and refresh to see my results in real time as the API updates my app immediately. Static Website Cosmic JS CMS 3. DEPLOY STATIC WEBSITE Once you select Deploy to Web, you will have options to set environment variables as well as add such as and . hosting features custom domains 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 takes 2 minutes. I receive an email with the live link to my Static Website. Cosmic JS 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 provides the dynamic content for the , controlled through the . Cosmic JS API API-Powered Static Website 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 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. Developer PageSpeed Insights . View the Static Website demo here . View the Static Website codebase on GitHub here . View the Static Website App page on Cosmic JS is an that makes it easy to manage applications and content. If you have questions about the Cosmic JS API, please reach out to us on or . Cosmic JS API-first cloud-based content management platform Twitter Slack

Google

Slack

Twitter

Build an API-Powered Static Website in 4 Steps

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

5 Things to Know When Building a Content-Driven Application

100 Days of AI Day 1: From Newsletter to Podcast, Leveraging AI for Audio Transformation

10 Threats to an Open API Ecosystem

10 Indications That You Should Invest in Automation Via APIs

10 Best Practices for Securing Your API

The Noonification: Getting Your API Into Production (10/28/2022)

5 Things to Know When Building a Content-Driven Application

100 Days of AI Day 1: From Newsletter to Podcast, Leveraging AI for Audio Transformation

10 Threats to an Open API Ecosystem

10 Indications That You Should Invest in Automation Via APIs

10 Best Practices for Securing Your API

The Noonification: Getting Your API Into Production (10/28/2022)

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps