Building and hosting Portfolio with Gatsby and GitHub Pages

Published in

Analytics Vidhya

5 min readJul 8, 2020

I am an ML developer and knows very little about web-development, I needed to showcase my skills to the world so I recently made a portfolio for myself in just 2 days. Have a look at it.

Do you liked it? Well, you could also make a pretty interactive and beautiful looking portfolio for yourself in a very little amount of time. In this tutorial we would be focusing on learning how to get a starter-template from Gatsby to build a portfolio and hosting it on GitHub Pages so that you can share it with anyone and anywhere easily.

A Portfolio is like a GPU to the system. It boosts your presentation skills and showcase your work to everyone so you don’t need to describe about it very much. Addition of sections to the portfolio is completely upto you. The possible sections to add could be — Summary of yourself, Projects, Writing work, Certifications, Work Experience, Open Source Contributions, Education and Contact information. However one can also add other sections if he/she finds that appropriate for the portfolio. I would recommend to take some time to make a structure of which sections to add, where to add etc. and then start building it. I would also add a link to the portfolio templates that I found interesting at last.

We would be having following parts in this tutorial—

o Building a Gatsby Site

o Hosting site to GitHub Pages

o References

Building a Gatsby Site

First let us know about what Gatsby is. From the official documentation —

Gatsby is a free and open source framework based on React that helps developers build blazing fast websites and apps

It’s pretty clear from the definition that it is a React based static site generator. Anyone with an experience of React would work seamlessly with Gatsby. We can build beautiful web-apps without having to think much about web integrations and building static web-pages. Gatsby helps in internalizing performance patterns and best practices like PRPL, route-based code splitting etc.

If you are not a professional React developer (like me) you can select and download a base template from here. It has a large collection of free templates that you can download and edit to build up your web app faster.

If you want to build the web-app completely from scratch or want to get familiar with the workflow of Gatsby, you could also follow the tutorials offered by Gatsby here. However if you are not related to web-development field and also not willing to make a career with it, you must not waste your time building the project from scratch instead utilize it to improve your site. The discussion of the complete code for building Gatsby sites is out of scope for this tutorial however I would try to add links to the tutorials down below to save your time.

The template I used as a Base Template to build my portfolio can be found here.

One of the most exciting things I loved about Gatsby is that we can locally host our sites, work on it and when its ready, we can publish it. I also loved its Hot Reloading feature which reloads your site as soon as you make any change to it.

Okay, so now I am assuming you have downloaded the template( or built the site from scratch ) and manipulated it to build your portfolio. Sounds good!😃

Hosting site to GitHub Pages

So now what! How would you showcase your portfolio to the world? By sharing code with everyone? Oh c’mon! I know you won’t do that. As far as I know you would need a platform to host your site right?

There are plenty of available platforms which helps you host your site but the most convenient platform I find is GitHub Pages. We can easily host a Gatsby site to GitHub Pages. The reason I use this platform is my love for GitHub and also we are not doing anything hard and challenging when it comes working with git workflow.

Before moving on to setting up the GitHub pages, we would do some configurations. First let us install the gh-pages package which helps to push a Gatsby app to GitHub pages :-

npm install gh-pages

This will create a sub-directory named gh-pages inside the node_modules directory. To learn more about gh-pages visit —https://www.npmjs.com/package/gh-pages

Next open up the package.json file ( available in the root directory of the project ) and add a new script to it —

“deploy”: “gatsby build && gh-pages -d public -b master”

An overview of the scripts after addition of the “deploy” variable.

Now for hosting your site on GitHub Pages, you must have an active GitHub account. If you currently don’t have one, follow this tutorial to setup and configure your GitHub account.

After setting up of the account, login to it and create a repository with name of the root subdomain i.e username.github.io (here username is your GitHub handle).

Img source — https://guides.github.com/features/pages/create-new-repo-screen.png

Now the next step would be to connect to this remote repository from the local machine. Simply open git bash (if OS- Windows) or terminal (if OS- Linux) and write the following command —

$ git init
$ git remote add origin {https/ssh link to the repository}

Now on your local machine run the following command —

$ npm run deploy

This command will search package.json/scripts for the variable “deploy” and execute the command corresponding to this variable.

This will create a folder named public containing static HTML and Javascript files and deploy its contents to the master branch of the added remote repository. Now open up your repository, you will that see some new files are added to it.

Note — If files are not visible refresh the browser tab 2–3 times, it would be visible then. It takes some time to push the changes depending upon the Internet connectivity and system configurations.

Now navigate to Settings and scroll down to see the heading GitHub Pages. You would see something similar to this —

Don’t worry about the ‘Caution’. Its because I have made my repository private. But you could make it public/private depending upon your choice. If the Source is not currently set to master branch, set it to master. Your site would now be publicly available at username.github.io ( username — your GitHub handle ).

However there are few more other ways you can publish your Gatsby site to GitHub pages. I would also add a link to that tutorial.

So, that’s the end of it. Hope you enjoyed the tutorial! If you followed the tutorial please share your portfolio with the community as it would help others learn from it. Thanks!