Jump to content

Recommended Posts

  • FPCH Admin
Posted

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

 

 

medium?v=v2&px=400.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 buttonmedium?v=v2&px=400.png
  • You should now be in a GitHub Codespace! Notice that it has the same layout as VS Code.

 

medium?v=v2&px=400.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!

 

 

 

 

medium?v=v2&px=400.jpgHow to Create Your Own Portfolio Website in Minutes with GitHub Codespaces and Blazor

 

Continue reading...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...