This is step-by-step guide walks you through creating a fast, static blog use Hexo, deploying it seamlessly to GitHub Pages for free hosting,
and styling it with Melody theme. One-time setup(config github, dependencies), maintain & develop by using Markdown,
modify js/css without worry about database.

Prerequisites

• Install Node.js and npm on your system.
• Set up a GitHub account and create a new repository (e.g., username.github.io for GitHub Pages).Don’t need to git clone this new repo.

Solution1: Use Main Branch

Install Hexo

npm install -g hexo-cli

hexo -v

Initalize Your Blog and install Melody(for Hexo v5+)

Create a new Hexo project:

$ hexo init blog

Navigate to the project directory:

$ npm install
$ npm install hexo-theme-melody
$ npm install hexo-renderer-pug hexo-renderer-stylus --save

Configure Hero and theme

Edit the _config.yml file in the root directory of your project:

• Update site details:

url: https://username.github.io

theme: melody

deploy:
  type: git
  repo: git@github.com:username/username.github.io.git
  branch: main

• For Hexo v5+, copy the default Melody configuration:
  Create _config.melody.yml in your root directory.
  Copy contents from node_modules/hexo-theme-melody/_config.yml into _config.melody.yml.

Install Hexo Git deployer

$ npm install hexo-deployer-git --save

Verify in Local

$ hexo clean && hexo g && hexo s

Push to production

$ hexo clean && hexo g && hexo d

Deploy your blog

• Go to your blog repo in github UI -> Settings -> Pages -> Source build choose Deploy from a branch -> Branch choose main /root save
• Go to your terminal, under blog repo:

$ hexo clean && hexo g && hexo d

• Check github action(on the right bar of repo) if ready
• Your blog should now be live at https://username.github.io

Quick Start

Create new blog

$ hexo new Post

Modify style

1. Add /css/custom.css under source/_posts
2. In _config.melody.yml file:

stylesheets:
  - /css/custom.css

Insert picture to certain blog

1. Set post_assert_folder: true in _config.yml file.
2. When type hexo new postname, under source/_posts, generate one file called postname.md and folder postname.
3. Put images under postname folder.
4. Put code below inside of blog:

{% asset_img <Image-Name>.png <Alta-text> %}

Create new Page

$ hexo new page tags
$ hexo new page categoriess
$ hexo new page about

Solution2: Seperate Branch

In order to upload all source code to github, so need to seperate source code & deployment branch. Hexo source code and deployment is seperated.

Step1 Create new repo

create a new repository (e.g., username.github.io for GitHub Pages).Don’t need to git clone this new repo for this step.

Step2 Initialize hexo

This step is standalone with github deployment.

$ hexo init blog
$ cd blog
$ npm install

Step3 Connecting to remote github repo

$ cd blog
$ git init
$ git checkout -b source
$ git add .
$ git commit -m "int blog infra"
$ git remote add origin https://github.com/username/username.github.io.git
$ git push -u origin souce

Step4 Configure sub-branch for deployment

$ git checkout --orphan gh-pages
$ git rm -rf .
$ echo "Hello GitHub Pages" > index.html
$ git add .
$ git commit -m "Init gh-pages"
$ git push origin gh-pages

Step5 Commit code and deployment

1. Go to repo -> Settings -> Pages -> set branch to gh-pages & /root
2. Can commit code in source branch
3. Can deploy blog in gh pages triggered by Github Action