A simple guide that helps you deploy Hexo on your GitHub pages using Arch Linux

1. Before Hexo’s installation

1. Create a GitHub repository where stores your data
2. Prepare for Git
   1. Download by sudo pacman -S git
   2. Set authority information. Set your user email by git config --global user.email "Your email", and set your user name by git config --global user.name "Your name"
   3. Generate a SSH key by ssh-keygen -t ed25519 -C "your_github_email@example.com". Your private key would be id_edXXXXX. KEEP IT IN SECRET! Your public key would be id_edXXXXX.pub.
   4. Copy and paste the SSH key into Github cat ~/.ssh/id_edXXXXX.pub
3. Prepare for OpenSSH
   1. Start the SSH Agent by eval "$(ssh-agent -s)"
   2. Add your private key by ssh-add ~/.ssh/id_edXXXXX
   3. Test your connection by ssh -T your_github_email@example.com

2. Hexo’s installation

1. Install Node.js by sudo pacman -S nodejs
2. Install npm(Node Package Manager) by sudo pacman -S npm
3. Install Hexo by sudo npm install -g hexo-cli
4. Initialize Hexo by hexo init
5. Generate the public directory by hexo generate
6. Install the deployment add-on by sudo npm install hexo-deployer-git --save
7. Edit the _config.yml file as following:

  deploy: 
    type: git 
    repo: git@github.com:your_user_name/your_repo_name.git # Use SSH
    branch: main 

8. Deploy Hexo by hexo deploy

3. Hexo’s Commands

hexo generate
hexo deploy
Clear the cache: hexo cl
When you finished editing posts, run hexo cl && hexo g && hexo d at once
hexo new "[Post Name]"
Add a new menu: run hexo new page "tags", and add “tags” into post’s front matter

4. Customize Your Themes

You can find themes on https://hexo.io/themes/ or Github. I’m using Particlex theme. Here’s its installation process:

1. Go to the themes directory by cd themes
2. Clone its git repo by git clone https://github.com/theme-particlex/hexo-theme-particlex.git particlex --depth=1
3. Set up your theme to Particlex by editing Hexo’s _config.yml which is under /

theme: particlex

I also added a comment system and a heart click effect.

4.1 Waline - A Comment System

To deploy Waline, you need the following things: LeanCloud, SupaBase, Vercel

LeanCloud

1. Register an account and create an application
2. Go to settings -> App Keys and keep these three keys: AppID, AppKey and MasterKey

SupaBase

1. Sign in using your GitHub account
2. Create a project. Don’t forget your password
3. Copy the official template table to SQL Editor and run it
4. Press connect button and go to View Parameters
5. Keep all parameters

Vercel

1. Sign in using your GitHub account and add your GitHub account to Git Scope
2. Press the Create. Vercel will create a new reposotiry
3. Press the Continue to Dashboard. Go to Setting -> Environment Variables
4. Add three new variables that copied from LeanCloud: LEAN_ID, LEAN_KEY and LEAN_MASTER_KEY
5. Add these new variables that copied from SupaBase: PG_HOST, PG_PORT, PG_DB, PG_USER, PG_PASSWORD, PG_PREFIX(wl_), PG_SSL(empty)
6. Redeploy the project
7. Keep the serverURL (https://XXX.vercel.app/). You would go into your backend through “visit” button, and find the serverURL on the browser’s URL bar.
8. Modify particlex’s setting files

/themes/particlex/_config.yml
waline:
  serverURL: https://XXX.vercel.app/

4.2 Add a click heart effect

1. Write animation code and store it in themes/particlex/source/js/XXX.js
2. Append the following code at the end of themes/particlex/layout/footer.ejs

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
<script src="<%- url_for('/js/heart.js') %>"></script>

5. Customized Domain

If you are tend to have your own domain, you would have to buy one (I bought this domain by myself from Spaceship——a DNS service provier). After purchasing a domain, you would have to

1. Go to your GitHub settings page -> Pages -> Add a domain -> keep the TXT record and code
2. Edit Custom DNS Records on your DNS service provier setting pages
   1. Set four A records for mapping the root domain to GitHub’s server
   2. Set a CNAME record for mapping to the specific location which is your repository domain
   3. Set a TXT record for
   4. Waiting for DNS propagation
3. Go to your repository settings page -> Pages -> Custom domain. Enter your domain and wait for its certification

5. Extensions

5.1 Katex

Katex is

1. sudo npm install katex