/Frontend/Basics/
Deploying a Website to GitHub Pages π
GitHub Pages is a static site hosting service that lets you host your website directly from your GitHub repository. It's free to use and easy to set up so you can have a website for everyone to see for any of your repositories.
Benefits of GitHub Pages
- It's free: GitHub Pages is a free service, so you don't have to pay any hosting fees like other services when hosting websites.
- It's easy to use: GitHub Pages is easy to set up and use. You don't need any special technical skills to get started and we'll talk about how to do it next.
- It's reliable: GitHub Pages is a reliable hosting service. Your website will be up and running 24/7 and will probably never go down without notice as it's ran by Github (owned by Microsoft)
- It's fast: GitHub Pages is a fast hosting service. Your website will load quickly for your visitors unlike other hosting services which I struggled with for a while before discovering this (I used to use freehosting.com it was terrible lol)
- It's secure: GitHub Pages is a secure hosting service. Your website will be protected from hackers and other threats AND automatically have https as apposed to http which is very convenient (normally you need to get a special online certificate to do this called an "SSL Certificate")
How to deploy a website to GitHub Pages (Quick text based explaination)
Normally, to deploy a website to GitHub Pages, you will need to:
- Create a GitHub repository.
- Clone the repository to your local computer (or publish an existing folder with code you have to that repository)
- Create your website (unless one exists) making sure your home page is called
index.html
- Make sure any anchor tags in your HTML is hrefing to
<repository-name>/<location>
instead of just<location>
because of how github pages formats their URL per website - Add and commit your changes.
- Push your changes to GitHub.
- Go to the Settings tab of your repository on GitHub.
- Under GitHub Pages, select the main branch.
- Click Save.
Your website will now be deployed to GitHub Pages at the following URL (It might take a few minutes):
https://<username>.github.io/<repository-name>
Now if you want a more in depth (but still quick) video explaining this, watch below. This is also a good example of how you should manage/update your github repository when working with a team (notice how he makes a branch for changes before making a pull request. This is a very good practice)
Getting Started with Github Pages - Net Ninja βοΈ
Challenge ββ
Deploy your first website
This isn't much of a challenge necessarily but, using the repository you made and published your Portfolio code in (mentioned in version control guide), try activating a github page for it so you can share your website in action for all your friends to check out!
- You may have to change your HTML's anchor tags to properly href for it to work using github pages as mentioned in the video and in step 4 of my text based explaination
Conclusion π
GitHub Pages is a great option for hosting your website. It's free, easy to use, and reliable. If you're looking for a way to host your website, GitHub Pages is a great option. There won't be a recap or special fireship video for this guide as it's pretty simple and you should've already had everything you needed to make your first github hosted website. If you weren't able to get it working, send me a message (contact info found here) and I can try to help.