For years I’ve felt guilty about my use of online shopping. All those little packages coming from big Eastern cities, all the way across the continent, to be driven to my door by a harried little man in an overworked Honda. Surely that’s wasteful compared to me just going to the local bigbox outlet and buying it in person, right? Well, I recently had a thought that has me questioning that logic.
As I’ve mentioned elsewhere, this new site is being designed with a streamlined workflow that will let me manage it as a normal part of my existing note-keeping system, but what I haven’t done yet is explain how it works.
Central Notes
As my daily driver for note-keeping, I use Obsidian. It syncs quickly between all my different computers, but 98% of my time with it is spent on my phone. I use it for new project ideas, notes about features and progress, I write sketches of marketing content, I write review notes as I’m reading books. I even write drafts of many emails before I send them. So when I set out to design a new website infrastructure, I decided that, in a perfect world, it should integrate seamlessly with that existing system.
I started out exploring a system I was already familiar with (Nikola) that builds a website from a collection of text files in Markdown format. I eventually dumped Nikola in favor of Hugo, but I had built a shadowing engine that used hashtags in some Obsidian files to guide those notes onto the website, and I was able to use that same engine with Hugo.
By default, notes in my Obsidian base don’t get published. They just sit peacefully in my note base and go about their notey business. But when something reaches the point where I want to share it, I can just add a couple of hashtags to tell Hugo where to put it, and voila! Off it goes.
There are three basic types of notes: pages, articles, and posts. Pages are organizational nodes that will be referenced in the site navigation system and contain a description of that section of the site. They will also be given (automatically) a list of articles related to that section and/or a list of update notes. I think of articles as stand alone documents like feature lists, white papers, etc., while updates are more like log entries for the project.
Navigation and streaming
As I create new projects, I need to tell Hugo about them, but I don’t want to have to edit the site design every time, so new projects are declared by simply adding a hashtag. To initiate a new project called Foo, I write a note describing its ambitions and include a ch-proj-foo tag on that note. That will generate a page that will automatically become the description page for that project and be added to the nav system. Once the project page exists, the tag foo can thereafter be used to associate any posts or articles with the project.
Project pages are automatically categorized as page-type entries, but for other pages that aren’t part of any project, like About or Privacy Policy, they need to be explicitly tagged with ch-page-foo. And similar to the project tags, any article subsequently tagged with foo will be attached to the page, which is how the various About articles got attached to the main About page.
Images
Within any given article, page or post, I can include embedded images. As a rule, every update post gets a thumbnail image to provide a visual cue in the feed about what the post is about. This image is marked by giving it a caption text that includes the key: ch-thumb.
After applying any styling keys, they are removed from the caption. If any text is left in the caption, it will be displayed as a caption.
There are a few other style keys to indicate placement and styling of non-thumb images within the article: ch-left, ch-right, or ch-wide.
Styling of images is limited for now to just those few cases, to keep things simple and consistent, but I can always expand this system if I need to in the future. For now, the scheme is both simple and fast, so I can toss out an update in almost no time, which means I’ll do it more often. Anything fancier would probably just bog me down.
That’s the entire system for now, and it seems like I can drive a pretty robust site from that, but if it changes, I’ll try to remember to come back and update this article to keep it complete. The job right now is to finish implementing the template code that builds those “automatic” features I mentioned.
And if the inline images I’ve included on this page are rendering as left, right, and wide examples, then I’ve figured out how to make it all work.
Addendum
Additional tags described here.
- ch-deploy-foo (attic/basement)
- ch-showroom-roomname
- ch-promo-roomname
- auto-pause inactive projects
