I mainly use React at work, which I'm not a particularly big fan of for a multiude of reasons I won't go into much detail here. So, when choosing a stack to build my personal website in, React was out of the question. I wanted to try out Svelte because I have heard good things about it from my co-workers, but Svelte is still JavaScript frontend framework number #92321223.
So, after not so much consideration, I went with what I knew when I first started building websites, templating. But with a bit of a twist. I am learning Rust in pursuit of my goal to deepen my knowledge on systems engineering, so it seemed like a natural choice. As for why I chose Axum? ¯\_(ツ)_/¯. Reddit recommends it and it seemed simple enough. And it really is!
First, let's set up a basic Axum server. You'll need to add the following
dependencies to your Cargo.toml
file:
[dependencies] axum = "0.6" tokio = { version = "1", features = ["full"] } tower = "0.4"
Seems simple enough:
use axum::{Router, routing::get}; #[tokio::main] async fn main() { let app = Router::new() .route("/", get(root)) .route("/about", get(about)); let addr = "0.0.0.0:3000".parse().unwrap(); println!("listening on {}", addr); axum::Server::bind(&addr) .serve(app.into_make_service()) .await .unwrap(); } async fn root() -> &'static str { "Hello, World!" } async fn about() -> &'static str { "About page" }
To run your application, simply use
cargo run
in your terminal. The server will
start listening on port 3000.
For styling, I combined Tailwind CSS with the Gruvbox color scheme. I am basically obsessed with Gruvbox in general, I run it on everything, so it seemed natural to also use it for the personal website.
For templating, I chose Askama because it provides compile-time template checking. This means template errors are caught during compilation rather than at runtime:
use askama_axum::Template; #[derive(Template)] #[template(path = "index.html")] struct IndexTemplate { title: String, content: String, }
I plan to add some interactivity to the website besides the small dark/light mode toggle to test "frameworks" like HTMX. I've used it in another templating projects slightly, but I want to see how far a thing like HTMX could be pushed until one needs to crawl back in React's arm.
You can find the complete source code for this website on GitHub. Feel free to use it as inspiration for your own Rust web projects!