Now that you’re an HTML/CSS wizard, let’s actually put your page online, so that everyone else can admire it! We’ll do this with a tool called GitHub Pages. In order to use it, you will have to sign up for an account with GitHub. (If you don’t want to do that, please talk to me about alternatives.)
Here, I explain more about what GitHub is and why I’ve chosen GitHub Pages for you to learn.
Go to GitHub and sign up for an account. You may have to verify that you’re a human, and on the next page, please select the free account and press Continue. You can enter your interests on the next page or just skip that step.
On GitHub, repositories (“repos”) are something like folders. People create them to hold projects or chunks of code. We’ll create a repo for our website.
Click on Create a repository. You may need to verify your email address before you proceed.
GitHub is set up so that if you put HTML files in a repo with a very specific name, GitHub will understand that you want to create a website.
In the field labeled Repository name, name your repo according to this pattern:
In the name above, replace yourusername with your actual username. So, for example, I would name my repo
The .github.io part is important, as is using your exact username before .github. My username is miriam-test, which is why I named the repository as I did.
Be sure this is exactly right, or your page won’t work.
You can leave the other fields as they are and press Create repository.
Now you have a place where you can put the HTML and CSS files you created earlier. Let’s upload those files.
Click on uploading an existing file.
Drag both your index.html and your style.css files to the box labeled Drag files here to add them to your repository.
Once you’ve dropped your files in the box, you need to Commit changes. This is a Github thing. Every time you save changes to a repo, you write a “commit message” that summarizes what you’re changing. Here are some examples:
- Fix typos
- Add documentation
- Add CSS styling
They should be fewer than 50 characters. When you first upload something to a repo, you can use the commit message Initial commit. You can expand on your message in the body text box. When you’re done, press the Commit changesbutton.
Now your website is live! The URL of your site will be yourusername.github.io, where yourusername is actually your username. For example, my website is now miriam-test.github.io.
You may need to give your website a few minutes to go live. If you’ve waited more than five minutes or so and it still isn’t working, it’s probably related to a specific problem GitHub Pages sometimes has in finding your index page. Try entering yourusername.github.io/index.html.
If you’d like to make changes to your website, there are a couple ways to do it. The first is to edit the file directly from GitHub. You can do that by clicking on the file and then pressing the edit button. (It looks like a little pencil.) When you’re done making changes, you’ll need to write a commit message again.
The second way to make changes is to edit the files on your computer, in your text editor. When you’re done making those changes, upload the file to GitHub (in the same way you did in Step 5), making sure that the files have the same names as they did when you uploaded them the first time. This will overwrite and replace the previous versions of your file, much like saving a Word document to a folder that already contains a Word document with the same name. Again, you’ll write a commit message.
Now you’re an HTML/CSS/GitHub Pages expert! (Almost!) This is a lot of manual fiddling, though. There’s actually an easier way to build and publish a website, and we’ll investigate that now.