Website on 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.

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.

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.

1. Click the “Settings” tab at the top of the repository.

2. Scroll down a little and under the “GitHub Pages” section, where it says “None”, select “master branch”. The change will automatically save.

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-design 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:

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

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

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.

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

Then save!

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.

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.

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

The URLs always look like this:

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.