Introduction

Over the past few weeks, I experimented with several web frameworks, including Next.js, Astro, and Svelte, in search of a suitable static site generator for my new blog.

In the end, SvelteKit turned out to be the best fit for my needs, mainly because it is virtual-DOM–free and delivers excellent performance.

However, building a Markdown-based blog with Svelte is not as straightforward as it seems.

While tools like MDSvex — commonly recommended in many online tutorials — make it easy to get started with the basics, they are not ideal in practice. Customization, page refinement, and implementing components such as CodeBlocks can be quite challenging.

In the future, I plan to publish a detailed tutorial on how to build a blog with Svelte.

Components List

At the moment, my blog is still empty, which makes it look rather dull. Below are some of the components I’ve implemented — feel free to take a look.

Image

Image from Bing search.

CodeBlock

It still looks ugly.

Taken from Lucide Slint

use cnxt::Colorize;

mod definition;
mod generate;
mod publish;

fn main() {
    let arg = std::env::args().nth(1);
    match arg {
        Some(ref s) if s == "generate" => {
            if let Err(e) = generate::run() {
                eprintln!("{}", e.to_string().red());
                std::process::exit(1);
            }
        }
        Some(ref s) if s == "publish" => {
            if let Err(e) = publish::run() {
                eprintln!("{}", e.to_string().red());
                std::process::exit(1);
            }
        }
        _ => {
            eprintln!("{}", "Usage: cargo run -- generate".red());
            eprintln!("{}", "       cargo run -- publish".red());
            std::process::exit(1);
        }
    }
}