Tech + Talk

what's happening at brio and beyond

Host Your Static Website on GitHub Pages for Free

You’re a student who is looking for a place to host your web development assignments containing only HTML/CSS and JavaScript?

You’re a fresh college graduate who wants to show off your online portfolio while applying for a front-end development position?

You’re a small business owner who wants to create a simple website for your company?

And most of all, you want a FREE web hosting service? 

If you say yes to any of these, GitHub Pages is here for you. 


1. Overview of GitHub

GitHub Pages is a static site hosting service that allows you to host your pages directly from your GitHub repository. You can use either Jekyll Theme Chooser, which will be covered later in my next blog, or your own code to create and publish the pages. Below are pros and cons of GitHub Pages that I have learned so far.

Pros
  • Free
  • Quick setup and instant deployment
  • Offer version control (Git)
  • Users don’t have to worry about DNS registry if they’re satisfied with the default GitHub domain: github.io
  • Users can customize the GitHub domain by replacing it with their own registered one

Cons

  • Doesn’t support server-side programming language such as PHP, Ruby or Python
  • Just like other free web hosting service, GitHub Pages sites have certain usage limits. 
  • Published GitHub Pages sites should not exceed 1GB.
  • Soft bandwidth limit: 100GB/month
  • Soft limit of builds: 10 builds/hour
  • Not appropriate for sensitive transaction involving sending passwords or credit card number
Warning: GitHub Pages highly recommends its users not to store sensitive data in Pages repository because the sites hosted on GitHub Pages are public.

2. Host your website on GitHub Pages

Step 1: Create a new repository


Step 2: Name your repository in this format: username.github.io. Select Initialize this repository with a README → Click Create repository


Step 3: Clone repository by clicking Clone or download → Click Open in Desktop


Step 4: You will be redirected to another page to download and install Desktop GitHub


Step 5: In Desktop GitHub workspace, click Clone a repository → Locate the local folder that you want save your code. Desktop GitHub will clone your repository on GitHub into this folder.


Step 6: Copy all source code to that local folder → Click Commit to master → Click Push origin to push the code to GitHub

Congratulations, your site is live now! Open your page in a browser. The URL should be https://username.github.io

Duyen Doan just graduated from La Salle University and has been interning with Brio Solutions since June 2017. She never wrote a blog before. However, she realizes that blogging is a great way to sharpen her knowledge and share what she has learned with everyone.

Categories: Technology, Web DesignNumber of views: 505

Get in Touch

Tell us about your project. We'd love to meet you!