Website Part 1: Why we switched to Github Pages
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 — amadoruavs.com
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>.github.io, 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 https://pages.github.com.
1. You need a Github account for yourself or your organization
2. Go to github.com and create a repository named “account-name.github.io”. 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 https://www.github.com/username/username.github.io
$ cd username.github.io
$ echo "Hello, World!" > index.html
$ git add .
$ git commit -m "Initial commit"
$ git push -u origin master4. Wait for ~ 10 seconds to make sure the servers have time to referesh, then open up a tab in your browser and go to https://username.github.io
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.
