Deploying your project to GitHub Pages can make it accessible to the world, showcase your work, and even serve as a static website host. Here's a step-by-step guide on how to achieve this.
Before we dive in, ensure you have a GitHub account, your project is in a repository, and you're familiar with basic Git commands. Let's get started!
Preparing Your Repository
First, let's ensure your repository is ready for GitHub Pages.
If your project is in a different branch, switch to the main branch (usually 'main' or 'master').
Create a gh-pages Branch
GitHub Pages uses a specific branch to build and serve your site. Let's create one:
git checkout --branch gh-pages
Configure GitHub Pages
Now, let's tell GitHub to use this branch for GitHub Pages.
git remote add origin https://github.com/yourusername/your-repo.git
git branch -M main
git push -u origin main
Building and Deploying Your Site
Next, we'll build and deploy your site. This process might vary depending on your project's tech stack.
For a simple HTML site, you can directly deploy it. For more complex projects, you might need to build it first. Here's how:
Building Your Site
If you're using a static site generator like Jekyll, Hugo, or Gatsby, build your site locally:
npm run build or yarn build (for Gatsby)
Deploying Your Site
Now, let's push your built site to the 'gh-pages' branch:
git add -A
git commit -m "Build and deploy site"
git push origin gh-pages
Accessing Your Live Site
GitHub Pages should now serve your site. It might take a few minutes to propagate.
You can access your live site at https://yourusername.github.io/your-repo/
Custom Domain (Optional)
If you want to use a custom domain, follow GitHub's guide to add a custom domain to your repository.
Once added, update your DNS settings with your domain registrar to point to GitHub's servers.
Congratulations! You've successfully deployed your site to GitHub Pages. Keep updating and improving your site, and don't forget to share it with the world!