How to create a simple portfolio with GitHub pages

One of the ways of scaling up as a developer is building a portfolio. Basically, a portfolio is a way of showcasing work samples and skills stated in your resume.

One of the ways of creating a simple portfolio is using GitHub pages. This is a site hosting service that takes HTML, CSS and JavaScript files directly from a repo on GitHub. The good thing about GitHub pages is the fact that it is free as it supports custom domains, with deploys straight from Git.

Getting Started

• Make sure you have a GitHub account.
• Have basic knowledge of how Git and GitHub Works.

Lets do this 💪🏻

Login to your GitHub account

Creating a project site.

With project sites, you get to use templates downloaded online or pick a theme from the settings on the repository.

• create a new repository named username.github.io. Say if you name is carolyne, your repository name will be carolyne.github.io. This will be your homepage. PS: You can add a description if you like.

  • Check out the following websites to download free portfolio website templates from colorlib, Start Bootstrap, Themezy, BootStrap zero or Bootstrap made. You can as well use this link (https://github.com/evanca/quick-portfolio) to create one by forking the repo.

Go to repository Settings and scroll down to the “GitHub Pages” section. Select “master branch” under the “Source”.

Add a theme to the portfolio to changeits look and feel

Choose the theme you want and then , Select Theme

You may be asked to edit your site`s README.md file
Your chosen theme will automatically apply to files in your repo.

Steps to create personal or organization site

You can work with the repo already created or create a new one.

Clone the repository.

create a folder where you want to store the project on your desktop and clone the new repository

~ $ git clone https://github.com/carolmusyoka18/carolmusyoka18.github.io


add index.html file

You can now create an index.html file in the project folder


~ $ cd carolmusyoka18.github.io
~ $ echo "Hello World" > index.html


Push the Repo

Add commit and push all your changes

`~ $ git add --all

~ $ git commit -m "Initial commit"

~ $ git push -u origin master
`

And you are good to go 😎🎉🎉

Check out your website https://username.github.io.

If you are deploying Github pages for the first time, you might need to wait for a while before you see the actual site. If you need to make any change to your portfolio, you can make them locally and push the changes as shown above. It is not advisable to make changes directly on the portfolio.

You can edit files directly on GitHub in any of your repositories using the file editor, which uses CodeMirror. You can check out this short tutorial to get it right

The secret is trying and practicing. With time you will, get pretty good at creating portfolios. Share your thoughts or ideas down below.

Comments

[Vaasant]

Hi carol,
when i published my app using angular my page show things about the readme file,Where as my website content is actually inside a subfolder and index.html following it .How do i access that index.html?

[Carol Musyoka]

Hello. I'm sorry I didnt reply immediately. The index.HTML should not be in that sub folder. Try moving it to the master folder. Let me know if that works.

[Ronnie Otieno]

Hi, Carolyne my site wasn't created. It says no site found

[Carol Musyoka]

Hello Ronnie, have you tried accessing the site's link from the settings 'tab' ? Or you can send me a link to your project and assist you on that.

[Ronnie Otieno]

Hi Carol. It's working! Thanks a lot!

[Carol Musyoka]

You're welcome

[Expertweblancer]

Thanks for your post.
It worked perfectly for me.
I have one question.
For now, I used the basic HTML template for my portfolio website.
Can I use PHP script instead of HTML template?
If it is possible, it will be great. Let me know if it's possible.

Best

[Brandon]

Hey Carol,

Is there a way to change the configuration to point to the index.html file instead of the README.md file?

[Carol Musyoka]

If you have a README.md, it will be transformed into an index.md automatically. If you don't have an index.html you can use README.md or vice versa.

Or Instead of hardcoding either index.md or README.md, why not simply keep the existing code and add a config option like index_page or something:

This seems totally reasonable to me and could be added to the existing documentation prominently:

---

index_page: README.md

---

[Brandon]

Ah, makes sense, thank you ! ill have a tinker

[Carol Musyoka]

You're welcome. Let me know how it goes😊

[Prabhjeet Singh]

Hi,

Any idea how can I embed by dev.to blog in the portfolio, without any legal or Technical issues