Build your own website on GitHub for FREE

Photo by Pankaj Patel on Unsplash

Did you know that you can build your own website on GitHub for free?

You can! I have!

What is GitHub? What is GitHub primarily used for?

GitHub is typically used as a code hosting website that has versioning control, so it makes it really easy for you to revert any changes that you may have made that has “damaged” your production instance. It also makes it really easy to collaborate with other developers all around the world. There are numerous actions that can be performed on your branch, but I’m not going to dive deep into all of the different things about GitHub, I just wanted to provide a general overview.

What is GitHub Pages?

GitHub pages is a way that you can host a website about yourself, organization, or a project from a GitHub repo!

Link to their documentation on how to get started: https://docs.github.com/en/free-pro-team@latest/github/working-with-github-pages/getting-started-with-github-pages

Why should you build your own Website?

There’s many reasons why you would want to build your own website, but the main reason is for personal brand. Typically we think of photographers that have a website because they need a centralized location to showcase their work along with a method of contacting them if needed.

The reason why I decided to build my own website was to learn more about what goes into building a website. You’re able to drill into the HTML, JQuery, and CSS that goes into making your website! There are some tricky things like building out a Contact Me form, but I’ve found a way around that by using Google Forms!

With Google forms you can export your form into an iFrame that can be embedded into your website (check out a screenshot of mine below). You can also set up notifications for when someone fills out your form.

Google Form viewers see when they click “Contact” on my website

To set up the notifications when someone fills out your form you go to: Tools > Notification Rules. From there you can decide how often you’d like to receive email notifications when someone has filled out your form!

Email Notification Frequency Selection

Pros & Cons of GitHub Pages

Pros

  • More customization in terms of what you want on your website (layout, color palette, etc.)
  • You have more memory to work with (vs the allotted space on websites like Squarespace, etc.)
  • It’s simple to make your website secure with HTTPS (paragraph on this later on)
  • Free default domain is provided to you
  • They do security scans of your code to let you know if there are patches that should be added to fix a vulnerability
Security Alerts generated by GitHub

Cons

  • You will have to build everything from scratch (or you can use a Bootstrap template — which is what I did)
  • You have to monitor your website and check for new vulnerability releases on your own (from the security dashboard)
  • Updates to your website won’t be “real-time” (there’s about a minute delay that I’ve experienced after pushing changes to my master branch

How to use GitHub to host your personal website for free?

GitHub has great documentation on how to get started with your repo (link listed above). The only caveat with this is that if you do not want to spend money on a personalized domain (ex if I wanted https://jean-tu.io vs the given https://jean-tu.github.io) then you would need to have

How to make your GitHub Page more secure?

There is a thing called the Secure Socket Layer (aka SSL) that is used in HTTPS; whereas, in HTTP it is not used. High level, that means that if your website if using HTTP, the information being sent to your viewer is NOT encrypted. Which is a no-no. The viewer would also NOT have an image of a little lock next to your URL, but rather a “Not Secure” message, so to avoid that we just have to enable a feature within the repository hosting your website within the GitHub settings.

Taken from: https://www.cloudflare.com/learning/ssl/what-is-https/

Millennial based in the South Bay Area blogging about topics that I care about: Productivity⏰ | Food 🍽 | Hiking 🥾