How to Build Portfolio Website And Host It on GitHub Pages?

Last Updated : 22 May, 2024

Having an online portfolio is important for showcasing your skills and accomplishments. GitHub Pages provides a convenient and free platform for hosting your portfolio website. In this article, we will see how to build a Portfolio Website And Host It on GitHub Pages.

Table of Content

Creating a Portfolio Website

We will be using Simple HTML, CSS and JavaScript to create a beautiful portfolio website.

Portfolio Preview

How to Build Portfolio Website And Host It on GitHub Pages?

Approach

The below defined steps can be utilised to build and design a portfolio website:

In the first step, we will create a folder with the project name and create the HTML, CSS, JavaScript files, Images folder and a separate file for the responsive CSS if required.
Now, use the different HTML tags like section, header, nav, meta, title, head, div, input, img etc to structure the web page.
Style the different components and the elements of HTML responsively to make the page attractive for every device using CSS.
Make use of the media queries to define the responsive styles and to adjust the width of the containers.
Use JavaScript to toggle the on click to the hamburger menu for small width devices to navigate through the page.

Example: The below example will explain you how to design and build a portfolio website using HTML, CSS, and JavaScript responsively for every device:

HTML

<!--index.html-->  <!DOCTYPE html>  <html lang="en">   <head>  	<meta charset="UTF-8">  	<meta name="viewport" 		content="width=device-width, initial-scale=1.0">  	<title>My Portfolio</title>  	<link rel="stylesheet" 		href=  "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" 		integrity=  "sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" 			crossorigin="anonymous" referrerpolicy="no-referrer" />  	<link rel="stylesheet" href="style.css">  	<link rel="stylesheet" href="responsive.css">  </head>   <body>  	<!-- Navbar header section --> 	<header class="header">  		<nav class="navbar">  			<div class="logo">  				<h2 class="logo-heading">Emrit Diyal</h2>  			</div>  			<div class="hamburger" id="hamburger">  				<i class="fas fa-bars hamburger-icon"></i>  				<i class="fas fa-times cross-icon"></i>  			</div>  			<div class="menu">  				<ul class="menu-list">  					<li class="menu-list-items">  						<a class="links" href="#home">  							Home  						</a>  					</li>  					<li class="menu-list-items">  						<a class="links" href="#portfolio">  							Portfolio  						</a>  					</li>  					<li class="menu-list-items">  						<a class="links" href="#about">  							About  						</a>  					</li>  					<li class="menu-list-items">  						<a class="links" href="#services">  							Services  						</a>  					</li>  					<li class="menu-list-items">  						<a class="links" href="#contact">  							Contact Me  						</a>  					</li>  				</ul>  			</div>  		</nav>  	</header>   	<!-- Main hero banner --> 	<section id="home" class="hero">  		<div class="intro">  			<div class="headings">  				<h3 class="greet-heading">Hello, I'm</h3>  				<h1 class="my-heading">Emrit Diyal</h1>  				<h4 class="sub-heading">  					A Software Engineer with 3 years of Experience.  				</h4>  			</div>  			<div class="intro-buttons">  				<button class="btn common-btn">Hire Me</button>  				<button class="btn ghost-btn">Get Resume</button>  			</div>  		</div>  	</section>   	<!-- Portfolio Section --> 	<section class="portfolio" id="portfolio">  		<div class="portfolio-heading">  			<h1 class="my-heading text-center">Featured Portfolio</h1>  		</div>  		<div class="portfolio-content">  			<div class="my-row">  				<div class="my-col">  					<div class="my-card port-card">  						<div class="image">  							<img src="./Images/designImage2.avif" 								alt="Web Design Image">  						</div>  						<h3 class="greet-heading blue-text">Web Design</h3>  						<p class="small-para blue-text">Designing</p>  					</div>  				</div>  				<div class="my-col">  					<div class="my-card port-card">  						<div class="image">  							<img src="./Images/webDevelopment2.avif" 								alt="Web Development Image">  						</div>  						<h3 class="greet-heading blue-text">  							Web Development  						</h3>  						<p class="small-para blue-text">Development</p>  					</div>  				</div>  				<div class="my-col">  					<div class="my-card port-card">  						<div class="image">  							<img src="./Images/SEOImage2.avif" alt="SEO Image">  						</div>  						<h3 class="greet-heading blue-text">SEO</h3>  						<p class="small-para blue-text">Optimization</p>  					</div>  				</div>  			</div>  			<div class="my-row">  				<div class="my-col">  					<div class="my-card port-card">  						<div class="image">  							<img src="./Images/contentImage2.avif" 								alt="Content Writting Image">  						</div>  						<h3 class="greet-heading blue-text">  							Content Writing  						</h3>  						<p class="small-para blue-text">Writing</p>  					</div>  				</div>  				<div class="my-col">  					<div class="my-card port-card">  						<div class="image">  							<img src="./Images/wordpressImage2.avif" 								alt="Wordpress Image">  						</div>  						<h3 class="greet-heading blue-text">  							WordPress Dev  						</h3>  						<p class="small-para blue-text">  							Content Management System  						</p>  					</div>  				</div>  				<div class="my-col">  					<div class="my-card port-card">  						<div class="image">  							<img src="./Images/videoEditing2.avif" 								alt="Video Editing Image">  						</div>  						<h3 class="greet-heading blue-text">  							Video Editing  						</h3>  						<p class="small-para blue-text">Editing</p>  					</div>  				</div>  			</div>  		</div>  	</section>   	<!-- About Section --> 	<section id="about" class="about">  		<div class="about-text">  			<h1 class="my-heading">About Me</h1>  			<p class="lead-para">  				GeeksforGeeks is a leading platform  				that provides computer science  				resources and coding challenges for  				programmers and technology  				enthusiasts, along with interview  				and exam preparations for upcoming  				aspirants. With a strong emphasis on  				enhancing coding skills and knowledge,  				it has become a trusted destination  				for over 12 million plus registered  				users worldwide. The platform offers  				a vast collection of tutorials, practice  				problems, interview tutorials, articles,  				and courses, covering various domains  				of computer science.  			</p>  			<p>  				Our exceptional mentors hailing from top  				colleges & organizations have the  				ability to guide you on a journey from  				the humble beginnings of coding to  				the pinnacle of expertise. Under their  				guidance watch your skills flourish  				as we lay the foundation and help you  				conquer the world of coding.  			</p>  		</div>  		<div class="about-image">  			<img src="./Images/heroImg2.avif" alt="About Image">  		</div>  	</section>   	<!-- Services Section --> 	<section class="services" id="services">  		<div class="services-heading">  			<h1 class="my-heading text-center">My Services</h1>  		</div>  		<div class="services-content">  			<div class="my-row">  				<div class="my-col">  					<div class="my-card">  						<div class="icon">  							<i class="fas fa-paint-brush"></i>  						</div>  						<h3 class="greet-heading blue-text">Web Design</h3>  						<p class="small-para">  							Web development refers to the creating,  							building, and maintaining  							of websites. It includes aspects such as  							web design, web publishing,  							web programming, and database management.  							It is the creation of an  							application that works over the internet  							i.e. websites.  						</p>  						<p class="small-para">  							Web development refers to the creating,  							building, and maintaining  							of websites. It includes aspects such as  							web design, web publishing,  							web programming, and database management.  							It is the creation of an  							application that works over the internet  							i.e. websites.  						</p>  					</div>  				</div>  				<div class="my-col">  					<div class="my-card">  						<div class="icon">  							<i class="fa-solid fa-code"></i>  						</div>  						<h3 class="greet-heading blue-text">  							Web Development  						</h3>  						<p class="small-para">  							Web development refers to the creating,  							building, and maintaining  							of websites. It includes aspects such as  							web design, web publishing,  							web programming, and database management.  							It is the creation of an  							application that works over the internet  							i.e. websites.  						</p>  						<p class="small-para">  							Web development refers to the creating,  							building, and maintaining  							of websites. It includes aspects such as  							web design, web publishing,  							web programming, and database management.  							It is the creation of an  							application that works over the internet  							i.e. websites.  						</p>  					</div>  				</div>  				<div class="my-col">  					<div class="my-card">  						<div class="icon">  							<i class="fas fa-chart-line"></i>  						</div>  						<h3 class="greet-heading blue-text">SEO</h3>  						<p class="small-para">  							Web development refers to the creating,  							building, and maintaining  							of websites. It includes aspects such as  							web design, web publishing,  							web programming, and database management.  							It is the creation of an  							application that works over the internet  							i.e. websites.  						</p>  						<p class="small-para">  							Web development refers to the creating,  							building, and maintaining  							of websites. It includes aspects such as  							web design, web publishing,  							web programming, and database management.  							It is the creation of an  							application that works over the internet  							i.e. websites.  						</p>  					</div>  				</div>  			</div>  			<div class="my-row">  				<div class="my-col">  					<div class="my-card">  						<div class="icon">  							<i class="fas fa-quote-left"></i>  						</div>  						<h3 class="greet-heading blue-text">  							Content Writting  						</h3>  						<p class="small-para">  							Web development refers to the creating,  							building, and maintaining of websites.  							It includes aspects such as web design,  							web publishing, web programming, and  							database management. It is the creation  							of an application that works over the  							internet i.e. websites.  						</p>  						<p class="small-para">  							Web development refers to the creating,  							building, and maintaining of websites.  							It includes aspects such as web design,  							web publishing, web programming, and  							database management. It is the creation of an  							application that works over the internet i.e.  							websites.  						</p>  					</div>  				</div>  				<div class="my-col">  					<div class="my-card">  						<div class="icon">  							<i class="fab fa-wordpress-simple"></i>  						</div>  						<h3 class="greet-heading blue-text">  							WordPress Dev  						</h3>  						<p class="small-para">  							Web development refers to the creating,  							building, and maintaining of websites.  							It includes aspects such as web design,  							web publishing, web programming, and  							database management. It is the creation  							of an application that works over the  							internet i.e. websites.  						</p>  						<p class="small-para">  							Web development refers to the creating,  							building, and maintaining  							of websites. It includes aspects such as  							web design, web publishing,  							web programming, and database management.  							It is the creation of an  							application that works over the internet  							i.e. websites.  						</p>  					</div>  				</div>  				<div class="my-col">  					<div class="my-card">  						<div class="icon">  							<i class="fas fa-video"></i>  						</div>  						<h3 class="greet-heading blue-text">  							Video Editing  						</h3>  						<p class="small-para">  							Web development refers to the creating,  							building, and maintaining  							of websites. It includes aspects such as  							web design, web publishing,  							web programming, and database management.  							It is the creation of an  							application that works over the internet  							i.e. websites.  						</p>  						<p class="small-para">  							Web development refers to the creating,  							building, and maintaining  							of websites. It includes aspects such as  							web design, web publishing,  							web programming, and database management.  							It is the creation of an  							application that works over the internet  							i.e. websites.  						</p>  					</div>  				</div>  			</div>  		</div>  	</section>   	<!-- Contact me section --> 	<section class="contact" id="contact">  		<div class="contact-heading">  			<h1 class="my-heading text-center">Contact Me</h1>  		</div>  		<div class="contact-content">  			<div class="contact-form-container">  				<h1 class="greet-heading">Get In Touch</h1>  				<form class="contact-form">  					<input class="form-controls" type="text" 						placeholder="Your Name">  					<input class="form-controls" type="text" 						placeholder="Your Email">  					<input class="form-controls" type="text" 						placeholder="Your Phone">  					<textarea class="form-controls" 							placeholder="Write your message" 							name="message" id="" cols="30" 							rows="10">  					</textarea>  					<input class="form-btn btn common-btn" 						type="submit" value="Send Message">  				</form>  			</div>  			<div class="contact-details">  				<h1 class="greet-heading">My Contact Details</h1>  				<div class="details">  					<h5 class="contact-heading">EMAIL</h5>  					<p class="contact-text">[email protected]</p>  				</div>  				<div class="details">  					<h5 class="contact-heading">PHONE</h5>  					<p class="contact-text">+91 0123456789</p>  				</div>  				<div class="details">  					<h5 class="contact-heading">FAX</h5>  					<p class="contact-text">+91 0123456789</p>  				</div>  				<div class="details">  					<h5 class="contact-heading">ADDRESS</h5>  					<p class="contact-text">San Francisco, CA</p>  					<p>4th Floor8 Lower</p>  					<p>San Francisco street, M1 50F</p>  				</div>  			</div>  		</div>  	</section>   	<!-- Footer section --> 	<footer class="footer">  		<div class="footer-content text-center">  			<h4>  				Copyright © 2023 All rights reserved |  				This portfolio website template is created  				by GeeksforGeeks.  			</h4>  			<div class="social-links">  				<div class="footer-menu">  					<ul class="footer-menu-list">  						<li class="footer-list-items">  							<a class="footer-links" href="#">  								<i class="fab fa-facebook-f"></i>  							</a>  						</li>  						<li class="footer-list-items">  							<a class="footer-links" href="#">  								<i class="fab fa-twitter"></i>  							</a>  						</li>  						<li class="footer-list-items">  							<a class="footer-links" href="#">  								<i class="fab fa-instagram"></i>  							</a>  						</li>  						<li class="footer-list-items">  							<a class="footer-links" href="#">  								<i class="fab fa-linkedin-in"></i>  							</a>  						</li>  					</ul>  				</div>  			</div>  		</div>  	</footer>   	<script src=  "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/js/all.min.js" 		integrity=  "sha512-uKQ39gEGiyUJl4AI6L+ekBdGKpGw4xJ55+xyJG7YFlJokPNYegn9KwQ3P8A7aFQAUtUsAQHep+d/lrGqrbPIDQ==" 		crossorigin="anonymous" referrerpolicy="no-referrer">  	</script>  	<script src="script.js"></script>  </body>   </html>

CSS

/*index.css*/ /* Styles defined for the desktop or the bigger screen devices*/ @import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');   body {  	margin: 0;  	padding: 0;  	box-sizing: border-box;  	font-family: 'Poppins', sans-serif;  }   /* Header Navbar Styles */ .navbar {  	display: flex;  	align-items: center;  	justify-content: space-between;  	position: fixed;  	top: 0;  	width: 100%;  	background-image: linear-gradient(90deg, #74D7BB, #53C8B6, #35A99C);  	background-color: transparent;  }   .logo {  	padding: 0 5rem;  }   .logo .logo-heading {  	color: #fff;  }   .menu {  	padding: 0 5rem;  }   .hamburger {  	display: none;  	color: #fff;  	font-size: 25px;  }   .cross-icon {  	display: none;  }   .menu .menu-list {  	display: flex;  	list-style: none;  }   .menu-list .menu-list-items {  	padding: 0.5rem 1rem;  }   @media screen and (min-width: 856px) and (max-width: 1024px) {  	.menu-list .menu-list-items {  		padding: 0.5rem 0.3rem;  	}  }   /* Main Hero Section Styles */ .hero {  	background-image: url('./Images/heroImg3.avif');  	background-repeat: no-repeat;  	background-size: 100% 100%;  	width: 100%;  	height: 100vh;  	display: flex;  	align-items: center;  	justify-content: start;  	margin: 4.8rem 0;  }   .hero .intro {  	text-align: center;  	margin: 0 5rem;  }   .hero .intro-buttons {  	margin: 2rem 0;  	display: flex;  	align-items: center;  	justify-content: space-evenly;  }   /* About section styles */ .about {  	display: flex;  	align-items: center;  	background-image: linear-gradient(45deg, #363D73, #2794B3);  	justify-content: space-between;  	width: 100%;  }   .about .about-text {  	width: 450px;  	color: #fff;  	padding: 5rem 1rem 5rem 5rem;  }   .about .about-image img {  	height: 400px;  	width: 450px;  	padding: 5rem 5rem 5rem 1rem;  }   /* Portfolio section styles */ .portfolio {  	margin: 4.8rem 0;  	padding: 0 5rem;  }   .port-card {  	padding: 0 !important;  	background: none !important;  	border: 2px solid #000;  }   .port-card .image {  	width: 100%;  }   .port-card .image img {  	height: 200px;  	width: 100%;  	border-top-right-radius: 20px;  	border-top-left-radius: 20px;  }   /* Services section styles */ .services {  	display: flex;  	align-items: center;  	justify-content: center;  	flex-direction: column;  	margin: 4.8rem 0;  	padding: 0 5rem;  }   .my-row {  	display: flex;  	align-items: center;  	justify-content: space-between;  	margin: 2rem 0;  }   .my-row .my-col {  	text-align: center;  	width: 30%;  }   .my-card {  	text-align: center;  	display: flex;  	flex-direction: column;  	align-items: center;  	justify-content: center;  	border-radius: 20px;  	background-image: linear-gradient(#74D7BB, #53C8B6, #35A99C);  	padding: 1rem;  }   .icon {  	height: 100px;  	width: 100px;  	border-radius: 50%;  	background-color: #363D73;  	display: flex;  	align-items: center;  	justify-content: center;  }   .icon svg {  	font-size: 30px;  	color: #fff;  }   /* Contact section styles */ .contact {  	padding: 0 5rem;  }   .contact-content {  	display: flex;  	margin: 3rem 0;  	justify-content: space-between;  }   .contact-form-container {  	width: 50%;  }   .contact-form {  	display: flex;  	flex-direction: column;  }   .contact-form .form-controls {  	width: 80%;  	padding: 10px 0;  	margin: 1.67rem 0;  }   .contact-form .form-btn {  	width: 83%;  }   .contact-details {  	width: 50%;  }   /* Footer Styles */ .footer {  	background-color: #000;  	color: #fff;  	padding: 2rem;  }   .footer-list-items {  	display: flex;  	align-items: center;  	justify-content: center;  	height: 50px;  	width: 50px;  	margin: 1rem 1rem 0 1rem;  	border-radius: 50%;  	background-color: #53C8B6;  }   .footer-links {  	font-size: 24px;  	color: #fff;  	text-decoration: none;  }   .social-links {  	display: flex;  	align-items: center;  	justify-content: center;  }   .footer-menu {  	padding: 0 5rem;  }   .footer-menu .footer-menu-list {  	display: flex;  	list-style: none;  }        /* utility classes */ .greet-heading {  	font-size: 1.3rem;  	font-weight: lighter;  	margin: 0;  	letter-spacing: 1px;  }   .my-heading {  	font-size: 2.5rem;  	margin: 0;  }   .sub-heading {  	margin: 0;  	font-size: 0.8rem;  	color: #ccc;  	font-weight: lighter;  }   .links:hover {  	border-bottom: 2px solid #fff;  }   .links {  	border-bottom: 2px solid transparent;  	transition: all 0.25s;  	padding: 5px;  	text-decoration: none;  	color: #fff;  }   .btn {  	padding: 10px 20px;  	border-radius: 5px;  	cursor: pointer;  	letter-spacing: 1px;  	border: none;  }   .common-btn {  	background-color: #35A99C;  	color: #fff;  	border: 2px solid #35A99C;  	transition: all 0.25s;  }   .common-btn:hover {  	background-color: #fff;  	color: #35A99C;  	border: 2px solid #35A99C;  	outline: none;  }   .ghost-btn {  	background-color: #fff;  	color: #35A99C;  	border: 2px solid #35A99C;  	outline: none;  }   .ghost-btn:hover {  	background-color: #35A99C;  	color: #fff;  	transition: all 0.25s;  	border: 2px solid #35A99C;  }   .heading-span {  	font-weight: bolder;  }   .text-center {  	text-align: center;  }   .small-para {  	font-size: 14px;  	color: #fff;  }   .white-text {  	color: #fff;  }   .blue-text {  	color: #363D73;  }

CSS

/*index.css*/ /* Responsive CSS file styles defined for smaller width devices */ /* CSS for tablet devices */ @media screen and (min-width: 576px) and (max-width: 820px) {  	.logo {  		padding: 0 3rem;  	}   	.hamburger {  		display: block;  		padding: 0 3rem;  	}   	.menu {  		position: absolute;  		right: 0;  		padding: 0 3rem;  		top: 75px;  		background-image: linear-gradient(180deg, #74D7BB, #53C8B6, #35A99C);  		display: none;  		transition: all 0.25s;  	}   	.menu .menu-list {  		flex-direction: column;  	}   	.portfolio {  		padding: 0;  	}   	.about {  		flex-direction: column;  	}   	.about .about-text {  		padding: 2rem;  	}   	.about .about-image img {  		padding: 2rem;  	}   	.services {  		padding: 0;  	}   	.my-row {  		gap: 10px;  	}   	.my-row .my-col {  		text-align: center;  		width: 35%;  	}   }    /* CSS for mobile devices */ @media screen and (min-width: 280px) and (max-width: 576px) {  	.hero {  		justify-content: center;  		color: #fff;  		background-image: radial-gradient(circle, rgb(15 14 14 / 30%),           rgb(102 96 96 / 40%), rgb(163 160 160 / 16%)), url('./Images/heroImg3.avif')  	}   	.sub-heading {  		color: #fff9f9cc;  	}   	.hero .intro-buttons {  		gap: 20px;  	}   	.btn {  		padding: 10px 30px;  	}   	.logo {  		padding: 0 2rem;  	}   	.menu {  		position: absolute;  		right: 0;  		padding: 0 2rem;  		top: 75px;  		background-image: linear-gradient(180deg, #35A99C, #53C8B6, #74D7BB);  		display: none;  		transition: all 0.25s;  	}   	.menu .menu-list {  		flex-direction: column;  	}   	.hamburger {  		display: block;  		padding: 0 2rem;  	}   	.portfolio {  		padding: 0;  	}   	.about {  		flex-direction: column;  	}   	.about .about-text {  		width: 90%;  		padding: 1rem;  	}   	.about .about-image img {  		width: 90%;  		padding: 1rem;  	}   	.services {  		padding: 0;  	}   	.my-row {  		display: flex;  		align-items: center;  		justify-content: space-between;  		flex-direction: column;  		margin: 2rem 0;  		gap: 1rem;  	}   	.my-row .my-col {  		text-align: center;  		width: 100%;  	}   	.contact {  		padding: 0;  	}   	.contact-content {  		flex-direction: column;  		align-items: center;  		gap: 2rem;  	}   	.contact-form-container {  		width: 80%;  	}   	.contact-form .form-controls {  		width: 100%;  	}   	.contact-form .form-btn {  		width: 100%;  	}   	.contact-details {  		width: 80%;  	}   	.footer-menu {  		padding: 0 2rem;  	}   	.footer-list-items {  		margin: 0;  	}  }

JavaScript

//index.js  const hamburger = document.getElementById('hamburger');  const menu = document.querySelector('.menu');   hamburger.addEventListener('click', function () {  	const hamIcon = this.querySelector('.hamburger-icon');  	const crossIcon = this.querySelector('.cross-icon');  	if (hamIcon.style.display === "none") {  		hamIcon.style.display = "inline-block" 		menu.style.display = "none" 		crossIcon.style.display = "none" 	}  	else {  		crossIcon.style.display = "inline-block" 		hamIcon.style.display = "none" 		menu.style.display = "block" 	}  });

Output

Simple Portfolio website

Uploading into a GitHub Repository

Finally your files now needs to be pushed into a new GitHub repository and has to be hosted using GitHub Pages. To push your portfolio website’s necessary files in GitHub follow the given steps:

Click on New option

Name the repository as ‘your-username.github.io’. (For example, if your username is chandrikadeb7 then name the repository as chandrikadeb7.github.io).
Click on Create Repository.

Enter the necessary details and click on Create Repository

You can upload all the necessary files from your computer in two ways:

1. Using in-browser GitHub Website Drag/Upload Option

Click on Upload Files option from your newly created repository.
Select the option Choose your files to upload them from your local computer.
Or just Drag and Drop the folders on this screen.

Upload the necessary files and click Commit Changes

2. Using Git Version Control

You can push the files to your repository using Git Version Control System.
See this guide to install Git https://git-scm.com/book/en/v2/Getting-Started-Installing-Git
Change the current working directory to your local project.
Initialize the local directory as a Git repository.

$ git init

Add the files in your new local repository. This stages them for the first commit.

$ git add .

Adds the files in the local repository and stages them for commit. To unstage a file, use ‘git reset HEAD YOUR-FILE’.

Commit the files that you’ve staged in your local repository.

$ git commit -m "First commit"

Commits the tracked changes and prepares them to be pushed to a remote repository. To remove this commit and modify the file, use ‘git reset –soft HEAD~1’ and commit and add the file again.

At the top of your GitHub repository’s Quick Setup page, click Clipboard icon to copy the remote repository URL.

Click the Clipboard icon to copy the URL

In Terminal, add the URL for the remote repository where your local repository will be pushed.

$ git remote add origin remote <repository URL>
# Sets the new remote
$ git remote -v
# Verifies the new remote URL

Push the changes in your local repository to GitHub.

$ git push -u origin master
# Pushes the changes in your local repository up to the remote repository you specified as the origin

Hosting Using GitHub Pages

Now go to Settings tab which is present right above and scroll down to look for GitHub Pages option.
Now select master-branch in Source drop-down and a notification will be visible stating that you are ready to publish your site in a minute or two.

Click on that notification hyperlink and there you go.. Your portfolio is hosted on GitHub pages for free!

Your personal portfolio website is published at https://<your-github-username>.github.io

Using GitHub to Host a Free Static Website

Chandrika Deb

Improve

Article Tags :

How to Build Portfolio Website And Host It on GitHub Pages?

Creating a Portfolio Website

Portfolio Preview

Approach

Output

Uploading into a GitHub Repository

1. Using in-browser GitHub Website Drag/Upload Option

2. Using Git Version Control

Hosting Using GitHub Pages

Similar Reads