• prepare
• init
  • install plugin
  • generate new pages
  • diable the default highlight settings
• theme
  • snark
  • fix unreadable link
  • theme for code
• commands
  • new
  • list
  • server
  • deploy
• deploy
• syntax highlighting
• Plugins
  • hexojs/hexo-util

[!NOTE|label:references:]

• How to use Hexo and deploy to GitHub Pages
• hexojs/hexo-util
• btfak/useHexo.md

prepare

[!NOTE|label:references:]

• Setup

$ npm i -g hexo-cli

init

[!NOTE|label:references:]

• hexojs/hexo-starter

$ mkdir myblog && cd myblog
$ hexo init

# or
$ hexo init imarslo.github.io

$ hexo init
INFO  Cloning hexo-starter https://github.com/hexojs/hexo-starter.git
INFO  Install dependencies
added 183 packages from 421 contributors and audited 189 packages in 22.277s

12 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

INFO  Start blogging with Hexo!

install plugin

$ npm install hexo-renderer-pug --save
$ npm install hexo-renderer-sass --save
$ npm install hexo-generator-feed --save
$ npm install hexo-generator-search --save
$ npm install hexo-generator-sitemap --save

generate new pages

$ hexo new page archives
$ hexo new page categories
$ hexo new page tags
$ hexo new page about

• or

  $ hexo new page --path about/me "About me"
  

diable the default highlight settings

[!NOTE] default settings in _config.xml

$ sed '/highlight:/{n;s/^.*$/\ \ enable: false/;n;s/^.*$/\ \ line_number: false/;}' -i _config.xml

$ sed '/highlight:/{n;s/^.*$/\ \ enable: false/}' -i _config.xml
$ sed '/highlight:/{n;n;s/^.*$/\ \ line_number: false/}' -i _config.xml

$ grep highlight: _config.yml -A 6
highlight:
  enable: false
  line_number: false
  auto_detect: false
  tab_replace: ''
  wrap: true
  hljs: false

theme

[!NOTE]

• Themes

snark

clone code

$ git submodule add https://github.com/imarslo/hexo-theme-snark.git themes/snark

$ git clone https://github.com/imarslo/hexo-theme-snark.git themes/snark
$ sed '/highlight:/{n;s/^.*$/\ \ enable: false/}' -i _config.xml
$ sed '/highlight:/{n;n;s/^.*$/\ \ line_number: false/}' -i _config.xml

$ git submodule sync --recursive
$ git submodule update --init --recursive

use snark

$ sed 's/^theme: landscape/theme: snark/' -i _config.xml

• _config.xml

  theme: snark
  

fix unreadable link

[!NOTE|label:references:]

• files: themes/snark/layout/_partial/head.pug
• CDN vs. Kit
• BootstrapCDN | jsdelivr/bootstrapcdn
• font-awesome CDN | cdnjs | cdnjs/cdnjs
• jquery CDN | cdnjs | cdnjs/cdnjs

• font-awesome.min.css

  [!TIP|label:references:]

  • deactive link:
    • https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css
  • workable link:
    • 4.7.0:
      • https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css
      • https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css
      • https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css
    • 6.6.0
      • https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.6.0/css/fontawesome.min.css
      • https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/fontawesome.min.css
  • about the font-awesome:
    • fontawesome-free-6.6.0-web.zip
    • font-awesome-4.7.0.zip
  • others:
    • tim-peterson/font-awesome.min.css

  head
      ...
      link(rel='stylesheet', href='//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css')
      ...
  

• jquery.min.js

  [!NOTE|label:references:]

  • jquery/jquery-dist
  • activate link:
    • https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js
    • https://code.jquery.com/jquery-4.0.0-beta.2.slim.min.js
    • https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js

  head
      ...
      script(type='text/javascript', src='//cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js')
      ...
  

theme for code

[!TIP|label:references:]

• * iMarslo : code themes

• highlight.js | github: highlightjs/highlight.js

  • 

  • 

  • 

  • 

# _config.yml
highlight:
    google_code_prettify: false
    highlight: true                        ## highlight.js
    highlight_theme: 'atom-one-dark'       ## refer: https://highlightjs.org/static/demo/

commands

[!NOTE|label:references:]

• Commands
• options
  • --debug
  • --silent
  • --config customer.yml or --config custom.yml,custom2.json
  • --draft

new

[!NOTE|label:references:]

• command format:

  $ hexo new [layout] <title>
  

$ hexo new page --path about/me "About me"

# or
$ hexo new page --path about/me

list

[!TIP|label:supported:]

• hexo list page
• hexo list post
• hexo list tag
• hexo list category
• hexo list route

# page
$ hexo list page
INFO  Validating config
INFO  Start processing
Date        Title       Path
2024-09-04  archives    archives/index.md
2024-09-04  categories  categories/index.md
2024-09-04  tags        tags/index.md
2024-09-04  about       about/index.md

# post
$ hexo list post
INFO  Validating config
INFO  Start processing
Date        Title        Path                   Category  Tags
2024-09-04  Hello World  _posts/hello-world.md

server

[!NOTE|label:references:]

• Starts a local server. By default, this is at http://localhost:4000/

$ hexo g
$ hexo s

# or
$ hexo generate
$ hexo server

# override the default port
$ hexo server -p 5000

# enable logger
$ hexo server --log

deploy

[!NOTE] deploy the website

$ hexo deploy

# or generate before deploy
$ hexo deploy --generate

deploy

[!NOTE|label:references:]

• github pagers

• with workflow: .github/workflows/pages.yml

  .github/workflows/pages.yml

  name: Pages
  
  on:
    push:
      branches:
        - main # default branch
  
  jobs:
    build:
      runs-on: ubuntu-latest
      steps:
        - uses: actions/checkout@v4
          with:
            token: $
            # If your repository depends on submodule, please see: https://github.com/actions/checkout
            submodules: recursive
        - name: Use Node.js 20
          uses: actions/setup-node@v4
          with:
            # Examples: 20, 18.19, >=16.20.2, lts/Iron, lts/Hydrogen, *, latest, current, node
            # Ref: https://github.com/actions/setup-node#supported-version-syntax
            node-version: "20"
        - name: Cache NPM dependencies
          uses: actions/cache@v4
          with:
            path: node_modules
            key: $-npm-cache
            restore-keys: |
              $-npm-cache
        - name: Install Dependencies
          run: npm install
        - name: Build
          run: npm run build
        - name: Upload Pages artifact
          uses: actions/upload-pages-artifact@v3
          with:
            path: ./public
    deploy:
      needs: build
      permissions:
        pages: write
        id-token: write
      environment:
        name: github-pages
        url: $
      runs-on: ubuntu-latest
      steps:
        - name: Deploy to GitHub Pages
          id: deployment
          uses: actions/deploy-pages@v4
  

• with hexo-deployer-git

  [!NOTE|label:references:]

  • hexojs/hexo-deployer-git
  • One-Command Deployment

  $ npm install hexo-deployer-git --save
  
  $ cat _config.yml
  deploy:
    type: git
    repo: https://github.com/<username>/<project>
    branch: gh-pages
  

syntax highlighting

[!NOTE|label:references:]

• Syntax Highlighting
• Highlight.js
• prismjs

• code block

  {% codeblock [title] [lang:language] [url] [link text] [additional options] %}
  code snippet
  {% endcodeblock %}

  # or
  {% code [title] [lang:language] [url] [link text] [additional options] %}
  code snippet
  {% endcode %}

  # or
  \`\`\`[language] [title] [url] [link text] [additional options]
  code snippet
  \`\`\`

Plugins

hexojs/hexo-util

$ npm install hexo-util --save