Hosting website has never been easier since GitHub offers hosting for your web app for free. This article will guide you through the process of hosting your web app on GitHub Pages. GitHub Pages is a static site hosting service that supports HTML, CSS, and JavaScript files. With this service, you can host your web app without any additional cost and a custom domain name.
Create a Repository in Github
The first step in hosting your web app on GitHub is to create a repository. If you don’t have a GitHub account, create one. Once you have created an account, log in to your GitHub account and click on the plus icon in the top right corner. Select “New repository” from the drop-down menu. In the repository name field, enter the name of your web app. Ensure that the repository is public so that it can be accessed by anyone.
After creating the repository, you can add your web app files to the repository. To do this, click on the “upload files” button under the “Quick setup” section. Select the files you want to upload and click on the “Commit changes” button at the bottom of the page. Your web app files are now in the repository, and you are ready to host your web app on GitHub Pages.
Before hosting your web app on GitHub Pages, you need to ensure that your web app is a static website. GitHub Pages only support static sites, which means that your web app cannot have any server-side scripting or database integration.
Configure Your Web App for Github Pages
The next step is to configure your web app for GitHub Pages. To do this, create a new branch called “gh-pages” in your repository. This branch will host your web app files. To create a new branch, click on the “Branch: master” button on the top left corner of the page. In the “Find or create a branch” field, enter “gh-pages” and click on the “Create branch: gh-pages” button.
After creating the “gh-pages” branch, navigate to the settings page of your repository. Scroll down to the “GitHub Pages” section and select the “gh-pages” branch as the source. GitHub Pages will now host your web app files from the “gh-pages” branch.
You can now access your web app using the URL provided by GitHub Pages. The URL is in the format “https://username.github.io/repositoryname/”. Replace “username” with your GitHub username and “repositoryname” with the name of your repository.
Custom Domain Name
If you want to use a custom domain name for your web app, you can do so by configuring the DNS settings of your domain name. To do this, navigate to the settings page of your repository and scroll down to the “Custom domain” section. Enter your custom domain name and click on the “Save” button.
After saving the custom domain name, you need to configure the DNS settings of your domain name. You need to create a CNAME record that points to your GitHub Pages URL. The CNAME record should be in the format “subdomain.domain.com CNAME username.github.io”. Replace “subdomain” with the subdomain you want to use, “domain.com” with your domain name, and “username” with your GitHub username.
After configuring the DNS settings, it may take some time for the changes to take effect. Once the changes are propagated, you can access your web app using your custom domain name.
Conclusion
Hosting your web app on GitHub Pages is a simple and free way to host your web app. With GitHub Pages, you can host your web app without any additional cost and a custom domain name. This article has guided you through the process of hosting your web app on GitHub Pages. Ensure that your web app is a static website and follow the steps outlined in this article to host your web app on GitHub Pages.