This post was authored in Observable at @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.
With Observable I can generate static prose programatically:
#
###
## #
## ####
## # #
## #### ###
## # # #
## #### ######
## # ### #
## #### ## # ###
## # # #### ## #
## #### ## # # ####
## # ### ## ## # #
## #### ## ### ### ## ###
## # # ### # ### # #
## #### ## # # ##### #######
## # ### #### # ### #
## #### ## ### ## ## # ###
## # # ### # ## ### #### ## #
## #### ## # ###### # # ### ####
## # ### #### #### ### ## # #
And this is generated and embedded into a pure HTML site.
I can also embed Observable cells for dynamic content (kudos Lionel Radisson). Find more of his great code here
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.
I used a serverside cell called 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
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 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.
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 or Twitter.
Check