DEV Community

Cover image for How to create a simple portfolio with GitHub pages
Carol Musyoka
Carol Musyoka

Posted on

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

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.

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.

Top comments (12)

Collapse
 
vaasant profile image
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?

Collapse
 
carolmusyoka profile image
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.

Collapse
 
ronnieotieno profile image
Ronnie Otieno

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

Collapse
 
carolmusyoka profile image
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.

Collapse
 
ronnieotieno profile image
Ronnie Otieno

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

Thread Thread
 
carolmusyoka profile image
Carol Musyoka

You're welcome

Collapse
 
expertweblancer profile image
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

Collapse
 
brandonkylebailey profile image
Brandon

Hey Carol,

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

Collapse
 
carolmusyoka profile image
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


Collapse
 
brandonkylebailey profile image
Brandon

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

Thread Thread
 
carolmusyoka profile image
Carol Musyoka

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

Collapse
 
prabhjeet6 profile image
Prabhjeet Singh

Hi,

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