February 20, 2021tutorial html github-pages
GitHub is a website that lets you post your code so you can keep it organized and share it with other people. It’s a little bit like social media for coders, and it’s a great way to show off your code and to see what other folks are working on.
I’m assuming you’ve already worked through the GitHub profile README tutorial and that you’ve created your first GitHub repository and practiced some HTML with your GitHub profile README. If not, go do that now and then come back!
There are two different types of GitHub Pages repositories:
User sites are hosted at
https://YOUR_USERNAME.github.io and are used for things like personal homepages, portfolio pages, and other sites associated with you as a user. To create a user site GitHub Pages repository, create a repo named
Project sites are hosted at
https://YOUR_USERNAME.github.io/YOUR_REPO_NAME and are used for documentation related to a specific repo, or standalone pages. To create a project site GitHub Pages repository, create a repo with any name, and then either:
Settings tab of your repo and enable GitHub Pages for the
main branch (or any branch you want).
(There’s a third type of GitHub Pages repository called an organization site, but you probably don’t need that right now.)
For now, create a user site GitHub Pages repository by creating a repo named
YOUR_USERNAME.github.io. When you create your repo, check the
Add a README file box.
Create repository button to create your repo!
Next, go to the
Settings tab of your repo and scroll down to the
GitHub Pages section.
Creating a repo named
YOUR_USERNAME.github.io automatically activates the GitHub Pages feature and enables these settings. If you wanted to turn a different repo into a GitHub Pages site, this is where you’d do that!
But if you’re working from a
YOUR_USERNAME.github.io repo, you don’t have to change any settings. Go back to your repo’s homepage (the
Right now, your GitHub Pages site is hosted at
https://YOUR_USERNAME.github.io, but your repo only contains a single
README.md file. To test that everything is working, point your browser to
https://YOUR_USERNAME.github.io/README.md. You should see something like this:
This is the raw content of the
README.md file, hosted on GitHub Pages. Unlike the GitHub profile README feature, GitHub Pages does not convert markdown into HTML by default, which is why you see the raw markdown in your browser.
Next, follow the flow you learned in the GitHub profile README tutorial to add an
index.html file to your repo.
index.html file containing some HTML content and save it to the local copy of your repo. You can use any text editor to do this step.
Here’s some HTML content to start with:
<title>My GitHub Pages Site</title>
<p>Welcome to my GitHub Pages site!</p>
Save this to your
index.html file in your repo, right next to your
README.md file. You can test your HTML by opening the file in your browser.
Add, commit, and push your
index.html file. Again, you can use either GitHub Desktop or the git command line tool.
Go back to your repo in GitHub, and you should now have an
index.html file in your repo.
Now here’s the magic part! Point your browser to
https://YOUR_USERNAME.github.io/index.html and you’ll see your HTML rendered by the browser.
index.html file is also a bit magical. By default, most web servers will automatically show
index.html if you don’t specify a file. That means you can also navigate to
https://YOUR_USERNAME.github.io without the
index.html part to see your page!
Now that you have everything connected, you can update your repo whenever you want to make changes to your site. Try these out:
You can make changes locally and test them before deploying them by opening the local files in your browser, and then push your changes whenever you’re ready to show them to the world.
GitHub Pages is nice because it means your repo and your live site are always in sync. Whenever you update your repo, GitHub Pages automatically updates your live site. Happy Coding itself is built using GitHub Pages!
Have fun making your GitHub Pages site, and don’t be afraid to get creative! And make sure to post a link in the HappyCoding.io forum so we can check it out!