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.



Amador UAVs

High School AUVSI SUAS Competition/Drone Club