Creating a Portfolio Website - Made Easy
What are you waiting for ?
Gone are the days when a portfolio was used only by artists, designers, writers and people in visual professions to present their work and skills. Today, with increasing competition in all the industries, what matters is your experience and proficiency in the field. And what can be a better way to market your skills than creating a portfolio website which highlights and helps you build your credibility in the work community in an effective way for the targeted audience.
Clarke University defines a portfolio as “A compilation of materials that exemplifies your beliefs, skills, qualifications, education, training and experiences. It provides insight into your personality and work ethic.”
What comes to your mind when you think of creating a website, any website for that matter ? Do you think that to host your website online, you will have to buy a domain name? If so, I can assure you that you are not the first person to think this way. To be honest, you shouldn’t care about the money when you do things for your own personal and professional development.
But, we love FREE , do we not?
And there is nothing wrong in it !
In this article, I will show you how you can create your own portfolio website and host it online for free using GitHub Pages. All you need to have is a GitHub account, and working knowledge of HTML, CSS & JavaScript.
Let’s get started.
- Find yourself a free website template : You can find thousands of free website templates on the internet. I used HTML5 UP . This website provides fully responsive and customizable templates. Choose a design which suits you the best and download it on your computer. Let me show you an example.
On opening the template, the above page opens. Click on the download button on top right corner, the website template gets downloaded in a zip format. Extract all files in a new folder. Almost all files you download from this website will have the following structure.
“index.html” is the main webpage of your website. You have your JavaScript and CSS folders inside the “assets” folder.
2. Edit the template using a Text Editor : As i mentioned above, you will require your front-end web development skills to design your website. I prefer Sublime Text Editor. You can take help from W3Schools in-case you are stuck at any point.
3. Create a GitHub Account : You can take help from this website to create your account.
4. Create a GitHub Pages Repository : Once you are logged in to your GitHub, create a new repository. Press on the green button on the upper left corner that says “New”. This will take you to the following page.
Notice that my repository name follows the syntax — {Username}.github.io
This is a standard procedure to be carried out while making a GitHub Pages Repository. Finally click on the “Create repository” button.
Your GitHub Pages repository has a maximum storage capacity of 1GB. This is more than sufficient to host simple websites.
5. Upload your folder in this repository : Once you create your repository, you will land on the following page.
Click on “uploading an existing file”. This will take you here :
To upload your website folder, drag and drop the folder. Once all files are uploaded, click on “Commit changes” button.
6. Open your website : To open your website, paste the URL on the browser : {username.github.io}/{foldername}/index.html
Example : My Portfolio
There you go, your portfolio website hosted online using GitHub Pages!!
Note : All the resources that you will require to get started have been mentioned and their links provided in this article as well. I hope you make good use of it :)
I sincerely hope this article will inspire you to go ahead and create a website of your own. Don’t forget to click on the “clap” icon below if you have enjoyed reading this article. Thank you for your time.
