Harness the power of Blazor to craft static websites.
Transform your Blazor app into a static site.
BlazorStatic aims to be intuitive and easy to use for most developers who have worked with any kind of front-end framework, especially if you already work with Blazor.
The site for BlazorStatic is a feature-rich example of the library. Check the source code.
Upon running your app, BlazorStatic fetches the pages' HTML with HttpClient, outputs HTML files and assets to the output folder, and from there you can deploy to any standard HTTP server or hosting service.
There are many defaults to keep usage simple, but you can configure it extensively. For example, you can match your YAML front matter in markdown files (which can be reused from other static site generators).
You can start using BlazorStatic in three ways, depending on your setup and intended use. You'll need .NET SDK 8 or higher to get started.
Install the BlazorStatic templates:
dotnet new install BlazorStatic.TemplatesThis adds new options to your dotnet new template list. Then create a new project using:
dotnet new BlazorStaticMinimalBlog -o MyBlazorStaticApp This creates a MyBlazorStaticApp folder and project. It's a standard .NET Blazor app with the BlazorStatic package installed, including a few predefined components, styles, and a blog post with example content.
Run the app using dotnet watch. This will launch the app, allowing you to view it live, while also generating static HTML files in the output folder.
From here, you're ready to explore the project, add content, create new pages, and more.
- Markdown files are located in the
Content/Blogfolder. - A
.gitignorefile is included with standard .NET recommendations and ignores theoutputfolder. - The template also includes a
.githubfolder with a GitHub action for building and deploying to GitHub Pages. See the Deploying section below. - You can customize anything. For further details, see this document, which explains everything in more depth.
Use BlazorStaticMinimalBlog as template (the big green button).
It will copy all the content and run the GitHub action for you. After it runs, go to settings and turn on GitHub pages:
Your page is ready now!
If you want to fully understand how BlazorStatic works or if you have an existing project where you'd like to integrate the BlazorStatic library, start from scratch. Check out this document for guidance.
- Leverage your existing Blazor experience.
- Easily parse and consume markdown files.
- Support for custom YAML front matters.
- Automatically discovers pages among Razor files.
- Ability to add/remove pages as needed.
- Works with all CSS frameworks and themes.
- Easy to deploy with CI/CD pipeline.
- Supports HotReload
- Has
dotnet newtemplate
You can deploy the output folder to any static hosting service, such as GitHub Pages, Netlify, Vercel, Azure Static Web Apps, etc.
Detailed instructions are here.
| Description | Source | Live |
|---|---|---|
| Page about BlazorStatic (this repo contains the code itself) | source | live |
| Minimal blog | source | live |
| Zodoc - image processing and deep learning sample | source | live |
| ❓ Add your page here!!! |
Contributions are highly encouraged and appreciated. If you find something missing, unclear, or encounter an issue with the code, I warmly welcome your input. Feel free to:
- Create a new issue or submit a PR.
- Contact me directly for any queries or suggestions.
- Ask questions or start a discussion on the Blazor Community Discord server.