Awesome
khuedoan.com ![status](https://img.shields.io/website?label=status&style=flat-square&url=https%3A%2F%2Fkhuedoan.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 Markdownsrc/
: pages and components, inspired by Next.jspublic/
: 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