How to make your first portfolio hosted on Github Pages👩‍💻👨‍💻

Hello there! I’m assuming you are here because you are interested in either learning how to make a portfolio or how to host a site on Github pages or maybe even both? 🤔

Regardless of what your intentions were, you came to the right place! This tutorial will help you learn the basics of developing a website hosted on GitHub pages. At the end of this tutorial I hope you will have a functional personal website that you can use to show off to your friends or recruiters and/or if you are a high school student you can low-key flex on college admissions that you have a personal website that can highlight more about you as an individual.

Now let’s begin!

1. Make sure you have the necessary tools for this project 🛠️

Before we start developing our website, we need to make sure you have the necessary tools for this project

1. GitHub Account

First thing’s first — you will need to have a Github account in order to make your website work. If you don’t have a Github account, make an account on Github.com.

Just a random tip, your username shouldn’t just be a random username you have on Fortnite but treat it as a ~professional~ account but for software development.

2. Atom IDE

For our project, we will be using Atom as our IDE (Integrated Development Environment) which means that we will be using this platform as our code editor to create HTML and CSS files

Download Atom here

3. Command Line

Lastly, we will learn how to navigate our files in our computer through the command line as well as pushing our project to Github. I will explain what the command line is in the next step.

2. Navigating through the Command Line 🗺️

You’re probably reading this line and thinking to yourself, “what even is a command line?”

In short, the command line is a text-based application that allows the user to either view, handle, or manipulate files on their computer without clicking your mouse once. Think of the command line as Windows Explorer or Finder on the Mac, but without the graphical interface.

How to find the command line

MAC: Launchpad → search for Terminal

Windows: CTRL+S → search for Command Prompt

LINUX: Not really sure about this one :/, but you can try to Applications → search for Terminal but Google it

Now that you’re on the command line

Let’s do our first command!

Our first command will be to print out the username of your computer. Simply type whoami into the terminal and then hit enter. When I wrote the command on my terminal, my username was returned (see below).

$ whoami
monikap

Navigating through your directory

To see where you are in your directory, type pwd (for MAC or LINUX) or cd (WINDOWS). Currently, I am in my user home directory, but now I want to go to my Desktop directory — how do we do that?

$ pwd
/Users/monikap

Changing directories

To change directories, the command you will use is cd which literally means change directories. This allows you to change directories within your current directory.

Say we wanted to go to the Desktop directory, simply you would do this:

$ cd Desktop
$ pwd
/Users/monikap/Desktop

What I did here was navigating to the Desktop directory using cd and checked by using pwd which directory I was in which is where I wanted to be in — the Desktop directory

What if you wanted to be in a different directory?

You will still use cd but add two periods at the end to get out of the existing directory which will look like this: cd ..

We want to get out of the Desktop directory and want to go into a different directory:

$ cd .. 
/Users/monikap/

We used cd .. to get OUT of the Desktop directory. We want to go to a different directory but you don’t know what the other directories are so how do we find out? Easy — use ls which should list the files of the directory you are in.

$ ls
Applications
Desktop
Downloads
...

I used ls to show the different files from my user directory. So say I wanted to go to the Downloads directory, I would then type cd Downloads and ls to list all the files within the Downloads directory. If I wanted to leave the directory and go to another directory, I could just do cd .. to leave Downloads then cd *directory name* to go into that directory

Creating a new folder from the directory

Pretend we are in the Desktop directory and we want to make a new folder. All you do is use mkdir which makes the folder. Once the folder is made, cd to the folder name and create a file by doing touch *filename* (for MAC). From there you should see that you created a file within the folder you made.

Although I won’t go in depth about the command line, feel free to check out this tutorial about the command prompt on Codecademy!

In the meantime, these are the commands we will be using for our project (PLEASE NOTE these are MAC Commands since these are the commands I’m most familiar with on MAC)

Change directory to where you were before: cd .. 
Change directory (moving forward): cd
To create a FILE: touch *filename*
To create a FOLDER in a directory you're in: mkdir
To list all files in your current directory: ls

3. Creating a project on your command line 📁

Now that we learn the basics of command line it is time to start our project!

Just a pet peeve of mine but I always make sure I am in my DESKTOP directory so that way I can visually see that the file I created is ON my desktop without having to track my files in other directories.

Creating the folder

Now that I am in my Desktop directory, I want to make a folder named first-portfolio. To do this I do:

$ cd Desktop
$ mkdir first-portflio

Check to see if your project has been created by doing either one of two things:

I see on my Desktop that the first-portfolio has been created

1. Manually look at your desktop screen to see a folder named “first-portfolio” is there
2. On the command line, type ls which lists all the files onto the directory — you should see the folder you made, if not, repeat the first two steps

Creating the files for the project

Since you are making a website, you’ll undoubtedly need to have some HTML and CSS files to make this site. In order to make these files, first make sure you are INSIDE the project directory so you don’t create your HTML and CSS files somewhere else! To do this, navigate to the folder by writing:

cd first-portfolio

Now that you are in your project folder, it is time to make some HTML and CSS files! For MAC, you would use the touch command to make the files index.html and style.css

$ touch index.html
$ touch style.css

When I type ls, this shows you have created the html and css files.

first-portfolio monikap$ ls
index.html style.css

Alternatively, you can just go on your desktop and click the first-portfolio file to visually see the files you made

You can see the index.html and style.css files I made under first-portfolio

Now that we created our two files — it is time to start our project!

4. Accessing your project on Atom 📂

Now it’s time to actually make your project! When you first click Atom, you should have an interface like the one below

To access your project, click “Open a Project” then go to Desktop and click the entire first-portfolio folder. Look at the far right corner and you should have a similar interface to this

This is how your interface should look like when you open your project

Now notice that the files are blank. That’s because we just made them! Now, this is the fun part — designing the website!

5. Designing your personal website 🖌️

Now this is where you get your hands dirty with some HTML and CSS. There are millions of ways to develop a website, but if you are a newbie to web design feel free to copy and paste some starter code I made (see below). As for those that have experience with web development, feel free to whatever you want and skip this step to the Github part.

Resources for Web Development:

• Now if you’re a newbie, your best bet of learning web development should be on W3Schools as they have all the guides you’d possibly want or features to include on your website.
• Alternatively, you should check out this lesson on Codecademy to learn how to make a site from the ground out.

I won’t go in depth on web development since that’s too much to talk about. However, for the newbies out there, I gotchu.

PORTFOLIO TEMPLATE

I made this simple temple for y’all to use — feel free to edit the stuff I noted on Repl.it. Note that this template is VERY BASIC so you can add on more features later or completely revamp the site out.

All you have to do is this: copy and paste the code to the respective Atom file. Then hit Ctrl+S to save all the modified files in Atom. After this part, it’s time to do the nitty gritty work after I give y’all a tip.

6. What to include on your personal website 📝

Now you’re probably wondering — what even do you include on a personal website? I can’t give a definite answer but there is SO much that you could include hence the name ~personal~ site.

But if you want me to tell you something, here’s a general rule I’d follow:

1. Name
2. School
3. Resume/Contact Info/Social Media links (can be creative with this)
4. Projects (if any)
5. Experiences (internships)
6. Activities(could combine with Experiences)
7. Awards
8. Interests/Skills

Here are a couple sites that you can look at for personal portfolios for inspiration:

• https://collegeinfogeek.com/personal-website-examples/
• https://mpara0.github.io/ (my portfolio :0 )

7. Pushing Your Code to Github 💻

Now that you have you some meat on your project, it’s time to finally push your code to Github.

Creating a repository on Github

Now that you created a repository, you should see something like this:

Now this is where the command line is needed. Make sure you go onto your command line and navigate to the first-portfolio folder. To do this, just cd to first-portfolio if you haven’t done so already

Once you are in the project folder, follow the steps for the FIRST ONE to push your code. Follow the code here. I added the add . method which makes sure you added all your files that will be pushed to Github

echo "# first-portfolio" >> README.md
git init
git add README.md
git add .
git commit -m "first commit"
git remote add origin https://github.com/mpara0/first-portfolio.git
git push -u origin master

After the code is pushed to Github, refresh your repository and hopefully you should see this:

All the files were uploaded from Atom to Github

8. Making your site live on GitHub pages 💻

We are almost at the home stretch. Now we just need to do one more thing before our site is live — hosting it on Github pages.

To do this, click on the settings icon to the far right corner of your repository

Visual Representation of how to make your site live

You should then see a link under the GitHub Pages portion that it similar and says:

Your site is ready to be published at https://your-username.github.io/first-portfolio/.

9. Your site is now live 🎉

After you click the link, this is how your site should look like:

What your site should look like!

HOORAY! You just made your own website hosted on Github pages 🥳🥳

10. What’s next? 🤔

This is entirely up to you. Feel free to do ANYTHING with the site.

In fact, you can even modify the html and css files to customize the site to your personal preference.

Notice how I named the folder in the beginning to first-portfolio. That is because I already have a folder that is named under my GitHub username.

If you want to make the url to just your-username.github.io, just change the folder name to your-username in the beginning. Then you’d just have to follow the same steps

I hope this tutorial has helped you learn how to make a website hosted through Github pages! If you want to show me your project you made, feel to comment below.

I’m going to link additional resources as extensions for your project below

Additional Resources 📚

Web Related

• HTML Templates: https://html5up.net/
• Website Tutorials: https://www.w3schools.com/
• Deploy your project to Netlify: https://www.netlify.com/blog/2016/09/29/a-step-by-step-guide-deploying-on-netlify/

Command Line

• Command Line stuff under Windows: https://www.thomas-krenn.com/en/wiki/Cmd_commands_under_Windows
• What Even is the Command Line? : https://www.computerhope.com/jargon/c/commandi.htm
• Practice Command Line commands: https://github.com/benthayer/git-gud