How to Create Your Own Portfolio Website in Minutes with GitHub Codespaces and Blazor

This post has been republished via RSS; it originally appeared at: New blog articles in Microsoft Community Hub.

Create, customize, and deploy your own portfolio website in minutes without installing any tools. All you need is a GitHub account and a few minutes to get started. We will use GitHub Codespaces and Blazor to build the website and Azure Static Web Apps or GitHub Pages to deploy it. 

 

You can find all these instructions and more in our GitHub Codespaces Repository.

 

 

GitHub Codespaces 

Now, with GitHub Codespaces you can create your own portfolio website in minutes without any extra tools or lengthy environment setup! All you need is a GitHub account. Follow these instructions to create your free GitHub account. 

 

GitHub Codespaces is a development environment that is hosted in the cloud. This means that you can get started coding right away in your browser – we set everything up for you ahead of time! You do not need to worry about setting up the right coding editor or tools.  

 

.NET Portfolio Site with GitHub Codespaces  

With the .NET Blazor Portfolio Site project template, all you need to do is launch your Codespace then follow the README instructions to customize your website. The goal is to give you a template you can immediately utilize to create your own website through GitHub Codespaces. 

 

This template shows you how to build your website using Blazor. Blazor is a UI Framework that lets you build frontend web applications with C#. The template is within the GitHub Student Developer pack, but anyone can access and use it! 

  • Who is this for? Anyone looking to create a portfolio site, learn web development, or test out Codespaces. 
  • How much experience do you need? Zero. You decide how much you want to customize based on your experience, and time available. 
  • Tools needed: None. No need to install anything! All you need is a GitHub account and web browser. 
  • Prerequisites: None. This template includes your development environment and deployable web app for you to create your own site. 

Get Started with the .NET Portfolio Website Template 

 Katie_Savage_3-1678812159346.png

  • Create a copy of the repository in your GitHub account. You can keep the repository name the same or change it if you would like.
  • At the top of the README, click on the Open in GitHub Codespaces buttonKatie_Savage_1-1678811758385.png
  • You should now be in a GitHub Codespace! Notice that it has the same layout as VS Code.

Katie_Savage_2-1678811758386.png

  • Follow the readme on how to run a simple command to start up your website. In your terminal, you will need to run swa start.

 

Congratulations! You just ran your portfolio website!!

 

Next Steps: Customize and Deploy 

From here, you can continue to follow the instructions in the README to customize your portfolio website and deploy it! 

 

This project is built to be easily customizable. Each section of the site is a separate component, and your information needs to be set in only one spot. For each step, open the project in Codespaces, then you can make and commit your changes while within your Codespaces.

See Using source control in your codespaces for more Codespaces source control how-tos

To deploy your website, you can use Azure Static Web Apps or GitHub Pages. The README includes instructions for both deployment options.

 

Learn More

Check out our learning resources and coding curriculums to take these learnings to the next level!

 

How to Create Your Own Portfolio Website in Minutes with GitHub Codespaces and BlazorHow to Create Your Own Portfolio Website in Minutes with GitHub Codespaces and Blazor

Leave a Reply

Your email address will not be published. Required fields are marked *

*

This site uses Akismet to reduce spam. Learn how your comment data is processed.