Switching to Hexo!

Why?

I was priviously using jekyll TeXt theme, but the code block shows too small to watch code. Also, I don’t really understand the coding language jekyll is using, so I decide to switch to a more familier javascript framework, hexo.

What is Hexo?

Hexo is a website generator to generate website based on Markdown file, and it is highly customizable.

Install Hexo

Preriquisite: Git and node.js.

Install Hexo CLI

npm install -g hexo-cli

and, we can execute Hexo commands in this way:

npx hexo <command>

Install Starter Package & Dependencies

npx hexo init blog
cd blog
npm install

Server

Run these commands, and you will see a starter website is generated by Hexo.

npx hexo g
npx hexo s

Writing

In sourse/__post folder, we already have a hello-world.md post that is from Hexo starter package. Basically, we can imitate that first.

For detail Infomation, visit Hexo Doc front-matter

Example:

---
title: Switching to Hexo!
tags: [Hexo]
categories: [Static Website Generator]
---

# header

your blog post

Theme

You can search for theme you like on This Site or Github, but in hexo, I will generally recommand next. It’s not only because it’s highly customizable, but for its already built nice plugins.

Deploy

Use

npx hexo g

It will generate html file that you might want to deploy to github in pulic directory, and you can use Github Pages to handle that.

Github Pages Tutorial

Auto Deploy with Github Actions

Baically, you might find it annoying to generate html file everytime you want to make a change. Github can handle that for me.

1. Uplaod your whole project to Github.
2. add a file to your repository, .github/workflows/deploy.yml

.github/workflows/deploy.yml

name: Pages

on:
  push:
    branches:
      - main # default branch

jobs:
  pages:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Use Node.js 16.x
        uses: actions/setup-node@v2
        with:
          node-version: "16"
      - name: Cache NPM dependencies
        uses: actions/cache@v2
        with:
          path: node_modules
          key: ${{ runner.OS }}-npm-cache
          restore-keys: |
            ${{ runner.OS }}-npm-cache
      - name: Install Dependencies
        run: npm install
      - name: Build
        run: npm run build
      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./public
          cname: # if you use custom domain, enter your hosting domain for this project.