Professional Portfolio on GitHub Pages in 7 steps
The whole process could be done within 30 minutes.
Creating a portfolio page on GitHub Pages is a great way to showcase your work and make it easily accessible to potential employers or clients. The process is relatively straightforward, and you can use any static website generator to create your page.
In this article, I will walk you through the steps of hosting a portfolio page on GitHub Pages, using the example of a basic HTML/CSS template.
- Step 1: Create a new repository
- Step 2: Give your repository a name
- Step 3: Create an index file
- Step 4: Add HTML and CSS code
- Step 5: Add contents to the page
- Step 6: Commit your changes
- Step 7: View your portfolio page
Step 1: Create a new repository
The first step is to create a new repository on GitHub that will serve as the home for your portfolio page.
To do this, log into your GitHub account and click the “+” button in the top-right corner of the page. Select “New repository” from the dropdown menu.
Step 2: Give your repository a name.
Give your repository a name relevant to your portfolio, such as “yourusername.github.io” where “yourusername” is your GitHub username.
Ensure the “Public” button is selected and click the “Create repository” button.
Step 3: Create an index file
Now that you have a repository, you can begin adding files. The first file you will need is an “index.html” file. This file is the main file that will be loaded when someone visits your portfolio page.
You can create this file either on your local computer or directly on GitHub.
If you create the file on GitHub, select the “Create new file” button on your repository page and give the file the name “index.html.”
Step 4: Add HTML and CSS code
Next, you must add the HTML and CSS code to your “index.html” file. HTML is used to create the structure of your web page, while CSS is used to add styles such as colors and layout.
If you don’t have any experience with HTML and CSS, you can use some free templates to start, such as Bootstrap or Foundation templates.
You can also learn HTML with Codecademy — https://www.codecademy.com/learn/learn-html
As well as CSS with Codecademy — https://www.codecademy.com/learn/learn-css
Step 5: Add contents to the page
You can now begin adding content to your portfolio page. This can include information about yourself, links to your work, and any other relevant details you want to share.
Use the HTML and CSS code you added in the previous step to format and style your page as desired.
Step 6: Commit your changes
When you are finished making changes to your files, it’s time to commit them to your repository.
On the GitHub page for your repository, you will see a “Commit changes” button. Click this button to save your changes and make them live on your portfolio page.
Step 7: View your portfolio page
To view your portfolio page, navigate to “https://yourusername.github.io" in your web browser, and replace “yourusername” with your GitHub username. If all steps have been done correctly, you should see your new portfolio page.
In summary, hosting a portfolio page on GitHub Pages is a simple process that requires creating a new repository, adding an index file, adding HTML and CSS code, committing changes, and viewing your portfolio.
The whole process could be done within 30 minutes.
Remember, you can continually update your portfolio page as your work evolves and grows, making it an easy and efficient way to share your work with others.
Thanks for reading
You succeed, I succeed, and We succeed
— Tim MR
I share the valuable insights and advice that have helped me succeed and hope to provide helpful information to others. Follow me on Twitter.