Tutorials and hands-on lessons for learning

GitHub

GitHub is a static site hosting service that allows you to update and iterate on projects collaboratively either in the browser or locally. GitHub Pages takes your code repositories (HTML, CSS, and JavaScript, etc files) and publishes a website.

Note: The default root URL for websites published using GitHub Pages is: username.github.io

Create a GitHub account

Create a GitHub account. When signing up for a GitHub account, you will need to choose a username. When selecting a username, remember that your username will be in the URL of your website.

Create a new GitHub Repository

Once you have created your GitHub account, create a new repository. A repository or “repo” is a directory where your projects can live. A repository stores your project code files, text files, image files, you name it, inside a repository.

  1. Select ‘Create a new repository’.
  2. Name it for your map project (this will be visible in the URL).
  3. Make the repository ‘Public’. Under the free-tier, repositories must be public to enable GitHub Pages.
  4. Click the box to ‘Initialize this repository with a README'. Your README file is where you can add information about your project. Checking this box will make it easier for you to get a repository started if you are new to GitHub.
  5. Select ‘Create Repository’.

Add files to the repository

Now it’s time to add your files to the repository. In this tutorial, we will show how to add files manually as well as how to upload files from your computer.

Create a new file

Select the ‘Add file’ drop down menu. Next, select ‘Create new file’ and name the new file ‘index.html’. Paste in your html code to the blank index.html file.



Once you’ve finished inputting your code, scroll down to the bottom of the page and select ‘Commit New File’.

Upload files

You can also upload files directly from your computer. GitHub allows users to upload multiple files at once. This is useful for projects that have multiple HTML, CSS, JS, and image files. Under the ‘Add files’ drop down menu, select ‘Upload files’. Either drag and drop your files into the uploads interface or select ‘choose your files’.

Once you’ve selected all the files, scroll down to the bottom of the page and select ‘Commit Changes’.

Enable GitHub Pages

To enable GitHub Pages, go to the repository’s Settings, which you access using the gear symbol in the upper right hand corner. Scroll down to the section labeled ‘GitHub Pages’ and change the source branch selection from ‘none’ to ‘master’ and select save.



After a minute or two, your GitHub Page URL will be published online. It will look something like HTTPS:// [YOUR GITHUB NAME].github.io/[YOUR REPOSITORY NAME]/ - you can find your URL by navigating back to the GitHub Pages section in your repository settings.

Congratulations! You now have a website!

Was this page helpful?