How to build a static blog part 2
Sunday, 2 July 2023The cool features
Fast AF
Once deployed, this blog will be statically rendered, on the edge. This means very fast to load, anywhere, especially on your phone. Add that to the small bundle size, and a skew of other optimisations, and the site should be super quick.
Gratis
It's free. Unless and until you are receiving a lot of visitors, there is no hosting fees to worry about.
Functions
It has a contact form, which will send the submissions to your email address. Without needing to run a server, and all for free! This is powered by cloudflare functions, which are kind of like cloudflare workers.
Tailwind CSS
I've used Tailwind to define the css styles, which means more optimisations, and easy customisations. I've used a couple of tailwind plugins too, to give the blog beautiful typography out of the box, and the form to be nicely styled with almost zero effort from me.
Markdown powered content
If you aren't already creating your documents and web content using markdown, then I really recommend trying it out. Writing blog posts in my code editor (or a markdown notes app like Obsidian), and when they are done, publishing with a git commit and push is so nice.
Admittedly this wouldn't suit everybody, certainly not the same UX as provided by WordPress or other blog CMSs. But, unlike with WordPress, there is no database to host, no server to update and maintain, no myriad of complex settings to configure. Oh and did I mention the speed?
Vue components
You can embed vue components (and even provide their props and use slots) inside your markdown files. This is a game changer, you can build any layout you can imagine, right inside a markdown file. Read more about MDC syntax
::card
The content of the card
::Nuxt 3 with (or without) Typescript
I won't go into all the benefits and optimisations provided by Nuxt3 here, but suffice to say there's a lot. See the docs for more. Typescript compatibility is also really useful if you want to add any custom functionality to your blog. Even if it's just to get the nice typing when you hover over a line of code in your editor.