GitHub for web hosting

GitHub is not only a code sharing and social networking site for developers. It is also a web hosting site.  Below I have outlined how to host spatial data and a web application from GitHub.  This workflow is perfect for small applications.  I have not tried this with large datasets or extensive web apps.

 

Hosting data on GitHub

A. Converting Vector Data to JSON

GeoJSON is a format for encodion spatial data using JavaScript Object Notation.  GeoJSON data stored on GitHub can be visualized and rendered through Leaflet.js.

An easy way to convert vector data into geoJSON files is by using Quantum GIS (QGIS). QGIS is a great free open source desktop GIS application which converts many different vector formats into geoJSON files.

1. In QGIS click the Add Vector Layer button. 

2. Once the layer is added to QGIS, right click on the layer in the Table of contents and select Save As.

3. Set the output Format to GeoJSON.  Specify a new name and location for the output file.  It is a good idea to put this GeoJSON in a clean directory with only JSON files you will want to upload to GitHub.

4. Click OK.

 

B. Adding GeoJSON to a GitHub repository

Now you must add this geoJSON to a GitHub repository.

1. Create a new repository in GitHub.  

2. Open a GitHub Shell and navigate to the directory that is storing your geoJSON files by using the CD command.  IE.  cd d:\projects\data

3. Now you will initialize the folder as a GitHub repository on your local machine.  To do this type git init and click Enter.

4. Next, type in git add <name of your geoJSON file>

5. Type in git commit -m 'first commit'

6. Next type in git remote add origin <your reposity name, such as https://github.com/boehnert/data.git> This command will link your directory on your local machine with the GitHub repository.

5.  And finally type in git push -u origin master

6. In the Web Browser log into GitHub and navigate to your new repository. You should now see the geoJSON file.   Click on the geoJSON file and a map should appear displaying your data.

 

Using GitHub to host web applications

C. Create your own application to display the data using Leaflet

There are many examples available on the web to get started with Leaflet.  Click here to view some Leaflet code examples.  The tricky thing for me was how to access your spatial data on GitHub using Leaflet.  There are many different ways to do this.  I found that using the jQuery getJSON() method was the most direct.  Thanks for Lyzi Diamond @lyzidiamond for the example.

Below is how I structured this method for my data on GitHub.

$.getJSON("https://rawgit.com/boehnert/GeoJson/master/HeatIndex.geojson", function(data) {
var jsonHeat = L.geoJson(data, { 
style: style,
onEachFeature: onEachFeature
}).addTo(map);

 

My leaflet example can be viewed on GitHub at https://github.com/boehnert/webMapping.

 

D. Use GitHub to host your web application 

In order to use GitHub to host your application you will need to set up a gh-pages branch in your repository.  I followed this YouTube video in order to set up GitHub as my web host.  

Here are the steps I followed.

1. On GitHub, create a new reposity which will store your web application.

2. Open a GitHub Shell and navigate to the directory that is storing your javascript files by using the CD command.  IE.  cd d:\projects\webpage

3. Now you will initialize the folder as a GitHub repository on your local machine.  To do this type git init and click Enter.

4. Next type in git remote add origin <your reposity name, such as https://github.com/boehnert/webpage.git>.  This command will link your directory on your local machine with the GitHub repository.  You will see this command on GitHub under how to push an existing repository from the command line.

5. Now you need to create a branch called gh-pages from GitHub and switch to this branch.  Type in git checkout -b gh-pages 

This command with switch to the gh-pages branch in the repository.

6. Now just commit everything in the folder to your repository by typing in git add . and git commit -m 'initial commit' 

7. Finally push your project up to the branch gh-pages by typing in  git push origin gh-pages 

8. Now your project is up on GitHub.  In a web browser log into your GitHub account and view the project in the gh-pages branch.  You can also view the web site using your http://<GitHub handle>.github.io/repository name.  My final website can be viewed at http://boehnert.github.io/webMapping/