Deploy your portfolio using GitHub pages
Tags: junior, technology, deployment, github
Published: 2023-11-30 01:42:57

## Introduction <br><br>

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! 🙌 <br> 

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. 

---



<u>Pre-requisites </u>

- Have a [GitHub account](https://github.com/join).
- Have your preferred IDE installed. Recommendation: VS Code. It is light weight and easier to use compared to others. 
- Have [git](https://git-scm.com/downloads) installed. 
- [Node JS](https://nodejs.org/en/) installed.

<br>
<u>Good ones to have </u>

- VS Code extensions:
      - Live server by Ritwick Dey
      - Prettier - Code formatter by prettier.io
      - ESLint by Microsoft 
      - Material Icon Theme by Philipp Kief

<br>
<u> Assumed knowledge </u>

- 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. <br>


---


> Github page's official documentation can be found [here](https://docs.github.com/en/pages/quickstart)


---

### I. 🎯 Get familiar with GitHub pages by deploying using a test page <br> <br>


####  1. Create a repository <br><br> 

There are a few ways in which you can do this. <br>

- 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_.

<br> Once you click _new_ you will be redirected & will need to enter some fields.  <br>


- Set the repository name as `username.github.io` **replacing **`username` with 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".


![Add repository fields](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/duxz4cs1glhr0x6wccgx.png) <br>


An URL link will be created for you; we will see this shortly. <br><br>


#### 2. Deploy it <br> <br>
 
- 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". 

![Deployment page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n1dysoymu14e6jgeilr3.png)


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. <br>


![GitHub Pages dashboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z6lnjsjle1c4xw54z8gx.png) <br>

If you click on it, a 404 page will come live. This is expected; once we add code it will change. <bt>

![404 code page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9m8svb02uikvgn8f319d.png) <br><br>



#### 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:


![Shows where to add a file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lqroxeq7pkv5fu2lm5z7.png)

- Call the file `index.html`:


![test code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nntrjxivp8z2xwcycxu1.png)


- 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 <br> 


![Shows details to commit](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9vdbcimsgqwbz0kf8z59.png) <br>

#### 4. View test page live  

<br> 
Go back to Pages. Once your changes are deployed, GitHub will let you know. <br>


![GitHub's pages page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e82imtigxqtocxe99a9i.png) <br>



Click on the recently deployed link and voilà! 👩‍💻👨‍💻🧚‍♀️🎇🎉 <br>

In the big picture, this is the _main_ process involved in deploying a site on GitHub pages. Amazing right?

![Working test page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/szjjaegbajuz0w7dwqe8.png)

<img width="100%" style="width:100%" src="https://media.giphy.com/media/9r75ILTJtiDACKOKoY/giphy.gif"> <br> 


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 <br><br>


 
> 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 <br><br>

- 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. 


![Find the fork button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tku5mp9m8b79au0qkjfy.png)

- **Change **`JuniorTechPN` to your own username and select "Fork". Note that this only creates a copy of the `main` branch. 



![Add fields to the fork page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i8zgdcsry99atmzytp9r.png)
 


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! 


![Your own copy of the repo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lz4lwnk1ap6eabld6w3f.png)

<br><br><br>
#### 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 `None` to `Main`. 
- Click "save". 

![Shows how to change from None to main](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nr9ct5z0etxq3ftvbabm.png)

You should  now see the "GitHub Pages source saves" notification pop up. 


![GitHub notification about pages](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6k7c0pao0dpe3kiflgu0.png)


<br> Give it a minute or two and refresh the page. You will see a link to your deployed page 🚀. 


![Pages link now appears](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mpbqnxjha6hwozils7ro.png)

<br> You should now see the "About me" page - the landing page for this portfolio template. <br>


![Personal portfolio page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gibioi3l70typ43l8thb.png)


<br> 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.  <br><br>


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 <your own repository link>


![Link to code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hwlc5sfdk2uujj3f6rn0.png)

![using command line](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/96wlibfe92a6xvy29jal.png)

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 `cd` and 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. 


![Live server extension](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oxtkdywdyt9r39lfvdmx.png)

- 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 


![Go live using extension](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gmz2qdkbyfwyr60h8vwo.png)

 
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. 


![Commit changes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sf9xlsjt2mk9ukix583i.png)


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!

<img width="100%" style="width:100%" src="https://media.giphy.com/media/76yCDV7ez1dSGKASc1/giphy.gif"> <br> 

---

<br> <br> 

### 🎯 Room for improvement - add your touch <br><br>

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? <br><br>

1. Add your own domain name 
2. Use a styling or web framework 

<br><br>

--- 

#### Don't like this template? <br><br>

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 :)