Hosting a site using Github

This tutorial was written by Digital Studio Student Assistant, Victor Truong. Learn more about Victor and our other student assistants here.

In this tutorial, we will be learning how to host a website using GitHub Pages. GitHub Pages offers a free option of hosting your own personal website. This website can be used and customized to your liking. I can be used for a blog or even a professional portfolio. Here’s how to get started.

To begin, we must create a GitHub Account at https://github.com/.

Next, we will click on “new repository” and name the repository “username.github.io” where username is your username.

From here, on your computer, using your favorite text editor, we will need to create and index file.

If you do not have a favorite text editor, recommended editors are Atom or Sublime.

https://atom.io/

https://www.sublimetext.com/

The name of the file will be index.html.

<!DOCTYPE html>
<html>
<body>
<h1>Hello World</h1>
<p>I’m hosted with GitHub Pages.</p>
</body>
</html>

Enter the above text into your index file for a very basic webpage.  Next, you will need to commit the index file to your repository.  You can do this one of two ways, you can either enter your repository on github.com to upload and commit the files or your can use GitHub desktop.  

https://desktop.github.com/

Once the file has been uploaded and committed, you can view your website at the name of your repository.

The default link to your website will be username.github.io where username is your username.

The uploading and committing process may take a couple minutes. Once complete your website should look similar to this:

Congratulations!!! You now have your own personal website.

It make the website more complete and to your exact preferences you will need to take another step to learn the coding languages html, css and javascript.

These three languages will allow you to create the exact webpage you want.

Helpful sources are:

https://www.codecademy.com/

https://www.w3schools.com/

http://www.learn-js.org/


Posted

in

by