Using an API-first CMS for my github page?
Tags: githubpages, blogging, cms, vue
Published: 2018-06-15 22:11:11

---
title: Using an API-first CMS for my github page?
published: true
description: Deploy a SPA and post from the web free
tags: github pages, blogging, cms, vue
---

**Important**
This is a project I no longer host in my github page, but decided to leave the post for historic reasons. I took my own advice and changed to a gatsby static site, anyway feel free to read and comment at the end.


>For some time now I've been wanting to have a sort of blog to post whatever I'm learning or developing at the time.

There are plenty of cool options out there for blogging, but for a developer in 2018 I don't think you set up with Squarespace or even Wordpress. You may want to have full control over your blog, have it as a static site without the need for a database, and maybe even write the posts on markdown.

If the aforementioned description fits you, I strongly recommend you try GatsbyJS and start with this awesome tutorial on [how to build a gatsby powered blog in about 10 minutes](https://medium.freecodecamp.org/how-to-build-a-react-and-gatsby-powered-blog-in-about-10-minutes-625c35c06481).

For me, I wanted a simple old fashion index.html with a css and js files published on github, minified and vuejs powered but nothing webpacky, that only need to be pushed once and completely forgot, then write my content online and have the whole thing working alone. You can see it [here](https://github.com/daniel-ordonez/daniel-ordonez.github.io).

## Tipe.io

**Next Generation API-first CMS**
>Create your content with powerful editing tools and access it from anywhere with a GraphQL or REST API. Stop letting your CMS decide how you build your apps.

😎 Sounds great right!?

>But, you could use something like the Wordpress API before, what makes it that special? 

In short, with Wordpress you're restricted to the format of the request and the structure of the data retrieved (like preformated html).

With [Tipe.io](https://tipe.io/) you define the document structures you want, like posts, articles, authors, etc. And thanks to the goodness of GraphQL, you can define a structure in the query to get only the data you need.

# Easy as 🥧 project

**Front-end**: [Vue app](https://github.com/daniel-ordonez/vue-dev-profile)
**CMS**: [Tipe.io](https://tipe.io/)
**Hosting**: [Github](https://pages.github.com/)


✋ **WAIT** 🛑


## Don't public you secret keys 🤫


```javascript

window.fetch('https://api.tipe.io/graphql', {
  method: 'post',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': YOUR_API_KEY,
    'Tipe-Id': YOUR_ORG_SECRET_KEY
  },
  body: JSON.stringify({ query: query, variables: variables })
})
  .then(function (res) { return res.json() })
  .then(function (result) {
    console.log(result)
  });
```

Tipe.io requires you at least 2 keys on each request
* 🗝️ Your API_KEY
* 🗝️ Your ORG_SECRET_KEY

You don't ever want those to be visible 👀 So, what do people do in this scenarios? 🤔

## You need a Back-end

Don't worry, it still be easy and free I promise 🤞

[The solution](https://github.com/daniel-ordonez/tipeio-query-forwarder) is an _Express app_ that listens for request as Tipe.io would but only requiring the query. Having your keys safely stored in the server, it makes a GraphQL request using your keys and your query and sends you back the response.

### Where to deploy?

I only had experience deploying a Node app to Microsoft's **Azure** and Google Cloud's **App Engine**. 
>I didn't like Azure.

😦 at the moment of working on that, there was no support for Nodejs on the App Engine Standard environment, meaning that there was no chance of having it running for free (now it is supported 😲).

So I looked into [Now](https://zeit.co/now) from zeit.co

_Now_ makes the process of deploying dead simple.
Just install de CLI tool, open terminal in you project directory and run 
```bash
now
```

_Now_ has a free plan named **OSS**, sure it has limited options but different from say _heroku_, your app won't go 💤 after some time. 

There's just one last little detail. **OSS** plan makes your code publicly available, so writing the _SECRET KEYS_ into your code will make them visible 👀
Don't even panic, that can be solved easily by setting your keys as environment variables through the _Now CLI_ when deploying

```bash
now -e MY_API_TOKEN="XXXXX"
```

## Final thoughts

This was my first post and I'm pretty sure it's messy and not that well written, but I'll appreciate your comments, suggestions, critics and all of that good stuff ✌️.  

Tell me what you think of the idea, did you like it?
Was it over complicating?
Could it be better? (of course it could, but how?)

Here's the code for [the back-end](https://zeit.co/imdani/daniel-ordonez-now/kyukxyquzy/source?f=main.js)

# Fin