A perfect guide to make a killing Portfolio website and host it using GitHub Pages
This blog will walk you step by step through creating your own portfolio website and hosting it on GitHub using the GitHub Pages feature with just the basic knowledge of HTML.
It will be extremely valuable to have a Portfolio, no matter if you’re a Student, Developer or a Data Scientist. It shows potential employers a condensed version of your project work.
For starters, a Portfolio is your visual calling card, one that lets the world know what you’ve accomplished and what you’re capable of. It’s a constant that needs care throughout the duration of your career, and must be something you spend a good amount of time customizing.
We are going to host a static HTML website on GitHub. This method can also be used to host other HTML websites like React JS, Angular JS and Bootstrap based websites.
It is very simple and you can have your website hosted on GitHub within an hour. We are using GitHub pages as our host because it will be easy for us to publish and share our own website without any cost.
PREREQUISITES:
i. A GitHub account
ii. Basic knowledge of HTML
iii. Visual Studio Code software (installed) or any other editor
OVERVIEW:
1. Getting started with GitHub Pages and creating a new repository
2. Download an existing website template
3. Make changes and customize it
4. Copy your files to the repository
5. Publish your website
1. Getting started with GitHub Pages and creating a new repository
What is GitHub Pages?
GitHub pages are public web pages hosted for free through GitHub.
GitHub users can both create and host their websites. GitHub Pages lets you do the same thing as GitHub, but if the repository is named a certain way and the files inside it are HTML or markdown, you can view the file like any other website.
The best way to learn this stuff is just to make your hands dirty by doing the work.
Firstly, we start by creating a new repository on GitHub with a title that follows the convention: [Your GitHub Username].github.io
Here’s mine: sowjanya-105.github.io
Just name your repository and be sure it is public and go ahead by initializing the repository with a README file upon generating the repository.
Whatever code gets pushed to that repository gets displayed when you navigate to that site.
2. Download an existing website template
A website template can be thought of as a mold in which you can easily form your website. These templates are pre-made websites that can be fully customized to look unique and fresh, yet familiar. So, here you don’t require any web development skills and there’s no need to waste your time sitting for hours designing your website.
There are tons of websites out there to provide you the best, creative and responsive HTML templates for free.
Here are some of the best websites to find the templates of your choice:
All you need to do here is, choose the template and download the zip folder.
3. Make Changes and customize it
This is the most important and game changing part. Now, you’re going to change the website template into your own website.
For this, you will have to extract the zip folder and open the whole folder with Visual Studio Code or any other text editor.
Next, make changes in the script and customize it according to your wish.
You have to mostly change all the contents of index.html file and add the contents you want.
To visualize the website in Visual Studio Code, install the extension live server. This will help you to visualize your website and make changed accordingly.
4.Copy your files to the repository and commit
Now, this is the easiest part. Just save your works on Visual Studio Code and drag and drop the whole folder into the GitHub repository we created in the beginning.
With all your files in your GitHub Repository folder, it is now time for your very first commit.
Enter a summary for your commit and a full description of the changes. Then click on Commit to master. From the browser, refresh your GitHub screen and you now see your repository.
5. Set up GitHub pages and activate your live site
Select the repository and go to the settings tab. Next, Scroll to the GitHub Pages settings and select the source of the Pages.
Here, this is the Master branch.
The changes are automatically saved and the page is reloaded. GitHub now provides you with the URL of your website.
Click on the link and you are automatically redirected to your live site which is now available for everyone.
There you have it: A perfect guide to make a killing portfolio website and host it using GitHub pages.
Whether you’re a beginner or an experienced web designer or a developer, I encourage you to give GitHub Pages a try.