Introduce My Blog

2024-07-01
473

https://unsplash.com/photos/a-close-up-of-a-red-fox-with-its-eyes-closed-yhfvUbgKyYc

This blog has undergone several code refactorings and platform migrations. I recently released a new version built with Rust, and I plan to maintain it consistently over time. In this post, I will outline the technology stack I used and the future roadmap for the blog.

Introduction

In 2020, I registered this domain and initially set up my blog using Hexo, but I soon switched to Hugo because I preferred using Go over Node.js. Although Hexo and Hugo offered open-source themes, I wasn’t completely satisfied with them. As a result, I decided to switch to Next.js and MDX, and created a customized blog that fit my preferences.

In recent years, Next.js has become increasingly complex and bloated, so my interest in using it has waned. Looking for alternatives, I researched Remix and Nuxt. After weighing the options, I finally chose Nuxt because of its good project structure and out-of-the-box Nuxt Content module. Thanks to the ease of use of Nuxt, I was able to implement most of the blog’s features in just one day.

However, I soon realized that being too simple also meant losing the fun of building the blog itself. So I decided to build my blog using Rust starting with HTTP requests.

Technology Stack

Backend

When I started building the backend, I planned to turn it into a full-fledged Content Management System (CMS) in the future. Therefore, I didn’t just generate static pages as I have done in the past.

Here are some crates I have chosen.

  • axum. I need a web framework to handle HTTP requests. Since I’m using tokio as my asynchronous runtime, I believe that axum from the tokio team is the best choice. Thanks to its extractor design, I don’t have to manually bind query parameters and request bodies at the beginning of each route function, as I do with Go’s web frameworks.
  • pulldown-cmark. This is the most popular Markdown parser on lib.rs. Right now I’m only using its basic functionality, and I’ll be editing the AST directly afterward, so I’m still researching comrak for comparison purposes.
  • minijinja. Most of the template rendering engines in the Rust ecosystem are based on Jinja2 syntax. The author of minijinja is the same person as the author of Jinja, so I can’t think of any reason to choose another crate.
  • sqlx. I prefer to write raw SQL rather than using ORM, so I opted for this library.

Frontend

I inherited the structure from the previous Nuxt project.

├── assets
├── components
├── layouts
├── pages
├── public
...
└── config.toml

And I used the same design of theme templates as Hexo and Hugo. The data required by different theme templates can be configured in the config.toml file located in the root directory.

[profile]
name = "KallyDev"
avatar = "/public/avatar.png"
description = "A Rust, Go, Web3 technology blog."
...

[[profile.contacts]]
platform = "github"
url = "https://github.com/kallydev"
...

Layout templates for the project are located in the layouts directory. I utilize block and include statements to embed components and CSS in the default template default.html.jinja2.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="color-scheme" content="light dark"/>
    <title>{% block title %}{% endblock %}</title>
    ...
    <style>{% include "assets/styles/base.css" %}</style>
    <style>{% include "assets/styles/tailwind.css" %}</style>
</head>
<body class="bg-white dark:bg-black">
{% include "components/layouts/header.html.jinja2" %}
{% block main %}{% endblock %}
{% include "components/layouts/footer.html.jinja2" %}
</body>
</html>

The theme template is primarily styled using Tailwind CSS. Although this introduces a large node_modules directory, the development efficiency that Tailwind CSS brings is worth it. Additionally, I utilized highlight.js for code syntax highlighting and KaTex for rendering math formulas in my posts.

\frac{\sin x}{n} = six = 6

Infrastructure

I intentionally selected cloud services with restricted hardware configurations, not only to cut costs but also to focus on resource utilization. As CPU and RAM are becoming more affordable, many developers have overlooked this aspect, but I hope I don’t fall into this trend.

Currently, I host my blog backend on a DigitalOcean Droplet with just 1 vCPU and 512 MB RAM. I plan to migrate it to Fly’s lowest-paid plan in the future, which will reduce the virtual machine’s RAM to 256 MB. However, I haven’t had enough time to configure a CI to separate the frontend and backend deployment processes on Fly yet.

The blog’s database is provided for free by Supabase with 2 shared CPU cores and 1 GB RAM. Images in all posts are stored for free in CloudFlare R2 and are reverse proxied through the blog backend.


Intention

I mostly gain new knowledge from YouTube channels, Hacker News, and various blogs. After being inspired by some talented YouTubers, I once considered creating technical videos. However, upon further consideration, I realized that writing scripts, producing animations, recording, and adding subtitles for videos requires a substantial amount of effort. In contrast, writing a technical post on the same topic is much easier for me.

Although I haven’t written a blog for a while, as I subscribe to more and more interesting ones, they inspired me to get back into the habit of blogging.

Roadmap

This blog primarily focuses on technical topics related to Rust, Go, and Web3. Occasionally, I also share posts about my personal life and thoughts.

I won’t be publishing technical posts regularly, but I aim to write at least one post every month. Additionally, I will post a weekly report every Sunday to summarize the technical posts I’ve read, the videos I’ve watched, and any feature updates to the blog. At the end of each month, I will post a monthly report documenting my life, including travels and events I’ve attended.


This blog is currently under development. Please report any issues so I can fix them quickly.

By the way, the blog’s RSS feed is now available.