We're going to start by creating a new repository using GitHub Pages.
And we're going to name is after ourselves! My github username is jsoma, so I'm going to call my repository jsoma.gitub.io.
Name your repository
YOURUSERNAME.github.io. Double-check what your GitHub username is. If you do this part wrong, you'll be sad!
Now you'll have a new folder created, called jsoma.github.io, and that's where we're going to put our project website data.
No matter how many HTML files we have - maybe we'll end up with a thousand projects - every single HTML file needs to be called index.html.
...but why?
Eventually we'll visit the URL https://jsoma.github.io/, and our index.html shows up, even though we didn't explicitly ask for it. That's web server magic - when we ask for a web page from the domain, it will try to find a file called index.html and send it back to us.
If we asked for cats.html, though, it would try to find that exact file to send it back to us. But... no one likes to type https://jsoma.github.io/cats.html! People would much rather rather type https://jsoma.github.io/cats/, because it's nice and pretty.
So what we do is always name our files index.html. If we have a different project - like "cats," for example - we put that file in a subdirectory called /cats.
| We ask for | We are given |
|---|---|
| jsoma.github.io | jsoma.github.io/index.html |
| jsoma.github.io/cats/cats.html | jsoma.github.io/cats/cats.html |
| jsoma.github.io/cats/ | jsoma.github.io/cats/index.html |
| jsoma.github.io/cats.html | jsoma.github.io/cats.html |
As a result...
- You'll have an
index.htmlas your homepage for the entire portfolio. - Each project will get a folder (lie
cats) - Each folder will have an
index.htmlin it
For now I think you can focus on putting a single project in a single folder.
So now, do that. Put your files in the right place. Mine looks like this:
Now you'll need to use GitHub Desktop to commit and send everything up.
If you're on OS X: don't commit .DS_Store! Even better: add a .gitignore file to ignore it. But if you accidentally add it, no big deal.
When you're done with your commits, you'll want to push up to GitHub. Be sure you uncheck the private repository box. You want everyone to be able to see your website, right?
Now that our site is pushed up, we'll give GitHub a little while to set things up, and we'll be able to visit it! Just go to whatever your repository name is - mine was jsoma.github.io and so I'll go ahead and visit jsoma.github.io. Works like magic!
If it doesn't work for you, chances are you either put your work into a subdirectory or you didn't name your repository correctly. Double-check!
Hi, I was looking for a quick explanation of the "index.html" thing, and you helped me more than anyone on the Internet, so thanks a lot !!!