In this article, you will learn
- How to build your own portfolio website?
- How to host your website on GitHub Pages for FREE?
You can showcase this portfolio on your resume. So let’s get started!!
Downloading Portfolio Website Template
We’ll look for some awesome, responsive portfolio design templates online which are free of cost. The site HTML5up (https://html5up.net/) has many good choices for a personal portfolio with a lot of professional transitions and CSS/Bootstrap stuff.
Some fine choices for the template are listed below:
Download the template as a ZIP by clicking on the Download option in top right corner.
Now extract the files from the ZIP and have a close look. You may see folders such as ‘images’, ‘assets’ and files like ‘index.html’, ‘license.txt’ and ‘readme.txt’.
- Delete license.txt and readme.txt files.
- Open index.html file in your code editor such as VS Code or Sublime as well as in your browser.
- Start doing the necessary changes in the text from your code editor and reflect on the changes by refreshing your browser.
Also you can put your own images and background by changing the pictures in the images folder, but remember to put the same ‘filename’ as it has.
Once you are done and satisfied, you can change the CSS and styling. Well that is totally optional if you are a complete newbie.
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:
- Login on https://github.com/ and click on New option in left side pane right next to repositories.
- 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.
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.
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.
- 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
You can take a look at mine here – https://chandrikadeb7.github.io/
- Using GitHub to host a free static website
- How to make “spoiler” text in github wiki pages?
- Deployment of Angular Application using Github Pages
- How to host a simple website using Google Sites ?
- How to Publish a Static Website on GitHub?
- How to create a Portfolio Gallery using HTML and CSS ?
- How to enable routing and navigation between component pages in Angular 8 ?
- Save Pages as HTML in ElectronJS
- How to get the number of pages in a PDF document using PHP ?
- HTML | DOM Location host Property
- HTML | DOM Anchor host Property
- HTTP headers | Host
- HTTP header | X-Forwarded-Host
- How to Host a Local Server globally for more than one system ?
- How to style the host element of the component in AngularJS?
- An Ultimate Guide to Git and Github
- Difference Between Bitbucket and GitHub
- Difference Between GitLab and GitHub
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.