Blog Setup and Architecture Descisions

Architecture

This blog is a static site (see also jamstack.org), using the Astro framework with the AstroPaper theme courtesy of Sat Naing.

why Astro?

Between Hugo (another excellent SSG) and Astro, I think Astro will provide me with the easiest way of creating custom components in the future. With Astro, it is also super easy to use mdx to add some interactivity to the site. I also checked out Ghost, but didn’t like the fact that I need an actual compute server to run it.

why use the AstroPaper template?

I didn’t want to spend to much time comparing themes, so I picked a popular one. The following features were important to me:

• written mostly in pure astro
• dark/light themes
• code blocks with a copy button that have syntax highlighting and also follow dark/light mode
• rss feed built in
• good image handling
• search built in

Also using:

• GitHub
• Cloudflare Pages for building and hosting the static site
• Cloudflare as domain registrar and dns provider

why use GitHub and Cloudflare?

I wanted to get started and not get overwhelmed by analysis paralysis. I know there are better alternatives.

Initial setup of the website

Pre-requisites: git and nodejs installed, git is authenticated with GitHub

1. Registered a domain at Cloudflare, no additional setup needed with nameservers since I will also use Cloudflare Pages later

2. Use the GitHub web interface to use the AstroPaper theme as a template:

   • https://github.com/satnaing/astro-paper
   • using a template in github will squash all commits of the source repo at that point in time and commit it as “Initial commit” and only have a single branch “main”

3. Clone repo locally, install dependencies and run it locally

   npm i && npm run dev

4. Update src/config.ts SITE.website with the public url, commit and push

5. Connect Cloudflare Pages to GitHub, select the Astro preset and create a new site based on your repo, basically all the defaults are okay, at the end, also set the custom domain to be the one you configured in src/config.ts

6. You should see the site public fairly quickly, didn’t take more than a minute for me.

7. Clean up and customization

   • Delete all content from the template site and add hello world post to test the auto deployment mech.
   • Clean up the rest of the repo, by deleting more config files I don’t need.
   • Update src/config.ts with more basic site info
   • Customize the color schemes in src/css/global.css

Other