Set up hexo page in WSL system

Posted on In

This post mainly introduces how to build up a webpage from scratch using Hexo framework based on WSL system.

Install and configuration procedure

  • Install nvm

    $ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.2/install.sh | bash

    Running either of the above commands downloads a script and runs it. The script clones the nvm repository to ~/.nvm, and attempts to add the source lines from the snippet below to the correct profile file (~/.bash_profile, ~/.zshrc, ~/.profile, or ~/.bashrc).

    1
    2
    export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
    [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm

    On Linux, after running the install script, if you get nvm: command not found or see no feedback from your terminal after you type command -v nvm, simply close your current terminal, open a new terminal, and try verifying again. Alternatively, you can run the following commands for the different shells on the command line:

    bash: source ~/.bashrc

    zsh: source ~/.zshrc

    ksh: . ~/.profile

    These should pick up the nvm command.

  • Install hexo

    $ npm install -g hexo-cli

    Advanced users may prefer to install and use hexo package instead.

    1
    npm install hexo

    Once installed, you can run Hexo in two ways:

    1. npx hexo <command>
    2. Linux users can set relative path of node_modules/ folder:
    1
    echo 'PATH="$PATH:./node_modules/.bin"' >> ~/.profile

    then run Hexo using hexo <command>

  • Initialize webpage folder

    1
    2
    hexo init <webpage_name>
    cd <webpage_name>

  • Download configuration packages

    For example

    1
    2
    3
    4
    # Download local search toolkit
    npm install hexo-generator-searchdb
    # Download NEXT theme
    npm install hexo-theme-next

Troubleshooting