Beginner guide to hosting your site with GitHub Pages

Community Tips and Resources
1

I originally wrote this for Codecademy Groups, then transferred it to CodeHive once I found out about it after Groups had shut down, now I’m posting it back here :slight_smile:

In this guide, we’re going to learn how to host a site with GitHub Pages.
This guide assumes you’re running Linux (or at least using a command line), and you’re going to need to be signed into Github for this to work.

1. Head into the upper right corner on GitHub, and add a new repository:

1280×800

2. Name the repository [your username].github.io:

1280×800

I’m getting an error message because I’m already using GitHub to host my website, but you should be fine.

3. Next, open up your command line, cd into the folder where you’re planning on storing your project, and type this in: git clone https://github.com/username/username.github.io, replacing username with your Github username:

$ git clone https://github.com/username/username.github.io.git
Cloning into 'username.github.io'...
remote: Counting objects: 551, done.
remote: Total 551 (delta 0), reused 0 (delta 0)
Receiving objects: 100% (551/551), 37.37 MiB | 728.00 KiB/s, done.
Resolving deltas: 100% (292/292), done.
Checking connectivity... done.

4. cd into your new folder (cd username.github.io)

5. Move all of the files for your website into the folder you just created. Here’s what I’ve got:

794×495

6. Back in your terminal, type in git add --all

7. Type in git commit -m "Initial commit"

8. Type in git push. It’ll ask you for your username and password; enter both:

$ git add --all
$ git commit -m "Initial Commit"
On branch master
Your branch is up-to-date with 'origin/master'.

nothing to commit, working directory clean.
$ git push
Username for 'https://github.com':        
Password for 'https://[email protected]':

###That’s it!

To view your site, open up a browser and navigate to username.github.io

If you ever need to update a file, repeat the last 3 steps, and your update will be visible almost instantly.

It shouldn’t take longer than 10-15 minutes before your site is live, however once it’s up and running, updates will generally be pushed within 30 seconds.

If you can’t get your site up following my instructions above, please reply below, and I’ll try to help.

Also, read the Github Pages help docs

Was this helpful?

  • Yes
  • Not really/only kind of
  • No

0 voters

(If you choose anything other than yes, please let me know why!)

3 Likes
2

I couldn’t load the images. I’m not sure about other users, as it could just be me that can’t see them.

3

@lolman Can you see this?

1280×800

(source: https://i.imgur.com/d7eKV3R.png)

4

No I cannot. That looks like a box with an image of a “x” in it.

5

What UA/OS are you running? Images are present for Chrome/Win7.

6

Nicely done, Zeke. Must figure out how to do this one day.

Off topic:

My wife and I have a number of anecdotal solutions, among which is, “If you want something fixed, give it to a teenager.” I think you are fitting this description rather handsomely. Which brings us to another one, “If you want to find someone smarter than yourself, look no further than the nearest teenager.” We both laugh at this, but we both know it is true. It’s not always easy to take, what with pride and all, but we accept it and move on. Give it all you have!

4 Likes
7

@lolman That’s really weird. What happens if you click the link to view the source? Can you see the image then?

EDIT:

Can you see most images? Or is it just these that aren’t showing up?
Also, could there be something on your network blocking those images from loading? I think that some companies do block Imgur, which is where those images are being hosted.

8

It’s just the images you’re showing. I also can’t see the buttons to click both on the top of the editor and anything such as the “like button” through the “bookmark button” on posts. I can see buttons with words in them such as “invite”, “Reply” etc. It’s a browser thing but there’s not much I can do about it.

9

@lolman Re:

there’s not much I can do about it.

Is that because you don’t know how? If so, this or this might help.

10

Here’s the images on different websites so you could possibly view them, they are in order.

1 Like
11

(sorry for reviving!)
Well, this kinda confuses me… First, how can you host a website for free? don’t you have to buy a domain name? Second, do I literally just type in what you did, but change ‘username’ to my username?
(btw, I have windows 7)

12

@quantumtechnologys You do have to buy a domain name if you want something like quantumtechnologys.com, but if you follow my tutorial, you’ll get a subdomain on GitHub Pages’ website for free, something like this: quantumtechnologys.github.io. I wouldn’t recommend worrying about a custom domain name yet, first try to get your website on their free subdomain, then you can worry about a custom domain name :slight_smile:

And yes, you’ll change “username” in the article to whatever your actual username is.

2 Likes
13

Wow, just searched your website and it’s awesome! Though it looks like multiple pages/multiple sites, are you allowed to make multiple sites on github?

14

@quantumtechnologys Thanks! Yes, if you have index.html (the home page) and about.html, you can go to https://quantumtechnologys.github.io/about.html and see your about page. Or do you mean multiple sites, like something.github.io and whatever.github.io?

My site could be hosted on GitHub Pages without my changing anything, but right now I actually use surge.sh for hosting my website though.

1 Like
15

Yes this is what I mean, is their any difference with surge?

16

@quantumtechnologys Not really,

My site could be hosted on GitHub Pages without my changing anything

The only difference if you’re using the basic features is how you publish. I’d recommend starting with GitHub Pages.

1 Like
17

Alright, thanks! I already have a small webpage made, though it was more for practice. I’ll work on something that actually does something, like a chatting site for me and my friends.

1 Like