Skip to content

Hosting on github

NieneB edited this page Mar 26, 2019 · 2 revisions

Hosting on Github

▶️ Head over to GitHub.com and create a new repository name it: MyFirstVectorMap

▶️ Give your repository a nice description. Like:

My First Vector Tile Map in Mapbox GL JS made during a Webmapper workshop

▶️ Setting: Public

▶️ Initialize this repository with a README.md

▶️ Create Repository

Now we have our own repository!

Uploading files

▶️ Upload all the files you need for your map.

  • index.html
  • main.css
  • main.js

❗ You can only host 1 page per repository. So put in only 1 index.html!! If you want to show multiple maps, create multiple repositories!

Hosting with GitHub-Pages

GitHub has this awesome trick! If we change our main branch to a GitHub Pages branch and put a index.html file in there, GitHub will host your website!

▶️ Click on the Settings tab and scroll down to the GitHub Pages section.

▶️ Then select the master branch source and click on the Save button.

GitHub Pages Source Setting

Fire up a browser and go to http://username.github.io/repository. Change the user-name in the link to your own GitHub user name and the repository to your repository name!

🔗 Read more about it here: https://pages.github.com/

Editing the README.md

The README contains the text that is shown at the bottom of your repository. This usually contains a small explanation of what the repository is about and links to useful other sources. Let's edit our README.md in the browser to customize it!

▶️ Click on the README.md file and edit it by clicking the edit button.

▶️ In the README.md put the following:

# My First Vector Tile Map in Mapbox GL JS

This repository contains the scripts and data for my first interactive web map made with Vector Tiles.

You can view my map <[HERE](http://username.github.io/repository)>

▶️ Change the user-name in the link to your own GitHub user name and the repository to your repository name!

▶️ Commit changes.

Now share your link with everyone!

▶️ E-mail your link to niene at webmapper.net

Send me the link to your map, your name and some nice comments, tips and tops on this workshop. I will make an overview of all the maps made today!

▶️ Now share your link with all your family and friends!

This was it! Thank you for joining this workshop.

Keep mapping!

Clone this wiki locally