Purpose

I've wanted to have a website to loosely log some of the technical projects that I'm exploring, and, of the 1) "use somebody else's website template" and 2) "do everything yourself - even if it's super annoying", I'm strongly in the 2) camp both for cost and control reasons. This post attempts to record my experience with nuxt.js and prismic.io to use a headless content management setup for my serverless site.

How to update websites: Push content

One of the many annoyances of updating a website is pushing content.

In the days of yore, you might type some content (raw HTML), preview it on a local server, and then push to a production server (I'm ignoring enterprise-grade CI/CD type considerations). Maybe you are feeling really fancy and have built a templated HTML page that reads from the file system on your server, like the nuxt.js markdown blog tutorial here. Super cool.

But every time you make a change to your site, you generally have to push changes. Which, if you're a single developer, is more than fine and totally expected. If you have a team, though, (particularly if there are content-creation team members who are distinct from developer team members) there's a bit of coordination required for every update, which, at best, is mildly annoying and, at worst, becomes a bottleneck.

How update websites: Pull content

Your server

Enter content management systems (CMSs) like WordPress. WordPress has standard content templates and a web interface where you can actually create content directly (and, critically, need not be a developer). Your templated website pulls content created (or tailored) via the WordPress web interface - and, voila, you've streamlined content creation and publishing. So just set up WordPress (along with users) and go.

But WordPress is...running on a server somewhere. All the time. Even if your website is only viewed by 3 people in the world every 81 days. Servers cost money, and, even if you use the smallest of small AWS EC2 instances, you're still paying for something (which I would rather not do).

Now, there are ways to not pay for that server all the time: I recommend you go check out serverless.com to find out what it's all about. One could stand up a serverless WordPress site and administer content creation through that mechanism...and there are many ways to do so (see here, for example). But I didn't want to use WordPress because I'm a brat (see also point #2 above re absolute control).

Someone else's server

Serverless stuff is neat and, although not suitable for every application, I've found it to be cost-effective for my next-to-zero traffic website. Amazingly, there are companies that will basically host content management interfaces for you. Like prismic.io. So, in a nutshell:

1. I create some content according to primsic.io's templates
2. I create a website that makes asynchronous calls to fetch my content from prismic.io
3. I publish my website just once
4. I publish new content on prismic.io and it appears automatically on my website whenever my website is served.

Yay.

This may seem like overkill (and it is since I'm just a single developer and would happily push updates every time I update something) - but I was exploring and here we are.

The "main" page of my website has the following (slightly truncated for clarity) JavaScript (again, using nuxt, which is a great, even-simpler-than-Vue Vue framework). I generally followed the setup listed here.

export default {
  data() {
    return {
      posts: [],
      linkResolver: this.$prismic.linkResolver,
    };
  },
  async asyncData({ $prismic, params, error }) {
    const documents = await $prismic.api.query(
      $prismic.predicates.at("document.type", "blog_post"),
      { orderings: "[document.first_publication_date desc]" }
    );
    if (documents.results) {
      return { posts: documents.results };
    } else {
      error({ statusCode: 404, message: "Page not found" });
    }
  },
};

There's a cool $prismic object that's part of my application (with login credentials and such set up in my config files) and I just query it.

So the website gets published just once! All the other content hosting is via prismic, which is free for a site of my size.

Admittedly there's some setup complexity here - but I'm now pretty free from further dev details and can update content from anywhere in the world, without using WordPress :].