Well, are you ready to create your portfolio website using a free HTML+CSS template and then deploy it at github.io as free?
Follow the step that I did to create my Portfolio Website and then learn how to publish at gihhub.io.
- Download the free Html+ Css Template
- Organize the Html template
- Deploy in Github
We are going to use a free template, so you just need to organize the Html, and if you want you may also change CSS style. The basic Html will be enough to make your own portfolio.
Download the Template
- Download the template you desire to use for your portfolio. I choose to use the universe as my template.
Modify the Template
Tips for modifying the template.
- Remove the following object in each Html component.
<li><a href=”./components.html” title=””>05 : Components</a></li>
- In index.html, modify the span object with your name and job title in the body content.
- In the index.html file, you may also change the background images. Find out the following object and replace it with your own image.
<div class=”hero-full-container background-image-container white-text-container” style=”background-image: url(‘./assets/images/space.jpg’)”>- In the about.html file, change the content and also don’t forget to change your images file.
- The works.html file is a container for all projects that you want to present. In this file, the project could be displayed with heather and summary of the project and you also give a link to your project either you created as Html file in your website or you could direct to a link that goes to the project itself(Github, Medium, Kaggle, etc.).
- In the works.html file modify the content and explain what kind of project you have.
The order is shown at the above picture, add your own project and modify images and text as you want.
Your project will be represented as the above gift. In my portfolio, I want to display my project on one page as 3 containers in each row and I don’t want to transition as you see in this template. For this, you need to just copy the first-row container and created the second row. Make sure you close the all div element and also remove the following elements at the end of the body element.
<a class=”left carousel-control” href=”#myCarousel” data-slide=”prev”>‹</a><a class=”right carousel-control” href=”#myCarousel” data-slide=”next”>›</a>
You may found my portfolio page layout in the link.
Deploying the project to the GitHub.io
- Create a repository in your Github account. Your portfolio website is going to use that repository. When you finish your website link is going to display as follows. :
https://yourgithubname.github.io/yourrepositoryname/- In your GitHub, go to the repository and then click to the New button to create a new repository.
How is your repository look like when you finish creating it.
- Use git clone to clone your repository to your computer:
git clone https://github.com/aysbt/MyWebsite.git- Copy all Html and CSS files inside that repository. Add all files to the GitHub and then commit it.
--> cd univers--> cp -rf about.html assets components.html contact.html index.html main.3f6952e4.css main.3f6952e4.css.gz main.70a66962.js main.70a66962.js.gz main.70a66962.map sample work.html works.html ../MyWebsite
--> cd ../MyWebsite
--> git add . # adding everthing in your file
--> git commit -m "Porfolio files"
--> git push origin master
Our project inside a GitHub right now. But we should change the setting our repository actually put our website on the web. Let’s do that. Click the Settings and then find the GitHub Pages section. Click the “Select branch” and then choose the master and save changes.
You will get the following images in your GitHub and you should get the following message: Your site is ready to be published at https://aysbt.github.io/MyWebsite/.
Congratulations you have a portfolio website right now. Please thumps up if you like to read it or learned anything useful. Follow me on Twitter, Linkedin, and Medium.
