How to Deploy to Github

How to Deploy to Github

To deploy your Hugo site to GitHub Pages, you can follow these steps:

  1. First update baseURL in config.yaml baseURL: https://www.username.github.io Then compile with hugo
    1
    
    hugo
Go to public folder
1
cd piblic
  1. Second, create a new repository on GitHub that will hold your website files. Make sure to name the repository in the format yourusername.github.io, where yourusername is your GitHub username. Don’t forget add github.io

create a new repo for your personal website

Setting: GitHub Pages site to master branch

  1. Next, navigate to the root of your Hugo project directory in a terminal window or command prompt. (we already in public folder)
  2. Initialize a new Git repository by running the command:
1
git init
  1. Add all the files in your Hugo project directory to the new Git repository by running the command:
1
git add ./
  1. Commit the changes to the Git repository by running the command:
1
git commit -m "Initial commit"
  1. Set the remote repository to your new GitHub Pages repository by running the command:

1
2
git remote add origin 
https://github.com/yourusername/yourusername.github.io.git
Replace ‘yourusername’ with your actual GitHub username.

  1. Here we need to notice, if the default branch is not the master, please use this command first:
1
git checkout -b master

Finally, push the changes to the remote repository by running the command:

1
git push -u origin master

This will push the changes in your local Git repository to the remote repository on GitHub. You should now see your website files in the GitHub repository.

  1. To make your website live, go to your repository settings on GitHub and scroll down to the GitHub Pages section. Select the master branch as your source and click on Save. Your website should now be accessible at https://yourusername.github.io.

Note that it may take a few minutes for GitHub Pages to update and display your website after you have deployed it.

The full command

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
git init
git checkout -b master
git add ./
git commit -m "Initial commit"
git branch -M master

git remote add origin
 https://github.com/yourusername/yourusername.github.io.git


git push -u origin master

Visit your site

Update your website

When you change some files or write a new blog, you need push your change to github, the command is:

1
2
3
git add ./
git commit -m "commentxxxx"
git push 

Problem you might meet

yourname.github.io is 404

If you’re experiencing a 404 error after deploying your Hugo site to GitHub Pages, there are a few things you can try:

  • Check the spelling and capitalization of your repository name. Make sure it matches the URL you’re using to access your site. For example, if your repository is named my-hugo-site, your site should be accessible at https://yourusername.github.io/my-hugo-site/.

  • Verify that you have set the correct repository source in your GitHub Pages settings. If you have multiple branches in your repository, make sure you’ve selected the correct one as the source for your GitHub Pages site. You can check this in your repository settings under the “GitHub Pages” section.

  • Check that you’ve pushed your Hugo site’s content to the correct branch. By default, GitHub Pages serves content from the gh-pages branch, so make sure you’ve pushed your site’s files to that branch. Alternatively, you can configure GitHub Pages to use a different branch or directory by changing the settings in your repository.

  • Verify that your site’s content has been built correctly by running the hugo command locally and checking the generated files in the public/ directory. If the files are missing or incomplete, you may need to troubleshoot your Hugo configuration.

  • If you’re using a custom domain, make sure it’s set up correctly and that your DNS settings are configured properly. This can sometimes cause issues with GitHub Pages sites.

  • Wait a few minutes and try accessing your site again. It can sometimes take a few minutes for changes to propagate through GitHub Pages.

If none of these solutions work, you may need to consult the Hugo documentation or reach out to the GitHub support team for further assistance.