Data-driven sites

This is the fourth part in a 5-part series about building a static site using VueJS. In this part, I’ll show you an example of how I built Net Your Problem by thinking of static content as data, rather than…well, static content.

We’ll go through this article looking at one specific section of Net Your Problem – the Projects section. There are two cards, with a title, a cover image for the card, and a button that opens a modal dialog.

Screenshot_2018-10-09 Net Your Problem
The Projects section of Net Your Problem.

Let’s look at the template for this,

There are two projects shown on the page, the template only shows one <card> tag with some data-bindings, along with some code to track some events with Google Analytics. Nothing too crazy here. But where is all of the content coming from? Netlify CMS.

If you think of your site as simply the presentation layer, that needs to serve content, think of a CMS as the database that stores your data, i.e., content. Netlify is a bit special. It actually doesn’t use any database, well, technically no. But one could argue that its use of a version-controlled filesystem is like a database. After all, a database has files too. Anyway, back to Netlify and how it works. Netlify basically provides a content editing platform on top of popular git version control systems like GitHub, and BitBucket. You can read about them here.

What I have done for Net Your Problem is, use Netlify CMS as the content editing platform, almost like WordPress. I italicized “almost” because, although WordPress is a CMS too. It differs in many ways. Well, first major difference is that, WordPress uses databases. You also need to host your content on their platform. On top of that, the articles, very much like this one, can only be published to a sub-domain of their own domain, at least under the Free plan. You can install WordPress on your own servers if you are adventurous and want to deal with all of the jazz of the setup and maintenance.

The thing with Netlify is, that the content simply gets stored as Markdown, JSON, or TOML files in your favorite version control SaaS platform. The files are organized in directory structures, that makes it easy for you to read the files. You can simply make ajax calls using the public APIs for GitHub or Bitbucket. The downside (if at all!) is, that you have to make your repository public in order to be able to call it anonymously, i.e., without authentication, from your website’s JS.

Let’s look at the code to fetch the content, which Netlify stores in our content repository. The gist below shows the script portion of the same Projects component, for which we saw the <template> portion above.

A few things to note,

  • axios is used as the HTTP client library
  • There are two API calls
    • GET the list of projects to show the cards.
    • GET the full content for a project when the user clicks on the READ MORE button in the card.

Once the content is downloaded from the JSON file, which is stored in the Bitbucket repo, I just update the data property that has a template binding attached to it and since the content is stored as a JSON file, the response from the Bitbucket API is…yep, JSON. This link will show you the response for the Projects lists JSON file.

And here’s the modal dialog that shows the full content of a “project” from Net Your Problem. The content itself is a markdown string, which is fed to the <vue-markdown> component, which you can see in the template above.

Screenshot_2018-10-09 Net Your Problem(1)
A modal dialog showing the content for one of the “projects” on Net Your Problem.

We just looked at one section in the site, but I am happy to report that 100% (…ok ok 99.9%..the header navigation is hard-coded) of the site is built this way. At first, all of the content was hard-coded in the site, and I slowly started to convert each component to be completely driven by data fetched through the APIs.

Convinced? Head over to the Netlify CMS docs to get started.


One thought on “Data-driven sites

Leave a Reply

Please log in using one of these methods to post your comment: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s