Creating a Portfolio Website Using GitHub Pages and React: Part 1

#react #github #javascript #portfolio

Part 2 on how to get started with your GitHub Pages and React app is available here.
Part 3 on how to use a custom domain name is available here.

As a recent graduate from the Flatiron School Software Engineering program, I've just begun my job search and have been trying to grow my online presence. One important aspect of this has been creating my own portfolio website. In this post, I'll be discussing why a portfolio is essential for any new software developer and why GitHub Pages and React are great tools for creating it.

In future posts, I'll be going step by step through the process of creating a portfolio website using GitHub Pages and React, so stay tuned!

Click here to see the website I've created using GitHub Pages and React.

Why Create a Portfolio Website?

If you're a developer, it's likely that you already have a variety of platforms where you talk about your projects and experience. Why then bother with an additional portfolio?

1. It gives you more flexibility than other platforms

While LinkedIn and GitHub are fantastic tools for showing potential employers what skills you have and what projects you've worked on, you can't always personalise your page in the way that you'd like to. Having your own portfolio website allows you to show exactly what you want to show in the way that you want to show it. It's like having a resume but, instead of trying to fit everything onto one page, you have the space to show as much as you'd like and to draw attention to anything you think is important.

2. It allows you to show what you can do

Personally, I would love the opportunity to become a front-end developer and many of those roles ask for languages and libraries such as JavaScript and React.js. By building my website using React, I'm able to actively show potential employers what I can do with those tools and hopefully impress them with aspects I wouldn't be able to show as effectively on my resume.

3. It keeps you coding

As any fellow bootcamp grad knows, completing an intensive program is tough and it can be really tempting to take a break from coding. While it's definitely a good idea to take a couple of days off every now and then, you should never stop coding altogether. It can seem hard to find time to code, especially given how much you have to do when beginning your job search, for instance trying to put your resume together, getting those project demo videos recorded, and developing your network. For me, creating my portfolio website was a great opportunity to feel as though I was working on my job search while still keeping my coding skills sharp. It also gives you the opportunity to learn new things, shows employers that you're still working on projects, and keeps your GitHub contributions in the green.

4. It's fun!

For me, one of the most enjoyable aspects of creating my portfolio website was being able to make something in exactly the way I wanted to. While there were certain things that I knew I had to include, I had free rein over the look and functionality of my portfolio. It was nice coming from the bootcamp world of rules and regulations with regards to projects and instead being able to make something that looked and worked exactly how I wanted it to.

photo by @richygreat

Why Use GitHub Pages?

GitHub Pages allows you to turn a GitHub repository into a website. GitHub looks for web content on the master or GitHub Pages branch tied to your personal URL (more on this below) and builds your site for you in a matter of seconds. There are many options out there in terms of how to get your website online, so why choose GitHub Pages?

1. It's easy to use

As I'll cover in the next post, GitHub Pages is incredibly easy to use. Starting out on my job search, I wanted to get my site up and running as fast as possible, without having to worry about setting up a database or configuring a server. Because I already had a GitHub account which I used on a regular basis, I was familiar with the GitHub interface and flow, so the process of setting up a GitHub Pages site wasn't too much of a leap. Even if you don't have a GitHub account or don't feel very comfortable with how GitHub works, I'd still recommend using GitHub Pages. GitHub is essential for any developer to know how to use well, so this is the perfect opportunity to get familiar with it.

2. It's free

Yes, 100% free, making it the perfect option for your first website, especially if you're in the process of looking for a job. As I'll talk about below, you might choose to invest in a custom domain name, but it's not necessary if you're happy with the standard version.

3. You can add your own custom domain name

When you create your site, it will initially be available at http(s)://.github.io (for instance, http://iona-b.github.io). While this domain name might suit your purposes, you may want something a little more personalised. You can purchase a different domain name at a number of sites at an affordable price and make your GitHub Pages site available there.

4. It's open source

GitHub is fantastic because it actually allows other users to see what your code looks like (as long as you're working in a public repository). That means that you can show people the interesting ways in which you've solved particular problems, provide examples to other users, and generally contribute to the coding community.

5. You can make changes and redeploy whenever you like

Once you've deployed your website, it's really simple to make updates and redeploy. If you've ever used GitHub before you'll be familiar with pushing changes and it just takes one extra step to redeploy your website.

photo by @sapegin

Why Use React?

There are different options when it comes to building your website with GitHub Pages and React is by no means required. For instance, you may want to use GitHub's recommended static site generator, Jekyll to build your website. Why then did I choose to use React?

1. It's a great way to improve your React.js skills

I personally love using React, so choosing to utilise it for my portfolio website wasn't a hard decision. If you already have experience working with React, this should be a fairly intuitive process. Depending on what you want to show, you can make it as straightforward or complex as you like and it's a great way to continue building on your skills. If you've never worked with React before, this could be a great opportunity to learn something new. There are so many fantastic React.js tutorials out there and it's easy to keep your site simple while you develop your skills. Once you become more comfortable with it, you can always add more features.

2. You gain access to many amazing libraries

Working with React gives you access to a variety of different libraries which allow you to further personalise your app. Want to add videos? There's a library for that. Want to add CSS specifically geared towards React? There's a library for that. Want to create a game using Unity and have it in your React app? Yep, there's also a library for that.

3. There's a really strong React.js community

No matter what question you have when it comes to working with React, somebody will have answered it somewhere. React is supported by Facebook and Instagram engineering teams, as well as dedicated experts, and there is a wealth of documentation, Stack Overflow discussions, Dev and Medium blog posts, and other resources to help you along in your React journey.

In future posts, I'll be working through exactly how I built my website using GitHub Pages and React. See you then!

Part 2 on how to get started with your GitHub Pages and React app is available here.
Part 3 on how to use a custom domain name is available here.

Sources

"About GitHub Pages", GitHub Docs, Accessed October 8, 2020
"Setting up a GitHub Pages site with Jekyll ", GitHubDocs, Accessed October 8, 2020
"What is GitHub Pages", GitHub Pages, Accessed October 8, 2020

Top comments (4)

DeQuan Mitchell • Jan 8 '21

Great tips, thanks! I am about to begin my final quarter in Kenzie Academy's SE Program and one of our instructors linked to this article in a Slack channel. I have been kind of spinning my wheels as I figure out how to start creating things and putting them out into the world. The GitHub Pages and React information really helps me to start to make a mental model of how to begin. Thanks again and I hope you found a sweet job! Your portfolio site looks amazing!