As I am now about two months into my job search, I have been in the process of working on my portfolio website and am almost ready to feature it on my online accounts, LinkedIn profile, or basically anywhere where anyone can see it. Through working on this site, I have gained more insight on how to host websites using GitHub Pages, Heroku, and Netlify.
A great portfolio website is sort of like a visual well-written resume. A site that serves this purpose well should be appealing to the eyes of hiring managers, coworkers, technical recruiters, as it makes for an important part of every software developer’s career. From my point of view it is important because it showcases my projects and my skills and shows what my technical skills look like all in one place.
3 key takeaways I have learned which I will be covering are
- How to use GitHub Pages
- How to solve common errors during Deployment
- It was easier than I thought it was going to be
In the beginning it seemed like a daunting task to even think about creating a hub where all my projects could be hosted online using GitHub Pages, Netlify, and Heroku. However as with any new projects with software, it’s all about getting organized and having a strong vision for how the final product should look like. Trying not to be intimidated, I knew that one of the best ways to learn something was to list the requirements for what I wanted to see.
My requirements list went something like this:
- A nav bar
- A contact/social media section
- A place to feature all my projects
- A place to feature my most recent projects
- My blog’s preview section
- An about me area
Once I had my requirements, the next step was to learn how to use GitHub Pages.
How to use GitHub Pages
To use GitHub Pages, I began to follow the guide found on GitHub’s website at https://pages.github.com/. It starts off by creating a new repository based on your GitHub username…
…then it has you select which git client you are using. What this really translates into is simply stating whether you are using your local CLI terminal or GitHub’s desktop application. Like so:
Once an option is selected, it will show different instructions based on your selection. In my case, I used my local CLI terminal to clone my repository by typing the command:
git clone (copy and paste HTTPS link or SSH for your repo under the green code dropdown button area here)
After typing that, I cd’d into my website’s folder with this next command and created an index.html page as instructed:
cd username.github.io~$echo “Hello World” > index.html
Then I used the ever famous, git add => git commit => git push commands to commit my changes:
git add — all
~$git commit -m “Initial commit”
~$git push -u origin master
At that point once you add and push code to it from your text editor terminal, if you open https://(put your username here).github.io then you will be able to see your site hosted online.
I would say that the advantages of using GitHub Pages for my portfolio site included the fact that it was easy to get started/update changes compared to using Heroku or Netlify. Plus some good looking built-in themes are available for use from GitHub, if you follow the project site section instructions on the instructions page looked at earlier (https://pages.github.com/).
Another advantage would be the commands to set up the site were already in a format I was familiar with having used GitHub from the beginning. This is another one of the reasons why I would suggest GitHub Pages to any developer wanting to host a website quickly. With a pretty simplistic process there are no deployment errors commonly seen here, which leads me to my next point.
Common Deployment Issues
Not putting the Procfile in the right place
To make things more clear, let me explain my definition of what a Procfile is…
A Procfile is a file that needs to be added to Heroku apps to give commands to an app when it starts up using Heroku’s server. Before apps are deployed, they are developed using someone’s local computer address. An example of this would be localhost:3000, which is the default port that runs on a local computer for making a React framework app.
What I did incorrectly is I didn’t put my Procfile in the root directory of one of my Ruby apps which is why it gave me the error looking like this:
To debug this issue, I first checked the logs through Heroku’s main site, but didn’t get any clear clues. The logs just told me that the app changed from starting to crashed when I tried to deploy it. Next I looked through my backend side of my app looking for syntax errors, especially in my config/database.yml file, but nope I couldn’t find any. I traced the path of where I thought the code was running through each step of it being rendered to the page, but the code all made logical sense, which was a bad thing for once because I really wanted to find a clear error right about now.
That’s whenever I reviewed the Heroku documentation and saw again that it explicitly said:
The Procfile must live in your app’s root directory. It does not function if placed anywhere else.
I re-looked at where mine was and it was definitely not in the root directory! Now it was no wonder the file couldn’t be found by Heroku. I quickly changed its location and voila; a simple and easy fix.
2. OAuth problems with Google
For one of my Ruby on Rails apps, my app deployed perfectly and Heroku gave me no errors, or so I thought. When I clicked on “log in with Google” on my app I immediately saw an error message rather than seeing my Google OAuth button log the user in correctly. I cannot remember the exact words on the page, but it went something like this: Error: Missing client id.
At first this made no sense to me, it was working just fine on my local computer in development when tested over and over again, so how could it not be working with hosting it on Heroku?
Stack Overflow eventually answered my question indirectly when googling the search term “missing client id error for Google OAuth”. To explain it briefly, the way Heroku is set up, it requires the client id and the client secret from my Google Developers account to be in the Config Vars section in the Heroku settings. Without pasting these values into the settings, the client id and client secret will only be in my git ignore file and not be accessed by Heroku behind the scenes when users visit my site. After adding these values and refreshing the page, the app Google account login worked perfectly.
Easier than I thought
Overall this drawn-out experience of hosting all my projects into my portfolio site was not too difficult.
Thanks to the documentation from Netlify/Heroku, GitHub Pages’s guide, and a few hours of YouTube videos, it wasn’t as hard as I thought to figure out how to apply the steps necessary to have each of my projects turn into websites shown live.
A few of these step categories to getting each of the individual projects set up as live sites included setting up backend databases for deployment, setting up a Procfile, and figuring out the right CLI commands to use based on the languages and frameworks I was using. Yes I ran into some bugs here and there, but that was expected. Hosting sites is an essential part of the process of creating a functional website and I look forward to solving plenty more deployment specific bugs when working for a lucky company one day.
This visual resume is just about finished and almost ready to be linked to my accounts for the big beautiful world wide web to see.