Deploy your portfolio using GitHub pages

Patricia — Thu, 30 Nov 2023 01:42:57 +0000

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

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 *JuniorTechPN to your own username and select "Fork". Note that this only creates a copy of the main branch.

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 None to Main.
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 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.

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

Is studying remotely challenging? Part A

Patricia — Sun, 27 Mar 2022 22:24:19 +0000

This is an interesting topic to me as developing the ability to collaborate with others on university projects can actually prepare you to what comes ahead once you leave university to work.

The option to study remotely or in a hybrid environment is now more common compared to my previous years of study. It comes with great advantages such as saving time and cost on transport, prepare your own lunch at home or even go for a walk between breaks 📚🚶🎓

But it seems that despite of the benefits of studying under remote/hybrid conditions many students struggle to collaborate, to learn or to have fun!

So, for my first published article, I to thought that it would be good to share some of my tips. They might help you if you are finding it hard whilst studying from home.

Simple things

Turn your mic on 🎙️

If your lecturer is happy with this, it might be easier to speak to ask a question rather than typing. This is particularly nice as it creates a dialogue, and reduces misunderstandings.

Turn your camera on 📹

If this is possible, please do! For teachers, lecturers and even students it is nice to know that there is someone on the other side. But if you are shy or simply do not have a camera that's okay, there are other ways to let others know that you are there.

When the teacher asks "are there any questions 🤔" - reply

When we study in person it is much easier to see whether someone might want to ask a question or whether things make sense, but online this is not as simple. Typing or saying "no" is also an answer.

You have a question but also want to ask in private?

Many applications such as Microsoft Teams, Zoom or Collaborate Ultra have "breakout rooms". These are separate online spaces from the main call/meeting. They can be handy when you would like one-to-one assistance

Share your screen 🖥️

Sometimes other students might be wondering about the same or encountering the same issues. So sharing your screen and solving these issues together creates a better learning environment for all. It is also easier for the teacher/lecturer to guide you.

Keep things organised 💾

Back on the day I used to keep my hand notes organised into physical folders and with labels. But as things get more digitized, I began having a combination of hand-written and digital notes. If this is you too, I'd recommend that you take a photograph and put it all together.

Give meaningful names to your folders/files
Separate by category - for example by paper or by semester
Establish a true source of information - for example if you use various applications to collaborate with others at school, create a folder where you add all your documents such as OneDrive ☁️ or Google Drive.

Avoid your bed 🛏️❌

As temping as it might be - avoid studying on your bed. It is important that your mind is able to separate work/study from resting/sleeping. If you are feeling low on energy it might be better to take the time to actually rest rather than pushing yourself.

Reach out!🙋

Ask your class mates how they are doing, introduce yourself or offer to help others. Sometimes this is the best way to get things going and to network in class!

I hope these tips are somewhat useful - they might seem obvious and easy to implement but I found that some of peers at university struggle with this. Maybe the same with students all around the globe - who knows.

On part B, I would share some of the tools that I have used and currently use to help me keep things organised at university!

If you have any other tips please share them below!

Cat photo by Chris Barbalis on Unsplash

DEV Community: Patricia