IM Blog Projects AS213339 Contact
Back

This site: design and hosting

Published 2023-09-02 2 min read

Welcome to my site!

This is a brief overview of it’s design, how (and why) I decided to host it where I do, and how I built it.

Design

This site is designed and build via Astro. If you haven’t used it before, check it out! It’s an amazing, no-JS-by-default (but you can add it if you want) site framework for building both static and server-side rendered sites.

My site is all static. Static sites can be significantly faster than server-side rendered sites, especially since they don’t use a backend database. Astro allows me to author all of my content in Markdown, build it once, and then deploy it.

I use TailwindCSS and Tailwind’s Typography feature for styling. If you haven’t used it before, Tailwind is like Bootstrap but without the opinionated design. It allows specifying CSS attributes completely with classes, while still allowing fine-grained adjustment of styling and layout.

I also use Astro’s new View Transitions. Astro View Transitions builds on the work being done in Chrome (and eventually Safari and Mozilla, or at least they’ve indicated support) with the View Transitions API to allow page transitions to be animated and super smooth, even between completely seperate pages on a site - something that would be very difficult to do without native browser support. Check it out by going home and then back to my blog.

Hosting

I host this site via Cloudflare Pages. Cloudflare Pages is completely free for static sites (unlimited bandwidth, unlimited requests!), supports server-side rendered sites with cheap pricing, and has built-in CI/CD.

In this case, I’m actually using Direct Uploads to allow me to skip the CI/CD step and upload my content quickly - while useful when working in a team, Direct Uploads allows me to iterate on blog posts and publish them instantly around the world.

I’m also not using a server-side rendering adapter. As mentioned previously, this blog is completely static. However, I am using Pages Functions to provide the contact form. Thanks to some configuration (_routes.json), I’m not billed for static asset requests, only the few contact submissions I get.

If you like, you can check out the full code on GitHub. Until next time!