2b:null 2c:["$","title",null,{"children":"First Post: Static site generation in Observable | Tom Larkworthy | Observable"}] 31:Tb71,content = html`

${ 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) 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 ` }`32:[{"id":"0b3da562321b38a8c16b5ffb789ab0919d222c67d95901dc72ecf7e5f8564a8bcf01bbf382e9291cae3b5f2374fe1d2485497c86eeb28079ca7e7a9dbc2206f4","href":"https://static.observableusercontent.com/files/0b3da562321b38a8c16b5ffb789ab0919d222c67d95901dc72ecf7e5f8564a8bcf01bbf382e9291cae3b5f2374fe1d2485497c86eeb28079ca7e7a9dbc2206f4","name":"image.png","type":"image/png","lastModified":1607109498065.715,"size":16214}] 2f:{"id":"a46458ec96604365","slug":"blog-first-post","title":"First Post: Static site generation in Observable","thumbnail":"86a8d58a1dda128eb8dd4879e08a7047b866daedb38c9dbf884e0efcfdd23f16","access_level":"public","create_time":"$D2020-12-02T22:51:12.768Z","update_time":"$D2024-03-23T18:17:52.683Z","view_time":null,"first_public_time":"$D2020-12-04T21:04:51.106Z","fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"7db5ed2b0697d645","login":"tomlarkworthy","name":"Tom Larkworthy","avatar_url":"https://avatars-next.observableusercontent.com/47327a8bc1966f2186dcb3ebf4b7ee6e4e7ab9a5c2a07405aff57200ea778f71","tier":"starter_2024"},"version":492,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"5215f6ec4a999d40","login":"tomlarkworthy","name":"Tom Larkworthy","avatar_url":"https://avatars-next.observableusercontent.com/47327a8bc1966f2186dcb3ebf4b7ee6e4e7ab9a5c2a07405aff57200ea778f71","tier":null}],"members":[{"type":"individual","id":"5215f6ec4a999d40","login":"tomlarkworthy","name":"Tom Larkworthy","avatar_url":"https://avatars-next.observableusercontent.com/47327a8bc1966f2186dcb3ebf4b7ee6e4e7ab9a5c2a07405aff57200ea778f71","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":2,"collection":{"id":"262286e4f7023969","slug":"blog","title":"blog","owner":{"id":"7db5ed2b0697d645","login":"tomlarkworthy","name":"Tom Larkworthy"}},"type":"notebook","body":{"title":"First Post: Static site generation in Observable","cells":[{"id":414,"value":"title = html`

${\nmd`# First Post: Static site generation in Observable\n`}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":459,"value":"html`prod`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":408,"value":"// Find on prod at https://tomlarkworthy.endpointservices.net/\ndeployStaticFile({\n title: \"Static site generation in Observable\",\n content: content.outerHTML,\n app_id: 'b6a918d2-9cda-4fde-b2ec-add91b22ea02',\n source: preview.href,\n target: \"/blogs/firstpost.html\",\n tags: [\"article\"]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":303,"value":"initial = {\n const arr = Array(61).fill(0);\n arr[30] = 1;\n return arr\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":323,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":307,"value":"rule30 = (input) => input.map((_, idx) => {\n const context = [input[idx-1] || 0, input[idx] || 0, input[idx+1] || 0];\n const id = JSON.stringify\n switch (id(context)) {\n case id([1,1,1]): return 0\n case id([1,1,0]): return 0\n case id([1,0,1]): return 0\n case id([1,0,0]): return 1\n case id([0,1,1]): return 1\n case id([0,1,0]): return 1\n case id([0,0,1]): return 1\n case id([0,0,0]): return 0\n default: throw Error(`Unexpected ${context}`)\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":349,"value":"rule30n = (n) => new Array(n).fill(0).reduce(\n (acc) => {\n console.log(acc)\n return acc.concat([rule30(acc[acc.length - 1])])\n },\n [initial]\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"preview = deploy(\"preview\", (req, res) => {\n res.header(\"Access-Control-Allow-Origin\", \"*\"); \n return res.send(`\n \n ${header.outerHTML}\n \n \n ${topbar.outerHTML}\n

\n ${sidebar.outerHTML}\n

\n ${title.outerHTML}\n ${content.outerHTML}\n

\n \n `)\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":435,"value":"md`\n\n\nNetlify redirect:\n-H 'cache-control: max-age=0' // Does not affect FH?\n\n-H 'if-none-match: ' if etag is right we can cache a cache hit\n-H 'Authorization: <>' We can can cause a refetch regardless\n\n-X 'X-Version' We can cause a refetch\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":242,"value":"import {sidebar, topbar, header, deploy, html} from '@tomlarkworthy/blog-navigation'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":384,"value":"import {icon} from \"@chitacan/rss\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":451,"value":"import {deployStaticFile} from '@tomlarkworthy/netlify-deploy'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":473,"value":"import { footer } from \"@tomlarkworthy/footer\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":491,"value":"footer","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"