Hexo Building Personal Blog #02 Using GitHub for Hosting

Creating a Repository#

Create 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 using 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 on SSH, please refer to "Connecting to GitHub with SSH" and "SSH Principles and Applications (Part 1): Remote Login".

Then, deploy:

hexo d

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

404 Deployment Issue#

Originally, I wanted to deploy the gh-pages branch, but I 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, I found that because we are using a subdomain, GitHub Pages can only deploy the master branch and cannot be selected. If we change the name to something else (such as blog), we can choose which branch to deploy.

I have two solutions in mind:

Adjust the branch strategy:
- master: compiled static resources
- source: blog source code
Modify the repository name (such as blog):
- Pros: Allows adjustment of the github-pages deployment strategy
- Cons: Can no longer directly access the subdomain, need to add /blog suffix for 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 first (otherwise, you cannot delete the master branch)

# 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. You can now access the long-awaited Hexo blog page at https://y0ngb1n.github.io/.

y0ngb1n.github.io

Because we have 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