Alexandar May's Blog
0%

Hexo Blog Multi-Device Synchronization and Management Guide Based on Git Branch Strategy

Posted on In ,
Symbols count in article: 11k Reading time ≈ 10 mins.

Introduction:The Necessity of Multi-Device Collaboration

A couple of days ago, I am thinking if I can update blogs using multiple devices (such as home computers, office computers, laptops) which has become the norm from my perspective. As an efficient static blog generator, Hexo’s default deployment mechanism only pushes static files to GitHub Pages, but source code files (Markdown articles, theme configurations, plugins) are not synchronized, leading to the following pain points in multi-device collaboration:

  • Scattered storage of source code, unable to manage uniformly
  • Repeated construction of environment configurations, low efficiency
  • Sudden situations (such as computer failure) leading to source code loss

So I write this to build a complete Hexo multi-device synchronization solution through Git branch strategies, achieving seamless synchronization and management of source code across devices.

Core Principles of Hexo Multi-Device Synchronization

Hexo Directory Structure and Version Control Strategy

In the Hexo blog directory structure, the following files/directories require special attention:

Directory/File Function Version Control Strategy
node_modules/ Dependency package directory Ignored (regenerated via package.json)
themes/ Theme files Must be synchronized (contains custom configurations)
public/ Static generated files Ignored (generated by hexo g)
source/ Blog source code(Markdown) Must be synchronized
_config.yml Global configuration file Must be synchronized
package.json Dependency description file Must be synchronized

Git Branch Division of Labor Model

A dual-branch strategy is higly recommended:

  • Source branch (e.g., hexo01 or source): Stores Hexo source code (Markdown, themes, configurations)
  • Deployment branch (e.g., master or gh-pages): Stores static generated files (automatically pushed by hexo deploy)

Core logic:

  1. The source branch serves as the “development branch” where all manual modifications are completed.
  2. The deployment branch serves as the “production branch” only receiving static generated files. When pushing to the “development branch” using git push origin hexo01, the “production branch” will be automatically synchronized.
  3. The two branches are isolated through .gitignore configuration.

Old Computer Operation Guide:

Creating and Configuring Remote Branches

  1. Remote repository preparation
    Create a repository username.github.io on GitHub and execute the following operations:
    1
    2
    3
    4
    # Create hexo source branch
    git branch hexo
    # Set hexo as the default branch, this is a key step!
    git branch --set-upstream-to=origin/hexo hexo
  2. Local environment initialization
    Execute in the blog root directory:
    Initialize Git repository
    1
    2
    3
    git init
    # Add remote repository
    git remote add origin git@github.com:username/username.github.io.git

Local Environment and Remote Repository Synchronization

  1. Clean and copy files
    Retain the .git folder and delete other files
    Copy the original Hexo directory (except .deploy_git/) to the current directory
    Commit source code to the remote branch
    1
    2
    3
    4
    5
    6
    # Add all files
    git add .
    # Commit changes
    git commit -m "Init hexo source branch"
    # Push to the remote hexo branch
    git push origin hexo

.gitignore Key Configuration

Create .gitignore file in the project root directory with the following content:

1
2
3
4
5
6
7
.DS_Store
Thumbs.db
db.json
*.log
node_modules/
public/
.deploy*/

New Computer Environment Setup

SSH Key Configuration and Environment Dependency Installation

  1. Generate and add SSH key
    1
    ssh-keygen -t rsa -C "your_email@example.com"
  2. Add the generated public key like id_rsa.pub to GitHub's Settings > SSH and GPG Keys, mac is under ~/.ssh and windows is under C:\Users\username\.ssh
  3. Configure Git global information
    1
    2
    git config --global user.name "YourName"
    git config --global user.email "your_email@example.com"

Remote Repository Cloning and Dependency Recovery

  1. Clone the source branch
    1
    2
    git clone -b hexo git@github.com:username/username.github.io.git blog
    cd blog
    2.Install dependencies
    1
    2
    3
    4
    5
    6
    # Install Hexo CLI
    npm install -g hexo-cli
    # Install project dependencies
    npm install
    # Install deployment plugins
    npm install hexo-deployer-git
    Note:make sure you use the same version of (Node.js)[https://nodejs.org/en/download] to install the tools above otherwise there may be some compatibility problems.

First Run Verification and Configuration Check

Local preview verification

1
2
hexo clean
hexo g && hexo s

Access http://localhost:4000 to confirm the blog runs normally
Deployment configuration check
Ensure the deployment configuration in _config.yml points to the master branch:

1
2
3
4
deploy:
  type: git
  repo: git@github.com:username/username.github.io.git
  branch: master

Daily Update Workflow: Dual Branch Collaborative Operation

Source Code Update and Submission Process

  1. Pull the latest source code
    1
    git pull origin hexo
  2. Modify and commit
    1
    2
    3
    4
    5
    6
    7
    # Add a new article
    hexo new "New Article"
    # Commit changes
    git add .
    git commit -m "Update blog content"
    # Push to the remote source branch
    git push origin hexo

Automation Script to Optimize Workflow

Create a deploy.sh script to simplify the process:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
#!/bin/bash
# ================ Hexo Automated Deployment Script (hexo01 branch) ================
# Usage: Execute in the blog root directory with ./deploy.sh "Commit message"
# If no commit message is provided, a default timestamp message will be used
# ================================================================

# Define color output
COLOR_RED="\033[31m"
COLOR_GREEN="\033[32m"
COLOR_YELLOW="\033[33m"
COLOR_RESET="\033[0m"

# Check if commit message is provided, otherwise use default
COMMIT_MSG=${1:-"Auto deploy at $(date +'%Y-%m-%d %H:%M:%S')"}

echo -e "${COLOR_YELLOW}==== Starting Hexo Blog Deployment ====${COLOR_RESET}"

# Step 0: Pull latest source code (hexo01 branch)
echo -e "${COLOR_GREEN}[0/4] Pulling latest source code...${COLOR_RESET}"
git pull origin hexo01
if [ $? -ne 0 ]; then
    echo -e "${COLOR_RED}Failed to pull source code! Please resolve conflicts manually and retry.${COLOR_RESET}"
    exit 1
fi

# Step 1: Clean and generate static files
echo -e "${COLOR_GREEN}[1/4] Cleaning and generating static files...${COLOR_RESET}"
hexo clean && hexo generate
if [ $? -ne 0 ]; then
    echo -e "${COLOR_RED}Failed to generate static files!${COLOR_RESET}"
    exit 1
fi
# Step 2: Deploy to GitHub Pages
echo -e "${COLOR_GREEN}[2/4] Deploying to GitHub Pages...${COLOR_RESET}"
hexo deploy
if [ $? -ne 0 ]; then
    echo -e "${COLOR_RED}Failed to deploy to GitHub Pages!${COLOR_RESET}"
    exit 1
fi
# Step 3: Commit source code changes to hexo01 branch
echo -e "${COLOR_GREEN}[3/4] Committing source code changes...${COLOR_RESET}"
git add .
git commit -m "$COMMIT_MSG"
if [ $? -ne 0 ]; then
    echo -e "${COLOR_YELLOW}No changes to commit.${COLOR_RESET}"
else
    # Step 4: Push source code to GitHub
    echo -e "${COLOR_GREEN}[4/4] Pushing source code to GitHub (hexo01 branch)...${COLOR_RESET}"
    git push origin hexo01
    if [ $? -ne 0 ]; then
        echo -e "${COLOR_RED}Failed to push source code to GitHub!${COLOR_RESET}"
        exit 1
    fi
fi

echo -e "${COLOR_YELLOW}==== Hexo Blog Deployment Completed ====${COLOR_RESET}"
echo -e "${COLOR_GREEN}View blog: https://your-username.github.io${COLOR_RESET}"
echo -e "${COLOR_GREEN}View source: https://github.com/your-username/your-repo/tree/hexo01${COLOR_RESET}"

Grant execution permissions and run:

1
2
chmod +x deploy.sh
./deploy.sh "Update description"

Common Problems and Solutions

Branch Switching Conflict Handling

When switching branches causes node_modules conflicts, execute:

1
2
3
4
5
6
7
8
9
10
# Stash current changes
git stash
# Switch branches
git checkout hexo
# Restore changes
git stash pop
# Clean untracked files
git clean -fdx
# Reinstall dependencies
npm install

If you can not run hexo command like hexo s on Mac,this is because the default terminal on Mac is zsh (which can actually be queried with an echo $SHELL command), and the user environment variable file is~/. zshrc. After executing the following command, the environment variable configuration was successful: 

1
echo 'PATH="$PATH:./node_modules/.bin"' >> ~/.zshrc

Environment Dependency Inconsistency Issue

Ensure Node.js versions are consistent across devices, which can be locked via package.json:

1
2
3
"engines": {
  "node": "14.x"
}

On new devices, execute:

1
npm install --no-save

Theme and Plugin Synchronization Abnormality

  1. Check for nested Git in themes
    Delete .git folders in theme directories:
    1
    find themes/ -type d -name ".git" -exec rm -rf {} \;
  2. Manually synchronize theme updates
    If the theme is updated, manage it via Git submodule:
    1
    git submodule add <theme-repo> themes/<theme-name>

Advanced Tips: Private Repositories and Multi-Branch Strategies

Private Repositories to Protect Source Code Security

  1. Create a private repository
    Create a new private repository hexo-source on GitHub to store source code
  2. Migrate the source branch
    1
    2
    3
    4
    5
    6
    # Remove old remote
    git remote remove origin
    # Add new private repository
    git remote add origin git@github.com:username/hexo-source.git
    # Push the source branch
    git push -u origin hexo
  3. Configure dual deployment targets
    Add to _config.yml:
    1
    2
    3
    4
    5
    6
    7
    deploy:
      - type: git
        repo: git@github.com:username/hexo-source.git
        branch: hexo
      - type: git
        repo: git@github.com:username/username.github.io.git
        branch: main

Multi-Branch Collaborative Development Model

  1. Feature branch workflow
    1
    2
    3
    4
    5
    6
    # Create a feature branch
    git checkout -b feature/new-theme
    # After development, merge into the hexo branch
    git checkout hexo
    git merge feature/new-theme
    git push origin hexo

Best Practices for Multi-Device Synchronization

  1. Core principles:
    - Separate storage of source code and static files
    - Manage dependencies via package.json
    - Always pull before committing to avoid conflicts
  2. Operation checklist:
    - For new devices: git clone -b hexo + npm install
    - Daily updates: git pull → edit → git push → hexo deploy(must need git pull firstly)
    - Environment migration: Only requires Git cloning + dependency installation, no need for re-initialization
  3. Advanced suggestions:
    - Use GitHub Actions for automated deployment
    - Regularly back up source branches to other cloud storages
    - Adopt branch protection strategies for team collaboration