Using an API-first CMS for my github page?

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.

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.

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 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
CMS: Tipe.io
Hosting: Github

✋ WAIT 🛑

Don't public you secret keys 🤫

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 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 from zeit.co

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

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

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

Fin