Static dynamic webpages with Baked.JS

By Robin van Breukelen - CTO at MoreApp. Static dynamic webpages, seems like a contradiction? You want to enable non-techies to make changes to the pages of the website, but you don’t want to go through all the problems you’re going to have by implementing a CMS, and for various reasons you haven’t created your website in something like WordPress. Baked.JS to the rescue! In this blog I will explain what it is, how we use it, and how you can profit from this awesome technology too.

Baked.JS

So let me explain what I meant with static dynamic webpages. Let’s start with the latter; by dynamic I mean that the content of a page can change. Exactly like with a CMS, content writers can change the content of a webpage as much as they like. Static means the exact opposite: a page that has predefined content and does not change. The benefit of a static page is that it is really easy to see what’s going on. If you view the source of a static page you see plain HTML and there’s nothing that interferes with that HTML. So debugging is simple and making changes to the structure of the page is also easy as pie. So ideally, you’d combine both worlds: enable content writers to change the content of the page but still be able to easily change the structure and layout of the page.

Baked.JS gives you the ability to do exactly that. In a nutshell it looks at template files and generates the HTML pages based on the content stored in the content repository (prismic.io).

null

When there is new content available you simply regenerate your website and you’re all set to go.

Hands-on

Let’s take a look at how you would set up a simple site with articles and an overview of the articles.
To create a simple overview you would write something like:

<!DOCTYPE html>
<html>
<head>
<meta name="prismic-api" content="https://lesbonneschoses-ulzozro531ca879z.prismic.io/api">
<meta name="prismic-oauth-client-id" content="UxWopwEAAPN0sBcH">
<meta name="prismic-routing-pattern" content="/article.html">

<script src="/baked.js"></script>
</head>
<body>

<h1>Articles</h1>

<script type="text/prismic-query" data-binding="articles" data-form="article">
[
[:d = at(document.tags, ["Featured"])]
]
</script>

[% _.each(articles, function(article) { %]

<article>
<h2>
<a href="[%= url_to('article', {id: article.id}) %]">
[%= article.getStructuredText("article.body").getTitle().text %]
</a>
</h2>
<p>[%= article.getStructuredText("article.body").getFirstParagraph().text %]</p>
</article>

<hr>

[% }) %]

[%- partial('/footer') %]

</body>
</html>

The “magic” lies in these lines:

<meta name="prismic-api" content="https://lesbonneschoses-ulzozro531ca879z.prismic.io/api">
<meta name="prismic-oauth-client-id" content="UxWopwEAAPN0sBcH">
<meta name="prismic-routing-pattern" content="/articles.html">

The first line is the URL to the API of the content repository, this basically tells baked where to connect to. The next line specifies the client ID that you’ve given access to actually query the content repository.
The last line specifies what the path to this page will be.

The following part queries the content repository using their query language:

<script type="text/prismic-query" data-binding="blogPosts" data-form="blog">
[
[:d = at(document.tags, ["Featured"])]
]
</script>

Then using EJS you’re able to iterate through the results. Because this page links to an article page using:

<a href="[%= url_to('article', {id: article.id}) %]">

Baked will also look for a template called ‘article’ and parse that. So if you have two articles stored in your repository the template will be evaluated for each article. The result looks something like this:

null

It’s not exactly eye-catching, but still pretty neat, no?
Hopefully someone will be able to use this for their project. We’ve used it for the MoreApp site, and it fits our needs perfectly. What do you use to manage the content on your website?

Go Digital Today!

MoreApp 2013 - 2018 | Security | Privacy
EN / ES / DE / NL / PT / RU / AR / FR