Skip to content
Switch branches/tags
Go to file

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

API-Powered Static Website


View Demo


You get the best of all worlds:

  1. The flexibility to manage content from the Cosmic JS CMS API.
  2. The speed of static HTML.
  3. The option to use Markdown files.

How it Works

  1. The build process fetches content from the Cosmic JS API, then builds the static HTML files.
  2. Metalsmith transforms your Markdown into HTML pages.
  3. A light Node.js server is used to serve static files and perform rebuilds at the route /rebuild-site.


For further reading, check out the article How to Build an API-Powered, Static Website: The Best of Both Worlds.

Getting Started


Make sure you have yarn installed. Why? Because it's new, we love new, and it's provides quite a few improvements over the old npm install.

git clone
cd static-website

Start Server

yarn start

Your static site will now be serving static files from /build at http://localhost:3000.

Easy Rebuilding

Rebuild the website at any time by accessing http://localhost:3000/rebuild-site.

Add / Edit Content

You can easily manage the content in your static site on Cosmic JS. Follow these steps:

  1. Log in to Cosmic JS.
  2. Create a bucket.
  3. Go to Your Bucket > Apps.
  4. Install the Static Website App.
  5. Deploy your Static Site to the Cosmic App Server at Your Bucket > Web Hosting.

Now you can edit your content and rebuild your static site on-the-fly by accessing


If you would like to rebuild your site after every content edit, this is made easy with Webhooks.

Click here for a tutorial on how to set up Webhooks.

To set up your Webhooks:

  1. Go to Your Bucket > Webhooks and add the Webhooks product to your bucket.
  2. Add a Webhook that is triggered when an object is published.
  3. Point the Webhook to
  4. Save.


API-Powered Static Website



No releases published


No packages published