Deploying an HTML website on GitHub Pages is a straightforward process that allows you to showcase your projects or portfolio online. GitHub Pages is a static site hosting service that takes HTML, CSS, and JavaScript files straight from a repository and serves them over the web. Here's a comprehensive guide on how to deploy your HTML website on GitHub Pages.
Before we dive into the process, ensure you have the following prerequisites: an HTML website ready to deploy, a GitHub account, and a basic understanding of Git and GitHub.
Setting Up Your GitHub Pages Repository
To start, you'll need to create a repository specifically for your GitHub Pages site. This repository should have the same name as your GitHub username, followed by '.github.io'. For example, if your GitHub username is 'johndoe', your repository should be named 'johndoe.github.io'.
Once your repository is created, you can initialize a local Git repository in your project folder and add your HTML files. Then, push these files to the 'main' branch of your GitHub Pages repository.
Initializing a Local Git Repository
In your terminal, navigate to your project folder and initialize a new Git repository with the command 'git init'. Then, add your HTML files to the repository using 'git add .'.
Commit your changes with a meaningful commit message using 'git commit -m "Initial commit"'. Now, your local repository is ready to be pushed to GitHub.
Pushing Your HTML Files to GitHub
First, create a remote repository on GitHub as described above. Then, connect your local repository to this remote repository using 'git remote add origin https://github.com/yourusername/yourusername.github.io.git'. Replace 'yourusername' with your actual GitHub username.
Push your local changes to the remote repository using 'git push -u origin main'. This command will push your HTML files to the 'main' branch of your GitHub Pages repository.
Configuring GitHub Pages
After pushing your HTML files, you need to configure GitHub Pages to serve your website. In your repository, create a new file named 'CNAME' (all caps) in the root directory. This file allows you to use a custom domain for your website.
Next, create a new file named 'index.html' in the root directory of your repository. This file is required for GitHub Pages to serve your website. You can leave it empty for now, as your existing HTML files will be served.
Setting Up a Custom Domain
If you want to use a custom domain for your website, you'll need to update the 'CNAME' file with your domain name. For example, if your domain is 'www.johndoe.com', the 'CNAME' file should contain 'www.johndoe.com'.
After updating the 'CNAME' file, push your changes to the remote repository using 'git add CNAME', 'git commit -m "Add CNAME file"', and 'git push'.
Enabling GitHub Pages
To enable GitHub Pages, go to your repository settings on GitHub. Scroll down to the 'Pages' section and select the 'main' branch as the source. Click 'Save'.
It may take a few minutes for GitHub to serve your website. Once it's live, you can view your website at 'https://yourusername.github.io', or your custom domain if you've set one up.
Congratulations! You've successfully deployed your HTML website on GitHub Pages. Regularly updating your website with new content and features will help you build an impressive online portfolio. Happy coding!