Website Part 1: Why we switched to Github Pages

Amador UAVs
4 min readApr 13, 2019


by Kalyan Sriram

When I first wrote our website a while back, I had to choose a good way to build a modern website. So I turned to the “cool kid” approach by using Angular2. For those who don’t know, Angular is a web framework based on node.js that helps you build modular, scalable Single Page Applications for the web. A Single Page Application is unlike your traditional website: instead of loading a separate HTML file for each page, the layout shown on the screen is asynchronously loaded and rendered onto a single page. This allows a multi-page setup without reloading, which results in a more native experience.

Although I won’t go into much detail here, here are the basic steps I took:
1. Install node.js (if you don’t have it), Angular, & other dependencies
2. I used MDB(Material design for bootstrap) as our CSS stylekit, since I don’t prefer to write my own CSS.
3. I used Google Firebase to store data and images
4. Google Domains for our custom domain —
5. Nginx as the webserver
6. Host on a Raspberry Pi 2 running at my house

A few comments/problems on the above steps:
MDB — bootstrap is cool and all, but its not as user friendly as I would like, and is a bit large. Probably doesn’t matter too much, but I like lightweight stuff.
Firebase — also really cool, but probably not meant for what we were doing, which is asynchronously pulling images, etc. to render on our pages.
RPI —Due to our club’s limited funding, I was hosting on an RPi. The Raspberry Pi is a great piece of tech, and I’m a fan. However, it can be a bit slow for running a webserver 24/7. And that webserver wasn’t the only thing I was doing on it. Also, my limited network connection(yeah its fast but not datacenter level) proved to be a challenge.

Long story short, as our website grew in size (especially with images), our existing solution became irritatingly slow. So I decided to find a better solution.

Introducing: Github Pages
Github Pages is a hosting service provided by Github. It serves static HTML/CSS/JS websites for you. “Static” meaning you can’t use PHP/backend server code to run — so no databases. However, this was fine for us as we didn’t really see a need for this functionality. Github allows you to store “1 user/organization site and unlimited project sites” so you can have a home site for yourself, and still showcase each of your projects. And the best part: it’s completely free!

Why Github Pages solved our problems
1. I don’t have to worry about maintaining a server and keeping it on 24/7
2. Pages runs on a fast server somewhere at Microsoft, probably connected with 10Gbit+ network speeds.
3. No need to setup a webserver, configure, and manage it, as well as making sure it’s secure and fast.
4. Free domains are listed as <xyz>, and it’s easy to configure a custom DNS if you have your own domain.
5. Pages will automatically serve content that’s on the master branch of your website’s git repository — if it’s pushed to github of course :).

Downsides to Github Pages
1. Static — you aren’t able to run any server-side code, which means no databases, email sending, user accounts,etc.
2. Not much control over custom webserver configuration.
3. You can’t use your regular nodejs/django/rails workflow unless you compile to static html.
4. If you want your website source code t be private, you will need to have a premium tier of Github.

How to Setup Github Pages
Setting up an organization site on Github Pages is suprisingly easy! I’ll go over the basic steps below; more information can be found at
1. You need a Github account for yourself or your organization
2. Go to and create a repository named “”. Note that your repo will be public unless you have a payed Github account.
3. Open up a terminal on your development machine with git installed (or do the following in the graphical git interface of your choice):

$ cd ~/path/to/site/source
$ git clone
$ cd
$ echo "Hello, World!" > index.html
$ git add .
$ git commit -m "Initial commit"
$ git push -u origin master

4. Wait for ~ 10 seconds to make sure the servers have time to referesh, then open up a tab in your browser and go to

And that’s it! Now you can write your website, or copy over your existing one.

As you can probably tell, I haven’t talked about how to solve some of the problems like CSS, etc. In the next part, I’ll talk about writing easy websites with Jekyll.