Introduction
Deploying a static website on GitHub is a seamless process once you are familiar with the interface. You use this awesome service event if only know a little bit of HTML, CSS or JavaScript.
If you have tried to do this with other providers and found yourself getting stuck then you're in the right place! 🙌
I. First, we will create a test repository and deploy a test page. This is to help you get used to the process.
II. Secondly, we will fork an existing template portfolio and work our way through personalising it.
Pre-requisites
- Have a GitHub account.
- Have your preferred IDE installed. Recommendation: VS Code. It is light weight and easier to use compared to others.
- Have git installed.
- Node JS installed.
Good ones to have
- VS Code extensions:
- Live server by Ritwick Dey
- Prettier - Code formatter by prettier.io
- ESLint by Microsoft
- Material Icon Theme by Philipp Kief
Assumed knowledge
- Familiarity with git, VS Code, command line/terminal, GitHub.
- Basic HTML, CSS and JavaScript.
Since this guide is being written for an in-person workshop, there will be help in case you're not familiar with any of them. But if you're reading this off-workshop, ask your questions in the comment section & I'll try my best to get back to you.
Github page's official documentation can be found here
I. 🎯 Get familiar with GitHub pages by deploying using a test page
1. Create a repository
There are a few ways in which you can do this.
Option 1: Under the kebab menu on the left-hand side of your GitHub page go to dashboard > home > new
Option 2: Click on your icon avatar on the right-hand side of the page to open the side menu and go to repositories > new.
Once you click new you will be redirected & will need to enter some fields.
- Set the repository name as
username.github.io*replacing *usernamewith your own. This tells GitHub, that we are creating our own page. - Select "public". Private repositories are only for paid accounts.
- Choose a license (optional).
- Click "create a repository".
An URL link will be created for you; we will see this shortly.
2. Deploy it
- Within your repository, navigate to Setting > pages . Under Build and Deployment select Main as the branch where your code will be read from.
- Don't forget to click "save".
Wait for a few moments and a link similar to the image below will appear. The time of your last deployment will be shown too.
If you click on it, a 404 page will come live. This is expected; once we add code it will change.
3. Add a test page
To make sure that your page is working, let's add a test page directly in the browser.
- On the repositories main' page click on Add file > create file as shown below:
- Call the file
index.html:
- Add the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p style="background-color: rgb(192, 228, 217);">Hello 👋 - I am a test page 📃</p>
</body>
</html>
- Commit your changes
4. View test page live
Go back to Pages. Once your changes are deployed, GitHub will let you know.
Click on the recently deployed link and voilà! 👩💻👨💻🧚♀️🎇🎉
In the big picture, this is the main process involved in deploying a site on GitHub pages. Amazing right?
Now **DELETE **this test repository as GitHub only allows you to have one github.io extension per account.
II. 🎯 Fork an existing repository and get your personal touch deployed
Note that, this is not the only way of doing this. You can also clone a repository or create an empty one to add your own files.
1. Fork the repository
- Go to https://github.com/JuniorTechPN
- Under Repositories, find JuniorTech.github.io , click on it.
- Find the "fork" button on the right side of the page.
- *Change *
JuniorTechPNto your own username and select "Fork". Note that this only creates a copy of themainbranch.
Now that you have created your own copy of this repository, you can add files, delete code, and make it your own personalised portfolio.
Or create pull requests and help us to make this more exciting!
2. Deploy the forked repository
It will be nice to see how this portfolio looks like live on GitHub pages.
- Go to Settings > pages
- Under build and deployment, change the _branch _ from
NonetoMain. - Click "save".
You should now see the "GitHub Pages source saves" notification pop up.
Give it a minute or two and refresh the page. You will see a link to your deployed page 🚀.
You should now see the "About me" page - the landing page for this portfolio template.
The page is also available here https://juniortechpn.github.io/JuniorTech.github.io/
Feel free to explore the page, think about how you can make it your own, and move to the next section, where we will make changes locally.
🎯 2. Personalise the portfolio with your own details.
Now that you have viewed the template code live and forked the repository, it is time to make changes locally.
Open the command line on Windows or the Terminal in Mac.
- Create a folder on your computer's preferred location.
- Move to that location -
cd TAB - Clone the repository using HTTPS using `git clone
There are other ways to clone the repository, such as using a GUI (graphical user interface) or VS Code's interface too. Feel free to use these if you are more comfortable with them.
- Now, while still in the command line, type
cdand press Tab to display your new git folder. Press Enter Then type
code .and press Enter. This will open VS Code directly. Alternatively, open VS Code and select the file manually.VS Code might ask you if you trust the author of the files in this folder; it will do that even for your own created files. Select "Yes"
If you have not installed the "Live Server" extension, do so now. It will allow you to view your code changes locally. It's good thing to do before you commit anything.
- Open the file explorer on the left hand side of VS Code's interface
- Select index.html
- Click "Go Live" on the blue bar at the button
This will open a tab in your default browser. Usually on port 5500.
- If no tab opens, go to your browser and type http://127.0.0.1:5500/index.html
Once you have added at least one change, VS Code will let you know. To see your changes back in the origin (the repo on GitHub), you will need to add, commit and push your changes.
This can be done from either VS Code's integrated version control system (shown on the left in the image below) or via the terminal in VS Code too.
Once you're ready, push all your changes to the remote origin (your own repository on GitHub).
Every time you make a push, GitHub Pages will re-deploy your changes. Giving you a new link to view. Sometimes it is very fast and sometimes you need to wait a few moments to see these.
And that is how you deploy your own personal portfolio using GitHub Pages!
🎯 Room for improvement - add your touch
Much of this code was a collection of online searches, reading others code, getting inspired and adapting things along the way. You can do the same.
There are things that have being left out on purpose. This is to allow you to learn and understand the code further.
- Add responsiveness to each page:
- Current template only works on desktop view. You will need to add css (media queries)
-
Reduce code lines
- Make the nav bar appear on each page without having to manually type it on each html file or each css file.
-
Add your own touch by creating:
- A blog
- Your own unique components such as Animations, a clock (when the user lands you tell them the time in yours/their city)
Add a footer
Complete the let’s talk section
-
CSS:
- Could all css into one file - although when it is on separate files it will be easier to debug
- Change CSS units to one type - a mix of px and % is been used.
🎯 Up for a bigger challenge?
- Add your own domain name
- Use a styling or web framework
Don't like this template?
No worries! There are many other open-source templates that you can adapt. A simple search in GitHub can help you get inspired.
I've done this for you. Go to https://github.com/search?q=personal+porfolio&type=repositories
Once you are done, please post your portfolio links below! I will love to see your creation. If you need help with a code review let me know and I might give you a hand!
Pull requests on the template repo are welcome :)
Thank you :)
Top comments (1)
Nice detail post! Thank you for sharing