Introduction
Quick Start
Tour
chevron_right
In Depth
chevron_right
API Reference
Help

Quick-Start


This quick-start is aimed at developers.

Getting started using Headless is really simple. Just follow the next few steps.


1. Create a new website

Assuming you've created an account succesfully, you'll be greeted by an empty screen. Here you can create your first website. Click the button in the bottom right corner and create your website.


2. Add a blueprint

Go to Settings -> Blueprints in the sidebar and click the button in the bottom right corner.

Choose the Blog template and call your new blueprint "Blog" or create it without a template and name it whatever is appropriate.

You now have a Blog blueprint and you can start writing!


3. Add content

Go to Manage content -> blog in the sidebar and add some content.


4. Connect your website

The only thing left to do is to get this content on your website.

What we want to do is simply create a .json file on the server with all of the content. Then this JSON file gets sent to every visitor and they have dynamic content without a database.

To do this, you only have to do a single request to our server and you'll have all of your content for that blueprint. Send your API token as querystring for authentication, you can find your API token in under the Settings menu.

Here are some examples how to retrieve your content and use it in your static website:

Vue.js
React
Node.js
Hugo
Hexo

For Vue.js we took the webpack template and amplified it with Headless.

These are the main things you need to do (be sure to check out the full example code).

First, install some handy dependencies that make our lives easier: npm install axios fs-extra

Then use the below script that downloads from the Content API and saves it as JSON. This script can be used for any Javascript framework, like React or Angular. Save it as build/headless.js.

const axios = require('axios')
const fs = require('fs-extra')
const path = require('path')

const HEADLESS_TOKEN = '3eqUsAwZa59vNSHXhQBQ1lxWILXy9u7u'

axios.get('https://content.headless.rest/api/v1/demo-website/content/blog', {
  params: {
    token: HEADLESS_TOKEN
  }
}).then((res) => {
  fs.outputFileSync(path.join(__dirname, '..', 'headless', 'content', 'blog.json'), JSON.stringify(res.data.items, null, '  '))
}).catch((err) => {
  console.error(err.message)
  process.exit(-1)
})

And then you simply require the JSON in your Vue app.

this.posts = require('@/../headless/content/blog.json')

Then iterate in your template

<div v-for="(post, i) in posts" :key="i">
  <h3>{{ post.content.en.title }}</h3>
  <div v-html="post.content.en.body"></div>
</div>

And make sure your content is retrieved during build time by adding this to the scripts in your package.json:

"build": "npm run fetchContent && node build/build.js",
"fetchContent": "node build/headless.js"

Edit the script with your API key and change the URL so it refers to your website and blueprint.

You can find the Vue.js example here.


Feel free to download any of the above examples from the example repository. They should all work without changes.


5. Auto deploy

With the above you'll already have a working dynamic website without using a server. But it would be nice if you didn't need to deploy manually every time...

This is where webhooks come in to play. Whenever content or translations change, webhooks are called and they can trigger whatever you want. Usually this is a build process so that your website is updated with new content. But it can also send a message to Slack or integrate with Zapier or anything crazy you want.

Go to Settings -> Webhooks in the sidebar and add a webhook URL. Static webhosts like Netlify can give you unique URL's to trigger a build, that would be perfect to use here.

Now that you've added a build trigger webhook, anytime your content changes your website will be updated!


6. Sit back and relax

Now you can let others do the writing and you won't need to do anything. No worrying about insecure servers or outdated plugins. Welcome to Headless!