project: Hosting your website on the web

In this project, you are going to take the index.html page you made in the previous step and turn it into an actual website. You’ll be using a thing called Github pages to get this right.

Introduction to GitHub

GitHub is a web-based platform that handles a lot of things that are important to coders. It does quite a lot of different things, but we’re just going to get into the basics for now.

Github as cloud storage

If you work hard to write some code on your computer and then your computer breaks then all your hard work would be gone. That would be terrible. The first bit of value Github gives you is free backups.

You can upload your code to GitHub and it’ll keep it safe for you. It will even keep track of different versions of your code. This becomes useful if you work on big projects with multiple people.

Free hosting

GitHub has a cool feature called Github pages. If you upload your code then Github will turn your code into a live website. Your website will get a nice free URL, and anyone with an internet connection would be able to visit that URL to see your work. So cool!

Instructions

Here we go:

1. Create an account

Go to the Github website and create an account.

Important: When choosing a Github username be sure you choose something nice and memorable. You can use your real name or something playful, it doesn’t matter too much.

here is a video demonstration of how to create a GitHub account.

2. Create a repo

Repo is short for repository. You can think of it as a folder or directory.

Follow this guide to create a repository for your website.

  • Give the repo a sensible name. Eg: my-first-website
  • make sure you mark the repo as “public” and not “private” This is very important (step 4)
  • Initialize the repo with a README (step 5)

From now on you’ll be able to interact with your repo by navigating to it in your browser.

If your username is mysteryElephant320 and your repo name is first-website then you would be able to see your repo at: https://github.com/mysteryElephant320/first-website

Make sure you can find your repo whenever you want to.

3. Upload your index.html file

In the previous step of this challenge, you made an HTML file called index.html. Follow this guide to upload it to your repo.

The guide might have a few confusing words. I’ll define them briefly here:

  • commit: Every time you make a change to your code on Github, then Github will keep track of what changed. You’ll forever have access to every version of your code. Commit is just a special word for version.
  • commit message: Every time you make a new version of your code you’re making a commit. Every commit can have a message. That way when you look over your version history you can see what you did when. This gets useful on big projects or when you are working on a team because you will be able to see the whole history of the project.

You’ll be asked if you want to add your code to the main branch or if you want to create a new branch. Branches are cool, trust me, but we aren’t going to get into them right now. Just choose “main branch”

Once you have filled in the form you can save your changes by clicking on the “commit” button.

4. Check that you uploaded your file correctly

Navigate to your repo and make sure you can see a file named index.html. Make sure that the contents are what they should be. You can click on the file to see what is inside.

5. Set up GitHub pages

You’ll now use Github pages to host your website on the web.

Github pages are a really powerful thing and they can be configured to do all kinds of cool stuff. We’re going to use the simplest setup possible :)

This guide will take you through the process. You can also use the following video demonstration for reference.

You’ll be asked to choose a publishing source. You’ll just use the main branch and the root directory.

6. View your live website

Once you have set your website up you’ll be able to visit it in your browser.

If your repo is available at https://github.com/mysteryElephant320/first-website, then your webpage will be available at https://mysteryElephant320.github.io/first-website/.

Navigate to your website. Does it look the way you expected?

Note: Sometimes it can take a few minutes for the website to go live. If it’s not working then wait a few minutes and check again.

We have also created some video demos to walk you through some of the steps above:

7. Submit your work

Once your website is up and running you can submit this project.

Please submit the link to your live website by using the Project Submission form.

8. Wait a while…

Once you have handed in your work then we’ll mark it. It’ll take a few minutes. If you followed the instructions then you’ll get a positive review and you’ll get to move on to the next step.

If you didn’t follow instructions or you missed something then you’ll be given feedback about what to fix. If there is something to fix then:

  • edit your index.html file on your device and sort out ALL the problems
  • upload the new file to your GitHub repo
  • make sure that your website reflects the changes
  • resubmit your code for review

Note: You won’t be allowed to continue to the next step until ALL the changes have been addressed.

Pat yourself on the back

If you’ve gotten to this point then you’ve learned a lot. If you like dancing, give yourself a moment to dance.

You have learned:

  • what are the 3 languages of web development
  • the basic syntax of HTML
  • a few fundamental HTML elements
  • how to back your work up on GitHub
  • how to host a website
  • the pros of learning web development
  • the importance of understanding before moving forward

RAW CONTENT URL