hexo

• 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

  • atom-one-dark

  • base16-apprentice`

  • base16-sandcastle

  • base16-solarized-dark

# _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

  name: Pages
  
  on:
    push:
      branches:
        - main # default branch
  
  jobs:
    build:
      runs-on: ubuntu-latest
      steps:
        - uses: actions/checkout@v4
          with:
            token: ${{ secrets.GITHUB_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: ${{ runner.OS }}-npm-cache
            restore-keys: |
              ${{ runner.OS }}-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: ${{ steps.deployment.outputs.page_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