Website on GitHub

Create a repository on GitHub, set it up to host a website, and launch a single page site.

  1. Video or tutorial

    You can watch the video(s) or follow along with the written tutorial—or both—they convey exactly the same information.

1 Sign in to GitHub

We’ll be using GitHub as our code version control system—and our web host.

We’ll put all of our coding exercises on GitHub where they will be live websites visible to anybody.

  1. Reminder

    For most coding exercises you won’t need to perform these steps, you’ll be using Markbot to hand in all your work.

2 Create a new repo

Before starting this project we need to create a repository on GitHub. The repository will hold all of our website code, all the history of our project, and be our host.

When we get to the new repository page there’s a few fields to complete.

  • Repository name — create a unique name for the repo, make sure it follows the naming conventions.
  • Description — come up with a short description describing the purpose of the project.
  • Public/Private — choose “Public” because we don’t have a paid accounts.
  • Initialize this repository with a README — always make sure this is enabled.
  1. Naming conventions

    Don’t forget to follow the naming conventions.

3 Set up for hosting

Before we write any code we’re going to set up the code repository so it’s a live, hosted website.

By default the code stored on GitHub isn’t assumed to be a website—any code can be store on the service. We need to opt-into the free website hosting that GitHub provides, named GitHub Pages.

4 Clone to computer

After our repository is created and set up we need to clone (copy) it to our computer by pressing the “Clone to desktop” button.

The GitHub Desktop application will pop up and ask you where to save the repository. Put it into your web-dev folder—you don’t have to make a folder specifically for this repo, the app will make it for you.

Then click the “Clone” button:

5 Open in code editor

We can now open up the project in our code editor.

Drag the folder that was created to your code editor in the Dock.

6 Add an HTML file

We’re ready to make a new HTML file.

Go to File > New or press ⌘N to make a new file.

  1. first-website
  2. index.html

Immediately save the file. Call it exactly index.html. Put it into the first-website folder.

  1. Naming conventions

    Don’t forget to follow the naming conventions.

  2. Shortcut

    Use ⌘S to save.

  3. Shortcut

    Use ⌘⌥N to make, name, and save a new file in one step. Only works when a folder is open in your code editor.

7 Write some code

In the index.html file write a little bit of HTML:

<h1>It works!</h1>

Then save!

8 Test the website

After saving our HTML we need to test it in a web browser to confirm it works.

Use Chrome or Firefox to test websites while developing—Safari isn’t good enough.

Double click on the icon in Finder to open it in the browser.

Make sure it looks all good in the browser.

Leave this tab open all the time while working to easily jump back and forth.

  1. Reminder

    Leave this tab open while working and jump back to the window with ⌘Tab when you want to test—press ⌘R to refresh the browser.

  2. Shortcut

    ⌘S, ⌘Tab, ⌘R, ⌘Tab, repeat.

9 Commit & sync

When happy with how it looks in the browser it’s time to make a commit to save the state of our code.

Make sure to write a descriptive message!

Then send it to the GitHub website with the “Push” button.

  1. Shortcut

    ⌘Return to save the commit.

  2. Shortcut

    ⌘P to push your changes.

  3. Best practices

    Refer to the commit messages cheat sheet for the commit best practices.

10 Test the live website

After syncing our website will be live, online, at a specific URL.

The URLs always look like this:

https://username.github.io/repo-name/

Find the URL on the GitHub website under the repository’s “Settings” tab.

And you should see your website! The URL is completely open to anyone in the world.

11 Fork instead…

For all the code exercises in class we don’t have to go through the process of setting up for hosting—the assignments are all ready.

We’ll be using the fork & pass tests method with Markbot to hand in all work. That lesson comes next ➔