API-Powered Static Website
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
layouts fix repeater nav links Jan 5, 2017
src
.gitignore first commit Oct 20, 2016
README.md Update README.md Mar 20, 2017
app.js :earth: => Oct 23, 2016
build-site.js partials Oct 24, 2016
config.js config Oct 24, 2016
create-page.js partials Oct 24, 2016
package.json added Docs page with Markdown Oct 24, 2016
yarn.lock added Docs page with Markdown Oct 24, 2016

README.md

API-Powered Static Website

HTML

View Demo

Why?

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.

Article

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

Getting Started

Install

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 https://github.com/cosmicjs/static-website
cd static-website
yarn

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 http://your-bucket-slug.cosmicapp.co/rebuild-site.

Webhooks

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 http://your-bucket-slug.cosmicapp.co/rebuild-site.
  4. Save.