First Post: Static site generation in Observable / Tom Larkworthy

content =

html`<div class=content>${

md`

This post was authored in [_Observable_](https://observablehq.com/) at [_@tomlarkworthy/blog-first-post_](https://observablehq.com/@tomlarkworthy/blog-first-post). I love programming in _Observable_. I have always felt limited by the expressivity of CRMs like WordPress and Contentful. I want to blog using code. I want to use Observable as an interface to a static site.

## Write with Code

With _Observable_ I can generate static prose programatically:

${rule30n(20).map(row => ` ${row.map(d => d == 0 ? ' ': '#').join('')}\n`)}

And this is generated and embedded into a pure HTML site.

## Animate with Code

I can also embed Observable cells for dynamic content (kudos [Lionel Radisson](https://observablehq.com/@makio135)). Find more of his [great code here](https://observablehq.com/@makio135/creative-coding)

src="https://observablehq.com/embed/@makio135/svg-template?cell=render"></iframe>

So now I have a kick-ass static site that's super easy to update! I don't need to run a CLI command or do a PR to update it. All features can be done in the browser, including the build chain. The whole thing is entirely in _Observable_. Furthermore, it's all backed by CDN and is super fast, there are no compromises on the output, exactly because it's self authored.

## Tech Used

I used a [serverside cell](https://observablehq.com/@tomlarkworthy/serverside-cells) called [preview](https://observablehq.com/@tomlarkworthy/blog-first-post#preview) to dynamically serve the page. You can see that preview at the following link:

[https://endpointservice.web.app/notebooks/@tomlarkworthy/blog-first-post/deployments/preview](https://endpointservice.web.app/notebooks/@tomlarkworthy/blog-first-post/deployments/preview)

By default, the preview page renders every visit. This is somewhat slow, taking around 2-3 seconds, but it means published changes are reflected quickly. However, it is a horrible URL and too slow for production.

I give the page a nice URL using Netlify. To make the production page fast, I max the shared cache settings in the [serverside cell](https://observablehq.com/@tomlarkworthy/serverside-cells) when a production _X-Version_ header is present. Thus, so we lean heavily on the integrated CDN.

On the Netlify end, I set up the page to redirect to the serverside cell URL and add a custom _X-Version_ header. When the production page is updated, the version header is bumped, so the upstream cache is invalidated.

## Stay tuned

The personal webpage is a work in progress. Meta tags are missing, the RSS feed doesn't work and it doesn't support more than one page yet! But I will add to this over the next few weeks and hopefully get it to a state where anybody can create a page easily. For now, follow along on Observable${icon()} or [Twitter](https://twitter.com/tomlarkworthy).

Check

`

}`

rule30 = (input) => input.map((_, idx) => {

const context = [input[idx-1] || 0, input[idx] || 0, input[idx+1] || 0];

const id = JSON.stringify

switch (id(context)) {

case id([1,1,1]): return 0

case id([1,1,0]): return 0

case id([1,0,1]): return 0

case id([1,0,0]): return 1

case id([0,1,1]): return 1

case id([0,1,0]): return 1

case id([0,0,1]): return 1

case id([0,0,0]): return 0

default: throw Error(`Unexpected ${context}`)

}

})

preview = deploy("preview", (req, res) => {

res.header("Access-Control-Allow-Origin", "*");

return res.send(`<html class="has-navbar-fixed-top">

<head>

${header.outerHTML}

</head>

<body>

${topbar.outerHTML}

${sidebar.outerHTML}

${title.outerHTML}

${content.outerHTML}

</div>

</body>

</html>`)

})

md`

Netlify redirect:

-H 'cache-control: max-age=0' // Does not affect FH?

-H 'if-none-match: <etag>' if etag is right we can cache a cache hit

-H 'Authorization: <>' We can can cause a refetch regardless

-X 'X-Version' We can cause a refetch

`

import {deployStaticFile} from '@tomlarkworthy/netlify-deploy'

import { footer } from "@tomlarkworthy/footer"

footer

Purpose-built for displays of data