Sundar's Notes

Building a website in Rust

5 min read

Rust Website

The goal is to build a website in Rust for hosting a simple blog/portfolio and later extend it to something like quartz 4. There are a few ways to do this. Mainly:

  1. Completely in Rust
  2. Rust + JS using tools like force-graph

Tool set

  • For the basic website, I am thinking of something like dioxus which is a react like framework for Rust. Even if it is a simple blog, it might be beneficial in building it in such a framework for extensibility and to add some dynamic components.
  • For parsing blog content in Markdown, there are packages such as comark and markdown-rs which parse common markdown and also GFM and additionally pandoc can be used to generate html static content through async or basic sys calls to get features like pandoc-filters.
  • For parsing .bib files, there exists a crate by typst called biblatex which can be used to add references or create my list of publications from a biblatex input.
  • There would need to be some JS integration anyway, mainly for blog tools such as plotly.js or mermaid.js however there might be some benefit in just using statically generated plots and charts instead to reduce client side load. Currently, Rust lacks good visualisation libraries to create my own tool for this.
  • Resume rendering needs to be achieved by reading .yaml files in RenderCV format or JSON files in JSONResume format or through a typst file. Since reading typst files is really easy as it follows a markdown like syntax, and there might be ways to use the existing typst stack to do it as it is written in rust. With this method the overall setup can generate both downloadable PDFs and also a web render of the CV.

Extensions

  • For Obsidian like force graphs for zettlekasten links, one choice is to build a simple force graph in Rust and render it with something like wgpu. The advantage of this method is that the integration of wgpu with dioxus can also be shipped as a desktop app if I feel like shipping the template as a reusable toolkit or website generator.
  • The website needs to be designed to get basic data from configuration files, either JSON or YAML or TOML. That is needed for extensibility to ship it as an independent site generator.

Plan

gantt
    title Rust Blog/Portfolio Project Plan
    dateFormat  YYYY-MM-DD
    section Core Setup
    Init Rust Project + Framework (Dioxus/Leptos) :done,    des1, 2025-09-01, 7d
    Basic Blog Rendering (Markdown parser)       :active,  des2, 2025-09-08, 14d
    Resume Rendering (Typst/JSONResume)          :         des3, 2025-09-22, 14d
    section Extensions
    Publications + BibTeX Integration            :         des4, 2025-10-06, 14d
    Static Plots & Charts (Rust/Pandoc)          :         des5, 2025-10-20, 10d
    Interactive Viz (Plotly.js / Mermaid.js)     :         des6, 2025-11-01, 14d
    section Knowledge Graph
    Force-Graph.js Integration                   :         des7, 2025-11-15, 14d
    Custom Rust/WGPU Graph (Stretch Goal)        :         des8, 2025-12-01, 21d
    section Packaging
    Config-Driven Site Generator (JSON/YAML/TOML):         des9, 2025-12-22, 21d
    Desktop App Packaging (Optional)             :         des10, 2026-01-12, 21d

Resources

Additional Resources

🖼️ Frontend Frameworks

  • Dioxus Documentation – Official docs for Dioxus, a React-like framework in Rust supporting web, desktop, and mobile targets.
  • Leptos Book – Learn concepts from the Leptos framework (signals, components, hydration), useful even if you stick with Dioxus.
  • Yew Documentation – Another popular Rust/WASM frontend framework with a strong ecosystem.

📝 Markdown & Content

  • Comrak Crate – CommonMark + GFM compliant Markdown parser for Rust.
  • pulldown-cmark – A fast, pull parser for CommonMark in Rust.
  • Pandoc Filters – Extend Pandoc’s conversions to handle references, citations, and custom elements.

📚 Citations & Publications

📊 Visualization & Interactivity

  • Plotly.js – Interactive charts, maps, and scientific visualizations for embedding in web apps.
  • Mermaid.js – Generate diagrams and flowcharts using Markdown-like syntax.
  • force-graph – Interactive 2D/3D force-directed graph visualization library (used for Obsidian-like maps).
  • Cytoscape.js – Rich graph visualization and analysis library.
  • wgpu – Low-level Rust GPU rendering library (WebGPU/WebGL/Vulkan).
  • nannou – Rust creative coding framework, useful for physics/particle-style graph layouts.
  • rapier – Rust physics engine for simulating particle/force-based interactions.

🌐 General Rust + WebAssembly

  • Rust Wasm Book – Learn how to compile Rust to WebAssembly and interop with JavaScript.
  • Trunk – Build tool for Rust/WebAssembly frontend projects.
  • wasm-bindgen – Bridge between Rust and JavaScript for calling libraries like Plotly/Mermaid.

📖 Blog/Website Inspiration

Graph View