Hexo Building a Personal Blog #02 Using GitHub Hosting

Creating a Repository#

Creating a Repository

Create a repository named y0ngb1n.github.io in the format: <username>.github.io.

GitHub provides us with a subdomain <username>.github.io. If we enable GitHub Pages for one of our projects, we can access it using http(s)://<username>.github.io/<projectname>, allowing us to add Pages for each project. When we "create a repository named <username>.github.io - our corresponding subdomain -" GitHub will route that repository to our personal homepage, which can be accessed using http(s)://<username>.github.io.

Committing the Source Code#

Follow the instructions on the repository page:

# Initialize the git repository
git init

# Perform version control
git add .

# Commit
git commit -m ":tada: init hexo"

# Add the remote repository (GitHub) address
git remote add origin https://github.com/y0ngb1n/y0ngb1n.github.io.git

# Push the code
git push -u origin master

During the process, you will be prompted to enter your account password. After a successful push, you can refresh the repository page to see the source code you have submitted.

Repository Homepage

Enabling GitHub Pages#

First, compile with Hexo:

# Clear the cache (optional)
hexo clean

# Compile
hexo g

Then, use the hexo-deployer-git plugin for deployment:

# Install the plugin
npm install hexo-deployer-git

Modify _config.yml:

deploy:
  type: git
  repo: [email protected]:y0ngb1n/y0ngb1n.github.io.git
  branch: gh-pages

Here, we use the SSH protocol because only the Git protocol is supported. Using the HTTPS protocol will result in an error. For more information about SSH, please refer to "Connecting to GitHub with SSH" and "SSH 原理与运用（一）：远程登录".

Then, deploy:

hexo d

After successful deployment, a gh-pages branch will be automatically created in the remote repository.

404 Deployment Issue#

Originally, we wanted to deploy the gh-pages branch, but we could only deploy the master branch. Since our master branch does not have an index.html file, a 404 error occurs when accessing the homepage.

After verification, we found that because we used a subdomain for our repository, GitHub Pages can only deploy the master branch and cannot be selected. If we change the name to something else (e.g. blog), we can choose which branch to deploy.

I came up with two solutions:

Adjust the branch strategy:
- master: compiled static resources
- source: blog source code
Modify the repository name (e.g. blog):
- Pros: Allows adjustment of the github-pages deployment strategy
- Cons: Can no longer directly access the subdomain, need to add the /blog suffix to access (can be resolved by using a custom domain)

Here, I choose solution 1 (adjusting the branch strategy):

# View all branches
$ git branch -a
  ls
* master
  remotes/origin/master

# *Set gh-pages as the default branch in the repository settings (otherwise, the master branch cannot be deleted)

# Rename the local master branch to source
$ git branch -m master source

# Delete the remote master branch
$ git push --delete origin master
To github.com:y0ngb1n/y0ngb1n.github.io.git
 - [deleted]         master

# Upload the new source branch
$ git push origin source
To github.com:y0ngb1n/y0ngb1n.github.io.git
 * [new branch]      source -> source

Then, modify _config.yml to deploy the compiled static resources to the master branch:

deploy:
  type: git
  repo: [email protected]:y0ngb1n/y0ngb1n.github.io.git
  branch: master

After modifying, execute hexo d to compile and deploy until a new master branch appears in the remote repository. The command is as follows:

$ hexo d
INFO  Deploying: git
INFO  Clearing .deploy_git folder...
INFO  Copying files from public folder...
INFO  Copying files from extend dirs...
On branch master
nothing to commit, working tree clean
remote:
remote: Create a pull request for 'master' on GitHub by visiting:
remote:      https://github.com/y0ngb1n/y0ngb1n.github.io/pull/new/master
remote:
Branch 'master' set up to track remote branch 'master' from '[email protected]:y0ngb1n/y0ngb1n.github.io.git'.
To github.com:y0ngb1n/y0ngb1n.github.io.git
 * [new branch]      HEAD -> master
INFO  Deploy done: git

At this point, github-pages will detect the update in the master branch and update the deployment. Now, when you access https://y0ngb1n.github.io/, you will finally see the long-awaited Hexo blog page.

y0ngb1n.github.io

Because we adjusted the branch strategy, the source branch is now our main branch. Set source as the default branch in the settings, and then delete the gh-pages branch from the remote repository.

# Delete the remote gh-pages branch
$ git push --delete origin gh-pages
To github.com:y0ngb1n/y0ngb1n.github.io.git
 - [deleted]         gh-pages

That's it! We're done!

Is GitHub the only platform that offers free hosting?

Of course not! Other platforms also provide similar Pages functionality, such as:

Aben Blog