A Beginner's Guide on Creating a Portfolio Website with Github and Gatsby
Tags: beginners, gatsby, github, react
Published: 2019-08-24 09:38:46

---
title: A Beginner's Guide on Creating a Portfolio Website with Github and Gatsby
published: true
cover_image: https://thepracticaldev.s3.amazonaws.com/i/4mlmvpwdiojoekuzac9c.png
description: A step-by-step guide on how to create your portfolio website with GitHub and Gatsby for free
tags: beginners, gatsby, github, react
---

As someone who is trying to build a presence online, having a website should be on top of your priority list. It is also a fun learning experience which will help you explore your inner creative child.

This guide will help you build a portfolio website and host it online for everyone to see. To be able to follow through, you must at least have some working knowledge about HTML, CSS, and JavaScript. 

## Setting up your Computer
We will be setting up our JavaScript development environment. The following software needs to be installed and setup on your computer.

### NodeJS
NodeJS will be used to build the source code of our website and download packages that we need. Note that **npm** will be installed with **NodeJS**.

1. Download [NodeJS](https://nodejs.org/en/). At the time of writing, this is the latest version. If you are using Windows, this page will show Windows downloads.
  ![NodeJS](https://thepracticaldev.s3.amazonaws.com/i/tk3k2l12f3sg3wuxk0o3.png)
2. Once you have downloaded the installer, go ahead follow the prompts to install it to your computer.
3. If you have successfully installed NodeJS you should be able to verify it by opening your Terminal/Command Prompt and type the following commands.
```sh
node -v     # will show currently installed version of NodeJS
npm -v      # will show currently installed version of npm
```

### VS Code
VS Code is a source-code editor. It includes support for embedded Git control and GitHub.

1. Download [VS Code](https://code.visualstudio.com/). If you are using Windows, this page will show Windows downloads.
  ![VS Code] (https://thepracticaldev.s3.amazonaws.com/i/yqkob0dlw0jp8iw6d1no.png)
2. Once you have downloaded the installer, go ahead follow the prompts to install it to your computer.

### Git and Github
Git will help us save versions of our source code to GitHub. You must create a [GitHub](https://github.com) account and setup Git after by following the instructions below:

#### Creating a Github Account

1. Go to https://github.com. Enter a **username**, **email** and **password**.
  ![Github1](https://thepracticaldev.s3.amazonaws.com/i/anlfpdaecctnptfb2myy.png)
2. There will be three (3) steps until you reach this page.
  ![Github2](https://thepracticaldev.s3.amazonaws.com/i/8a2kwsdu7guyex42oo9p.png)

#### Creating the Repository
Once you have verified your email, you will be redirected to this page. Here we will create a repository named **username.github.io** so example in my case it would be **geocine.github.io**

![Github3](https://thepracticaldev.s3.amazonaws.com/i/03y5arto1ajerpeq55n9.png)

### Setting up your SSH Key
To be able to upload the files from our computer to GitHub, we need to create an SSH key and set it up on GitHub.

#### Generating a new SSH Key

1. Open your Terminal/Git Bash
2. Enter the text below, substitute the email with your email
   {% gist https://gist.github.com/geocine/6f2b2461c08e9ea6a472c06a0ccacc7e file=generate-key.md %}
3. When you're prompted to "Enter a file in which to save the key," press Enter. This accepts the default file location.
    {% gist https://gist.github.com/geocine/6f2b2461c08e9ea6a472c06a0ccacc7e file=enter-name.md %}
4. At the prompt, type a secure passphrase. Note that nothing will show while you are typing.
   {% gist https://gist.github.com/geocine/6f2b2461c08e9ea6a472c06a0ccacc7e file=enter-passphrase.md %}


#### Adding a new SSH key to your GitHub account
If you have properly followed the instructions above, a file will be generated on your **~/.ssh** folder:


1. Go to your **~/.ssh** folder on Mac or **C:/Users/YOUR_USER_NAME/.ssh** on Windows. You will see a file named **id_rsa.pub**. Open it and copy its contents.
2. Go to the settings page of your GitHub account.
  ![GitHub4](https://thepracticaldev.s3.amazonaws.com/i/fgttbdyq1ulc7pnkayk9.png)
3. Click on **SSH and GPG Keys** > **New SSH Key**
  ![GitHub5](https://thepracticaldev.s3.amazonaws.com/i/65abxoi1kqk479h21oei.png)
4. Add your **SSH Key** from **Step 1** then press **Add SSH Key**
  ![GitHub6](https://thepracticaldev.s3.amazonaws.com/i/jwvai2qi8mwc1uv0n3cn.png)
5. If prompted, confirm your GitHub password.


## Choosing a Template
Let us open the [Gatsby Starters](https://www.gatsbyjs.org/starters/?v=2) page and choose a template. You'll be able to see something like this:

![Gatsby Starters](https://thepracticaldev.s3.amazonaws.com/i/4ct1863aviby1660uzwf.png)

I'll be using the [gatsby-starter-portfolio](https://www.gatsbyjs.org/starters/LekovicMilos/gatsby-starter-portfolio/) create by [LekovicMilos](https://github.com/LekovicMilos)

![](https://thepracticaldev.s3.amazonaws.com/i/t5wtnzu6ipjf8mcn66zg.png)

## Setting up your Git Repository
We will be using our GitHub account to create a website, we shall be hosting it on **username.github.io** so example in my case it would be **geocine.github.io**

1. Create a folder on your computer, use your GitHub username. In my case, I will create **geocine.github.io**
2. Go to the template of your choice, scroll down. Click on the **Source** link.
  ![Gatsby Template](https://thepracticaldev.s3.amazonaws.com/i/uw2s72r64zcmbismiewa.png)
3. Copy the link as shown on the screenshot below:
  ![Github Link](https://thepracticaldev.s3.amazonaws.com/i/bgrdpe8j7bi8gxnym9c9.png)
4. Go inside your folder, in my case it's **geocine.github.io**. Clone the starter ```sh
git clone git@github.com:LekovicMilos/gatsby-starter-portfolio.git
```
5. Once the cloning process is done. Your folder structure should look like this
  ![FolderStructure1](https://thepracticaldev.s3.amazonaws.com/i/jbyzgibvz5s10mh6ppn5.png)
6. We will rename **gatsby-starter-portfolio** to **gatsby**. Now your directory structure should look like this
  ![FolderStructure2](https://thepracticaldev.s3.amazonaws.com/i/93gajknvyqg3jf90xocp.png)
7. Create a **.gitignore** file on your root directory and paste the following:
   {% gist https://gist.github.com/geocine/6f2b2461c08e9ea6a472c06a0ccacc7e file=gitignore.md %}
   ![FolderStructure13](https://thepracticaldev.s3.amazonaws.com/i/h3y8fdw22qvco9807zcq.png)
8. While you are root folder, let us initialize git```sh
  git init
```
9. Now go inside the **gatsby** folder and delete the **.git** folder```sh
rm -rf .git
```
10. While you are inside the **gatsby** folder, let us install the dependencies.
  {% gist https://gist.github.com/geocine/6f2b2461c08e9ea6a472c06a0ccacc7e file=install-dependencies.md %}
11. Open the package.json file and edit the **scripts** portion. Add a **clean** property and edit the **build** property:
  {% gist https://gist.github.com/geocine/6f2b2461c08e9ea6a472c06a0ccacc7e file=package-scripts.md %}
12. Go back to the root folder. Open the GitHub repository you have created a while ago from **Creating the Repository** and copy the command highlighted. 
  ![Github7](https://thepracticaldev.s3.amazonaws.com/i/pl3yl82x9mg3utp0fflg.png)
13. While on the root folder, execute the command from **Step 12**```sh
git remote add origin git@github.com:geocine/geocine.github.io.git
```
14. Go back to the **gatsby** folder. Let us build the project```sh
npm run build
```
15. Go back to the root folder. Now let us commit our code and push it.
  {% gist https://gist.github.com/geocine/6f2b2461c08e9ea6a472c06a0ccacc7e file=git-commit.md %}
16. Now you should be able to see your site at **username.github.io**. Mine should be at **geocine.github.io**

> Note that we pushed the build files on the **master** branch and saved **gatsby** on a subdirectory because **username.github.io** only serves from the **master** branch. [See more details here](https://github.community/t5/GitHub-Pages/Is-there-a-way-to-publish-from-a-different-branch-on-a-username/m-p/29731/) 

## Development Workflow
Now that your site is up and running. I will describe the development workflow

### Editing/Development
You must be inside the **gatsby** folder when you are developing. To further know what can be configured on the template you downloaded. Just visit the repository and follow the **README**.

I will not be able to give you specific instructions on how to use a starter. Starter authors have different ways of configuring the starters they have created.

#### Editing
Open the **gatsby** folder in **VS Code**

#### Development
To run **gatsby** in development mode. While you are inside the **gatsby** folder, open your Terminal/Command Prompt and run this command:
```sh
npm run develop
```

### Deployment
Once you are finished with editing things on the starter template, you need to deploy it to GitHub.

#### Build
First, you need to build **gatsby** so that it will generate all the necessary static files for your website. While you are on the **gatsby** directory, execute the following command:

```
npm run build
```

#### Deployment
You need to be on the **root** directory which is the **username.github.io** or **geocine.github.io** in my case to push things to Github. Execute the following commands:

```
git add .
git commit -m "your message"
git push -u origin master
```

If you have any questions regarding the setup or need any help with yours, please leave a comment.