Hello world

I have attempted to make this site many times, with each time ending in me deleting the repo. This is meant to be my corner of the internet and in the past I have tried building this site with astro using LLMs to do most of the work, or using the existing basic Astro blog site template and it never felt like my own. I didn't really understand how the site came to be, how it worked all I knew is I wrote some markdown and it showed up on the site. Finally I think I have landed on a repo that I understand and enjoy using. The site is just basic HTML and CSS and the technical details are also very basic, but that is intentional. Below are my thoughts on the development, technologies used and anything else I learned while making this site.

Picking a JS runtime

You might be wondering why do I need a JS runtime if this site is just static HTML and CSS. The runtime is really to make the development and writing experience better. I had the following requirements:

For HMR I decided to use vite and this meant I needed a JS runtime. Deno is quite cool, it was announced in 2018 by Ryan Dahl the creator of Node during his talk 10 things I regret about Node, it is written in Rust way before the AI hype and feels like there is real care behind the product. Now this project is my first time using Deno so I could come out of it regretting this decision but I doubt it. Having a JS runtime meant that I could write a script to convert my markdown drafts into HTML files when they were read to be published and I could use wrangler to deploy the site, though I could have done that without a runtime too. The only thing that gets deployed to the site is the ./src/dist directory. I chose oxfmt as the formatter primarily for it's speed over prettier and biome. I am quite happy with the workflow.

Light and dark mode

I remember a couple years back how cool it was that a site had light and dark mode. Now it's pretty strange if a site doesn't have this. After digging around MDN docs it really wasn't that bad to implement. The two important things to know are the color-scheme property and the light-dark function. Inside the :root I set color-scheme: light dark, to signal that this page supports both light and dark mode. I do this inside :root because it selects the root element of the document so it affects the entire page, this is also a good place to define global variables to be used elsewhere such as colors, this is where I set the background and text color for light and dark mode. Then when I want an element to have 2 colors such as the body I use light-dark(light-color, dark-color). The function will return a value based on the active color scheme. You can test this out by setting your colorscheme to just light or just dark and watch it switch. This works with user OS/browser preferences so if you have your browser set to light mode it will show the light colors.

Cloudflare

There were a couple different options here for deploying. Vercel, Cloudflare, AWS, VPS etc. At some point I do think it would be fun to figure out how to deploy this on just a box and setup nginx etc but I have been meaning to get this site out for a long time now and to be honest didn't really care about how it got deployed. I was seriously considering vercel for a while, the domain for this site was bought on Vercel Domains, which is the best UX I have ever used to buy a site. But Cloudflare is completely free for static sites and the DX vercel has over cloudflare doesn't really matter too much for this project. That doesn't mean there weren't annoyances with cloudflare my main one being around preview URLs. I wanted to be able to share a draft of my blog post with people before it was added to the main domain for feedback and preview URLs seems to be a great use case. I can just give people a link, I can secure it so only certain people can access it etc and once they give me feedback I can make changes and then publish to the main domain. The issue is that I cannot for the life of me figure out how to delete the preview URLs after I am done with them. I generated a preview URL with deno task build && wrangler versions upload --preview-alias draft and that created this page but from there I have not been able to figure out how to delete this deployment it stays up no matter what. Not the end of the world but minor annoyance. Configuring domain rules and DNS settings were really easy in cloudflare. Just know that DNS changes take a bit and your local cache might be the reason a site is showing as unavailable even though it has the right DNS records.

Future

I would love for the markdown files to have front matter that I parse in the publish script and use. I want a rss feed, a place for what I am currently reading and what I have read. For code in markdown I would like to use Shiki for syntax highlighting and may more. Right now the project is just write a markdown file in drafts/, when its ready to publish run the publish script and add a line to index.html. Then build and deploy to cloudflare. This works for now and I don't want to keep spinning my wheel in the pursuit of "perfection" and never ship something.