How To Build A Personal Website in Blazor: An ASP.NET Core Tutorial

Creating a personal website is a great project for beginners and experienced software engineers alike. Whether you want to showcase your skills, share your projects, or enhance your professional opportunities, having a personal website can be immensely beneficial. In this ASP.NET Core tutorial, we will explore how to build a personal website in Blazor, a powerful framework for creating web applications with the C# programming language.

Blazor combines the power of ASP.NET Core with the flexibility of web development, allowing you to create dynamic and interactive websites. Throughout this article, we will cover the basics of Blazor, demonstrate how to design and customize your website, add functionality with C# code, and deploy it to a hosting platform.

Let’s get started with building your own personal website in Blazor. You can leverage other Blazor tutorials as well to aid in your building!

Why Create a Personal Website?

Creating a personal website offers numerous advantages for individuals in the software development field, whether they are beginners or experienced professionals. Building your own personal website allows you to showcase your skills, projects, and accomplishments. It serves as a platform to highlight your expertise and attract potential employers or clients.

By having a personal website, you can establish an online presence and build your brand. You can share your knowledge through blog posts, tutorials, or demos, positioning yourself as an authority in the software engineering community. This visibility can lead to networking opportunities and collaborations with like-minded professionals. Moreover, a personal website offers a centralized hub where you can present your resume, portfolio, and contact information, making it easier for others to connect with you.

Overall, creating a personal website using ASP.NET Core Blazor not only allows you to demonstrate your technical skills but also provides a platform to showcase your creativity and professional accomplishments. Now let’s see how to build a personal website in Blazor!

Getting Started with ASP.NET Core Blazor

To embark on the journey of building your personal website, ASP.NET Core Blazor is an excellent framework to choose. Blazor is a modern web framework that utilizes C# and .NET to build interactive web applications. It combines the power of .NET with the flexibility of web development, enabling you to create dynamic and responsive websites.

Before diving into the development process, you need to set up your development environment. This involves installing the necessary tools, such as Visual Studio or Visual Studio Code, and the .NET Core SDK. Once your environment is prepared, you can create a new Blazor project.

Creating the Basic Structure

When starting with ASP.NET Core Blazor, it’s important to understand the project structure. A Blazor project contains various folders and files that organize the application’s components, pages, and shared resources.

To create a basic structure for your personal website, you’ll need to add pages and components. Pages represent individual sections or views of your website, while components provide reusable functionality and UI elements. Additionally, you’ll create the main layout, which defines the overall structure and design of your website.

Working with Data in Blazor

To make your personal website more dynamic, you can leverage data binding in Blazor. Data binding allows you to connect your website’s UI elements to data sources, such as APIs or databases. This enables you to fetch data and display it dynamically on your website. You can showcase your projects, blog posts, or any other relevant information by fetching and presenting the data in a user-friendly manner.

In Blazor, data binding is a technique that allows you to synchronize the properties of a component with the data model. This means that any changes made to the data model will be reflected in the component and vice versa. Here’s a simple example to illustrate the basics of data binding in Blazor:

1. Create a Data Model

First, let’s create a simple data model. In this example, we’ll create a model for a blog post:

public class BlogPost
    public string Title { get; set; }
    public string Content { get; set; }

2. Initialize the Data Model in a Component

Next, initialize the data model in a Blazor component. Here, we create an instance of BlogPost and initialize it with some data:

@page "/blog"

@code {
    private BlogPost post = new BlogPost
        Title = "Exploring Blazor",
        Content = "Blazor is a framework for building interactive web UIs using C# instead of JavaScript."

3. Bind the Data Model to the UI

Now, bind the properties of the BlogPost model to the UI elements in the component’s markup:


With these steps, you’ve created a simple example of data binding in Blazor. When you navigate to the /blog route in your Blazor app, you will see the blog post title and content displayed on the page.

Navigation and Routing

Navigation and routing are crucial aspects of any website, and Blazor provides robust capabilities in this area. Configuring routing in your Blazor application allows you to define the URLs and corresponding components for different pages or sections of your website. This enables users to navigate through your website seamlessly. You can create navigation menus, links, and handle routing events to enhance the user experience and provide smooth navigation between pages.

In Blazor, navigation and routing are facilitated through the Router component, which maps the requested URL to the corresponding Blazor component. Here’s a simple example to illustrate the basics of navigation and routing in Blazor:

1. Define the Route in a Component

First, define the route for a Blazor component using the @page directive. In this example, we’ll create a component for a Contact page:

@page "/contact"

<h3>Contact Me About My Portfolio</h3>
<p>Feel free to reach out to me at [email protected].</p>

2. Configure the Router

Next, configure the Router component in the App.razor file. The Router component will map the requested URLs to the corresponding Blazor components:

<Router AppAssembly="@typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="typeof(MainLayout)" />
        <LayoutView Layout="typeof(MainLayout)">
            <p>Sorry, there's nothing at this address.</p>

3. Create a Navigation Link

Now, create a navigation link to the Contact page in the NavMenu.razor component using the NavLink component:

<li class="nav-item px-3">
    <NavLink class="nav-link" href="contact">
        <span class="oi oi-list-rich" aria-hidden="true"></span> Contact

With these steps, you’ve set up basic navigation and routing in Blazor. When users click on the “Contact” link in the navigation menu, they will be navigated to the /contact route and see the page we created.

Designing Your Personal Website

When creating a personal website, design plays a crucial role in capturing the attention of visitors and providing a pleasant user experience. A visually appealing website can leave a lasting impression on your audience.

When designing your personal website using ASP.NET Core Blazor, it’s important to choose a responsive and user-friendly design that adapts well to different screen sizes and devices. This ensures that your website looks great on desktops, tablets, and mobile devices, providing a seamless browsing experience for your visitors.

To enhance the user interface (UI) of your Blazor website, you can utilize frameworks like Bootstrap. Bootstrap provides a collection of CSS classes and JavaScript components that aid in creating a professional and visually consistent design. You can easily integrate Bootstrap into your Blazor project to style your components and layout.

Customizing the UI with CSS and Blazor styles

To give your personal website a unique look, you can customize the UI by adding custom CSS styles to your Blazor components. This allows you to modify the appearance and layout of specific elements or create custom styles that align with your branding.

Additionally, Blazor provides its own styling mechanism called Blazor styles. With Blazor styles, you can define styles directly within your components using C# and HTML markup. This allows for a more modular approach to styling, making it easier to manage and maintain your website’s visual consistency.

Incorporating Images and Media

Incorporating images and multimedia content can greatly enhance the visual appeal and engagement of your personal website. Blazor provides various ways to work with images and media.

You can display images within your Blazor components using HTML’s <img> tag or the built-in img Blazor component. Blazor also supports optimizing images for web performance by allowing you to specify different sizes and formats based on the device accessing your website.

Additionally, Blazor provides media components, such as the <video> and <audio> tags, which allow you to embed and play multimedia content directly on your website. This is useful for showcasing videos, audio clips, or any other media that adds value to your personal website.

Remember, a well-designed personal website with appealing visuals and multimedia content can make a significant impact on your audience’s overall experience.

Deploying Your Personal Website

When you have completed building your personal website with Blazor, the next step is to deploy it and make it accessible to the world. Deploying a Blazor application involves preparing the application for deployment, selecting a hosting platform, and publishing the application.

Preparing the Application for Deployment

Before deploying your Blazor website, it is important to optimize and package the application for deployment. This includes optimizing the code and assets for performance, removing unnecessary dependencies, and ensuring that the application is secure. You can use tools like bundlers and minifiers to reduce the size of the files and improve the loading time of your website.

Choosing a Hosting Platform

There are several hosting platforms available for hosting your Blazor website. You can choose between cloud-based platforms like Microsoft Azure, Amazon Web Services (AWS), or Google Cloud Platform (GCP). These platforms provide scalable infrastructure and deployment options specifically designed for hosting web applications. Alternatively, you can also opt for traditional web hosting providers that support ASP.NET Core applications.

If you’re looking for super low-cost options for low-resource use cases, I really like using RackNerd. At the time of writing this, I have over 35 VPSs with RackNerd because they’re so cheap and my resource requirements are low. Full disclaimer that my links to RackNerd are affiliate links, so if you end up using them I’ll get some kickback. But I only promote things that I use personally.

Publishing the Blazor Application

Publishing a Blazor application involves packaging the application and its dependencies into a deployable package and then deploying it to the chosen hosting platform. This process can be performed using tools like Visual Studio, command-line utilities, or CI/CD pipelines. The hosting platform’s documentation will provide detailed instructions on how to publish your Blazor application to the specific platform.

By following these steps, you can successfully deploy your personal website built with Blazor and make it accessible to users on the internet.

Remember that deploying a website involves considerations such as security, scalability, and performance to ensure a smooth user experience. It’s essential to regularly update and maintain your website to protect against potential security vulnerabilities and provide the best possible experience for your visitors.

Wrapping Up How to Build a Personal Website in Blazor

Building a personal website using ASP.NET Core Blazor is a great project that even beginners can try out. Throughout this tutorial, we have explored the process of creating a personal website step by step, highlighting the benefits of using Blazor for development. Now you know how to build a personal website in Blazor!

We discussed the advantages of having a personal website, such as showcasing skills and projects, building an online presence, and enhancing professional opportunities. Additionally, we explored the capabilities of Blazor, including its framework and key features, as well as setting up the development environment and creating a new Blazor project.

We also covered various aspects of personal website development, such as designing the website with a visually appealing and user-friendly interface, customizing the UI using CSS and Blazor styles, and incorporating images and media elements. We also delved into adding functionality to the website through C# code, exploring Blazor components and Razor syntax.

By following this tutorial, you can gain valuable hands-on experience with Blazor and create your own personal website. I encourage you to subscribe to Dev Leader Weekly, my weekly newsletter, and Dev Leader on YouTube for more software engineering and C# tips. Start building your personal website in Blazor today and unlock new opportunities!


These are products & services that I trust, use, and love. I get a kickback if you decide to use my links. There’s no pressure, but I only promote things that I like to use!

      • RackNerd: Cheap VPS hosting options that I love for low-resource usage!
      • Contabo: Alternative VPS hosting options with very affordable prices!
      • ConvertKit: This is the platform that I use for my newsletter!
      • SparkLoop: This service helps me add different value to my newsletter!
      • Opus Clip: This is what I use for help creating my short-form videos!
      • Newegg: For all sorts of computer components!
      • Bulk Supplements: For an enormous selection of health supplements!
      • Quora: I try to answer questions on Quora when folks request them of me!

    author avatar
    Nick Cosentino Principal Software Engineering Manager
    Principal Software Engineering Manager at Microsoft. Views are my own.

    This Post Has 4 Comments

    1. Luke Speers

      I love this personal website tutorial a lot. I have also enjoyed tindering with side projects using blazor/razor but I have not found an affordable hosting solution while I’m tinkering and workshopping ideas.

      Is there any hosting solutions for .net solutions that don’t break the bank? I want it to be cloud accessable but scared myself by racking up a $400 Azure charge in 1-2 months (with the wrong configuration). Luckly they cancelled the charge but I still couldn’t figure it out for a reasonable charge. Like $5 a month.. is that too cheap to ask? $10 max?? What is an acceptable amount to pay for hosting?.. too many questions sorry!

      Keep up the great work!

      1. Nick Cosentino

        Hey Luke! First of all, thanks so much for the kind words 🙂

        I have an affiliate link for RackNerd, which I REALLY like using for low-cost VPS options:

        I work at Microsoft, so… Yes, Azure makes sense for me to use. I use AWS as well… But I have over 35 VPS’s with RackNerd because they have such cheap Linux hosting options if you just need something very low for resources. Definitely some things there for only a few bucks a month!

        I’ll probably put together a dedicated article for this, but you can essentially get a Linux VPS through RackNerd, and then using docker (or whatever you want, really) run your dotnet services on the VPS. You won’t get all of the fancy Azure/AWS additional services integrated, but if you just want a low cost option… they’re awesome!

        Again, that affiliate link does earn me some commission, but I don’t promote things unless I use them myself. 35+ VPS’s is hopefully an indicator that I like these guys 🙂

    2. Craig

      What does your ci/cd pipeline look like with regards to deploying to racknerd? I’d be interested in getting something spun up and use them.
      Also I like the idea of creating a blog as well so thank you for the inspiration.
      I do have a question regarding how one would go about structuring the content in sections. Like headers, code snippets etc.

      1. Nick Cosentino

        Hey Craig – Thanks for stopping in and I’m glad you enjoyed this! I totally recommend it as a project to jump into (even if you don’t decide to go with RackNerd).

        For your first question – I don’t yet have any of my RackNerd VPS instances set up with CI/CD. They’re running some specialty software that requires low resources but dedicated compute instances. My other projects are in Azure and AWS strictly because I have requirements of low latency to access my database (so being all in one environment makes that way easier).

        I should put a tutorial together showing how it could work with github + RackNerd so there’s a super cost effective way to host and deploy. But until I have that written up, because I am currently working through creating a course, I think you’ll just want to look through generic SSH and docker commands. If you can SSH into your VPS from your pipeline, you can either FTP the files over (or download your image from another location) and then tell docker to teardown/standup your instance. It’d be a pretty naive approach without any load balancing or anything but… probably perfectly fine for this kind of thing.

        As for your last question there about the content – I might not fully understand it. Do you mean how you would organize blog posts if you have code to share? If so, I do a few things:
        – Host full solutions in GitHub
        – Use DotNetFiddle for sharing snippets for folks to run
        – Copy + paste smaller relevant portions into the article itself

        Hope that helps, but please feel free to ask for more clarification!

    Leave a Reply