Welcome to the eighth blog of the series! Now that we have a basic idea of Git & GitHub let's use it in a real-world scenario. In this blog, we will explore GitHub Pages and see how you can build and host a simple portfolio website.
In today's digital age, having a personal website has become more than just a trend; it's a necessity. Whether you're an aspiring entrepreneur, a creative professional, or even a job seeker, a personal website can serve as your online identity and give you a competitive edge in the virtual realm. It's a place where you can showcase your skills, share your achievements, and connect with like-minded individuals from around the world.
GitHub Pages makes it very easy to host a static website with a few clicks!
Prerequisites
-
A GitHub account. You can create one for free at github.com.
-
Basic knowledge of HTML, CSS, and Git.
Setting Up a Repository
To get started with GitHub Pages, you need a repository to host your website. Follow these steps to create a new repository:
-
Log in to your GitHub account and click on the "+" button at the top right corner of the page.
-
Select "New repository" from the dropdown menu.
-
Choose a repository name. For GitHub Pages, it's recommended to name it .github.io, where is your GitHub username?
-
Optionally, add a description for your repository.
-
Select "Public"
-
Check the box to initialize the repository with a README file.
-
Click on the "Create repository" button.
Congratulations! You have created a new repository for your website.
Creating Your Website
Now that you have a repository, it's time to create your website. Follow these steps to get started:
-
Open your preferred code editor and create a new HTML file named index.html.
-
Add the basic structure of an HTML file:
<!DOCTYPE html>
<html>
<head>
<title>Your Website Title</title>
</head>
<body>
<!-- Your website content goes here -->
</body>
</html>
I have given an example of index.html file. But you can write code according to your liking and create a portfolio. You can also use readily available templates. You can refer to the link below for a few such examples. https://html5up.net/
Also, you can use themes offered by GitHub.
-
In your repository's settings, under the GitHub Pages section, click on the "Change theme" button.
-
Browse through the available themes and select one that suits your website.
-
Customize the theme settings, such as color scheme or layout, if desired.
-
Your website will automatically update with the new theme.
Deploying Your Website with GitHub Pages
With your website code ready, it's time to deploy it using GitHub Pages. Follow these steps:
-
Go to your repository's page on GitHub.
-
Click on the "Settings" tab.
-
Scroll down to the "GitHub Pages" section.
-
Select the branch you want to use for GitHub Pages. Typically, you should choose the
mainbranch. -
Optionally, choose a folder in your repository if your website files are located in a subdirectory.
-
Click on the "Save" button.
GitHub Pages will build and deploy your website. Once the process is complete, you will see a green success message with the URL of your deployed website. It may take a few moments for the changes to take effect.
Updating your website
To update your website, follow these steps:
-
Make changes to your website's HTML, CSS, or other assets in your code editor.
-
Save the changes.
-
Commit and push the changes to your GitHub repository using Git commands or a Git client.
GitHub Pages will automatically rebuild and update your website with the latest changes.
Conclusion
GitHub Pages provides an excellent platform for hosting your static websites with ease. By following the steps outlined in this blog post, you can set up your repository, create your website, and deploy it using GitHub Pages. With customization options like custom domains and themes, you can personalize your website to reflect your style and brand. GitHub Pages is a powerful tool that empowers developers to showcase their projects, create personal websites, and share their work with the world. Start building your first website with GitHub Pages and take your web presence to new heights!
Thank you for reading and do let me know your thoughts in the comments!