khuedoan.com

This is the source code of my personal website at https://khuedoan.com, written in Rust using the Leptos framework, and styled with Tailwind CSS.

Project structure

• content/: content written in Markdown
• src/: pages and components, inspired by Next.js
• public/: static assets

Content convention

content
├── about.md
└── posts
    └── example-post.md
public
├── any-static-file-here.txt
└── images
    ├── avatar.jpg
    ├── cat-picture.jpg
    └── example-post-cover.png

Posts are placed in content/posts, each post is a Markdown file with a YAML front matter block. All images are automatically optimized at build time by resizing and converting to the more efficient WebP format (remember to update the image format in your content to .webp).

Here's an example post:

---
title: Example post
summary: This is an example post
date: 2023-01-01T00:00:00+07:00
cover: /images/example-post-cover.webp
tags:
  - foo
  - bar
---

## Example heading

![Files inside `./public` can be referenced by your code starting from the base URL](/images/cat-picture.webp)

Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Development

Open a shell that provides the build environment (requires Nix):

nix develop

Run the development server:

make dev

Then open http://localhost:3000.

Deployment

• Docker image: Dockerfile
• Pipelines: .woodpecker/
• Kubernetes configuration: see https://github.com/khuedoan/homelab/tree/master/apps/blog

Acknowledgements

• Leptos documentation: code examples
• leptos-rs/start-axum: code examples
• leptos-rs/leptos-website: code examples, Nix and Docker config
• Tailwind UI: styled components (highly recommended, but it is not free; you can get lifetime access for a one-time fee)
• Making a dev shell with nix flakes: Nix flake