Build a Personal Website with HTML and CSS (Part 3)

In the final part of this guide, we are going to use Github Pages to host our site for free.

Note: This tutorial was made for a workshop for Santa Monica College Computer Programming Club. Some information may be missing from the text.

Get on Github

Create an account on Github, or sign in if you already have an account.

Go here, or click the “New repository” button to create a new repository. Name your repository username.github.io, where username is your Github username. Check the box that says “Initialize this repository with a README”. Add a description if you’d like, then click “Create repository”.

You will be taken to your new repository. Click the “Upload files” button. Drag the contents of your project folder into Github, or select the files from the file browser. The files you need to upload are:

img
└── profile.jpg
index.html
style.css

Click “Commit changes” to save your files to your repository. If you look at your repository now, you should see all your files.

That’s it! Go to username.github.io in your browser to see your new website. Here’s mine for example. Congratulations on getting through this guide. Be sure to check out the What’s Next? section of each part for additional resources and next steps you can take to learn more about web development.

What’s Next?

We used Github’s web interface to directly upload our files. A much more powerful way to use Github to host our code is with Git. With Git, you can track changes and history of your project files and collaborate with others. Github, Codecademy, and Free Code Camp all have excellent free courses for learning Git. Try using Git to clone your repository, make a change, and push the change back up to Github to see your hosted site change.