A GitHub page is the best option to host a static website. If you are looking for a solution to host your static HTML site without spending a penny, this tutorial is for you. In this tutorial, we will host this beautiful Advanced FAQ Manager WordPress plugin landing page for GitHub.
🤔 Why do we use the GitHub page?
- It's free! The site will be ready in a few minutes. 🚀
- You can directly connect to your Git repository.
- Deployment is automatic, and if anything goes wrong, you can easily restore the previous version.
- No downtime worries!
✅ Lets Host Our Site
👉 Step 01: Start a new repository
Log in to your GitHub account and create a new repository.
👉 Step 02: Initialize a local git
Go to your project folder on your local computer and initialize git.
👉 Step 03: Add origin of the remote repository
We need to add the origin. Finally, push all the files to the remote repository.
👉 Step 04: Check the deployment process
Next, go to your project repository and check the file upload status.
👉 Step 05: Setup some settings
- Navigate to the settings of the repository.
- Under the "Code and Automation" menu, you will get the "Pages" submenu.
- Go to the pages.
👉 Step 06: Build and deployment
You will get a Branch option under the "Build and Deployment" section. Select "main" from the dropdown, and select "/root" as a folder.
Finally, click the Save button. It means that when you push any changes to the main branch, it will be automatically deployed to the root folder.
👉 Step 07: Make a new change (Optional)
Now, again, go to the project folder on your local computer and change any code.
Commit and push the code to the remote repository.
👉 Step 08: Try the new site
If everything is set up perfectly, you will get the following example. Now, your site is ready to use and you can share the link with your clients. 🎉
https://xenioushk.github.io/docs-wp-plugins/
💡The URL pattern will be like this:
https://<YOUR_GITHUB_USERNAME>.github.io/<YOUR_REPOSITORY_TITLE>
✅ Use Cases of GitHub Page
Now you have a solid understanding of hosting a static site on GitHub. We can use the GitHub pages for various purposes. Here are a few use case of GitHub Page
✅ Use As Documentation Site
I have developed several WordPress themes, plugins, and HTML5 templates for the Envato marketplace. Providing clear and easily accessible documentation is one of the mandatory requirements to get approved on Envato.
Every single update of the product contains some changes. So, we need to update the documentation as well. This process is quite time-consuming, and it is difficult to track the changes.
The GitHub page solves the documentation update issue and makes the documentation build process automatic. Now, we only need to push the updates of documentation files to the Git repository, and GitHub will automatically build and deploy the documentation page for use. As a product developer, we only need to deliver the documentation link to the customer.
🥇 Benefits:
- Manage updates from a single place.
✅ Use As Portfolio Site/Landing Page
Hosting a portfolio website requires purchasing a domain name and hosting. Although, nowadays, domain name and hosting costs are quite minimal. But for a beginner, a GitHub page is a good option to showcase your work to clients or recruiters.
You only need to push all your work images and HTML files to the Git repository, and the GitHub workflow will do the rest of the task for you.
🥇 Benefits:
- Easy to update and automatic deployment.
- Share links easily.
✅ Use As CDN (Content Delivery Network)
You can also host all of your static images, JavaScripts, and stylesheet files on GitHub. Next, you can copy the URL of the file and use it on any other websites.
I have hosted all my WordPress themes, plugins, and HTML template banner images on GitHub. Later, I added them to the Envato product page. Now, I do need to host any of the banner images on my own hosting server.
🥇 Benefits:
- Reduce your own server load and use less bandwidth.
- The GitHub server is super fast, and it serves the image quickly.
- No downtime headache.
I hope that helps, and let me know your feedback in the comment section.
