个人博客搭建之三：安装node.js和hexo

Posted on Edited on In , Changyan: Symbols count in article: 11k Reading time ≈ 10 mins.

本文介绍Node.js运行环境的基本概念和安装步骤，并在此基础上下载安装hexo博客框架，发布到github上。

参考链接

  1. 枫叶知乎博客学习专栏：八篇文章构成的知乎专栏，作者枫叶，手把手指导从github建立个人博客，以及相关美化操作
  2. Git官网：Git is a free and open source distributed version control system ... [一个免费开源的分布式版本控制系统]
  3. Git维基：Git的wikipedia页面
  4. My GitHub：我的GitHub主页
  5. Node.js：一个基于 Chrome V8 引擎 的 JavaScript 运行时环境 a JavaScript runtime built on Chrome's V8 JavaScript engine
  6. hexo：一个“快速、简洁且高效”的博客框架，支持Markdown（GFM所有功能），可一键部署到 GitHub Pages 或其他平台

开始条件

本人具备的资源和知识条件（2022-5-10）

  1. Github已有注册账户，可方便登录访问；
  2. 原购买一个域名nyjing.online，闲置中；
  3. MarkDown基本了解；
  4. HTML、CSS知道些皮毛；
  5. JavaScript等基本不懂。
  6. Git工具了解一些：《个人博客搭建之一：git工具》
  7. Git与GitHub已绑定：《个人博客搭建之二：Git绑定GitHub及基本操作》

安装node.js和Hexo

对应枫叶知乎博客学习专栏的第5篇;
日期：2022-5-10

Node.js

Node.js介绍

Node.js® 是一个基于 Chrome V8 引擎 的 JavaScript 运行时环境。

V8 is Google’s open source high-performance JavaScript and WebAssembly engine, written in C++. It is used in Chrome and in Node.js, among others. It implements ECMAScript and WebAssembly, and runs on Windows 7 or later, macOS 10.12+, and Linux systems that use x64, IA-32, ARM, or MIPS processors. V8 can run standalone, or can be embedded into any C++ application.

  • 作为一个异步事件驱动 [asynchronous event-driven] 的 JavaScript 运行时 [runtime]，Node.js 被设计用来构建可扩展[scalable]的网络应用。
  • 可并发处理多个连接，每个连接都会触发一个回调[callback ]，而当没有可做的事情时，Node.js 就会进入休眠状态。
  • Node.js is similar in design to, and influenced by, systems like Ruby's Event Machine and Python's Twisted. Node.js takes the event model a bit further. It presents an event loop [事件循环] as a runtime construct instead of as a library.
  • HTTP is a first-class citizen in Node.js, designed with streaming and low latency [流式和低延迟] in mind. This makes Node.js well suited for the foundation of a web library or framework.
  • Node.js being designed without threads doesn't mean you can't take advantage of multiple cores in your environment.

Node.js的安装和配置

  1. 下载Node.js官网最新LTS版。当日为：16.15.0

  2. 安装，除改安装位置到D盘外D:\Program Files\nodejs，其余全默认选项。

  3. 点击程序快捷方式：Node.js command prompt Your environment has been set up for using Node.js 16.15.0 (x64) and npm.

  4. 使用cmd（或git bash打开的MINGW终端）验证安装

    1
    2
    3
    4
    5
    6
    7
    JING@LAPTOP-DEHH91FV MINGW64 ~
    $ node -v
    v16.15.0

    JING@LAPTOP-DEHH91FV MINGW64 ~
    $ npm -v
    8.5.5

  5. 设置npm在安装全局模块时的路径和环境变量

    因为如果不设置的话，安装模块的时候就会把模块装到C盘，占用C盘的空间，并且有可能安装好hexo后却无法使用. —— 枫叶

    1. 在 nodejs 文件夹中新建两个空文件夹 node_cache、node_global；
    2. cmd命令1：npm config set prefix "D:\Program Files\nodejs\node_global"
    3. cmd命令1：npm config set cache "D:\Program Files\nodejs\node_cache"
    4. 新建系统变量：NODE_PATH = D:\Program Files\nodejs\node_global\node_modules
    5. 编辑用户变量里的Path，添加npm的路径：D:\Program Files\nodejs\node_global

  6. cmd安装webpack：npm install webpack -g

    若未对上述两个文件夹属性设置为全权权限，会报错npm ERR! 执行正确，则webpack模块将安装在设置的默认文件夹中，具体为\node_global\node_modules\webpack

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    JING@LAPTOP-DEHH91FV MINGW64 ~
    $ npm install webpack -g

    added 75 packages, and audited 76 packages in 21s

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

    found 0 vulnerabilities
    npm notice
    npm notice New minor version of npm available! 8.5.5 -> 8.9.0
    npm notice Changelog: <https://github.com/npm/cli/releases/tag/v8.9.0>
    npm notice Run `npm install -g npm@8.9.0` to update!
    npm notice

    npm提示存在需funding（资金支持）的packages，不处理。 npm提示有版本更新，暂不处理。

Hexo

Hexo 是待搭建的个人博客网站的框架，在安装之前在GitHub上创立一个仓库nyjingle.github.io，勾选添加一个README.MD文件

注：nyjingle为github用户名。

此时登录页面 https://nyjingle.github.io/ 实际展示的为README.md的内容。

1
2
nyjingle.github.io
本站正在建设中，请稍后访问。。

Hexo的安转和运行

  1. 在D盘建立一个文件夹 Blog，点开 Blog 文件夹，鼠标右键打开 Git Bush Here，输入npm命令安装Hexo：npm install -g hexo-cli

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    JING@LAPTOP-DEHH91FV MINGW64 /d/MyStuday/git_codelife/Blog
    $ hexo install -g hexo-cli
    Usage: hexo <command>

    Commands:
      help     Get help on a command.
      init     Create a new Hexo folder.
      version  Display version information.

    Global Options:
      --config  Specify config file instead of using _config.yml
      --cwd     Specify the CWD
      --debug   Display all verbose messages in the terminal
      --draft   Display draft posts
      --safe    Disable all plugins and scripts
      --silent  Hide output on console

    For more help, you can use 'hexo help [command]' for the detailed information
    or you can check the docs: http://hexo.io/docs/

  2. 输入检查版本命令：hexo version

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    $ hexo version
    hexo-cli: 4.3.0
    os: win32 10.0.19044
    node: 16.15.0
    v8: 9.4.146.24-node.20
    uv: 1.43.0
    zlib: 1.2.11
    brotli: 1.0.9
    ares: 1.18.1
    modules: 93
    nghttp2: 1.47.0
    napi: 8
    llhttp: 6.0.4
    openssl: 1.1.1n+quic
    cldr: 40.0
    icu: 70.1
    tz: 2021a3
    unicode: 14.0
    ngtcp2: 0.1.0-DEV
    nghttp3: 0.1.0-DEV

  3. 输入初始化博客命令： hexo init

    1
    2
    3
    4
    5
    JING@LAPTOP-DEHH91FV MINGW64 /d/MyStuday/git_codelife/Blog
    $ hexo init
    INFO  Cloning hexo-starter https://github.com/hexojs/hexo-starter.git
    INFO  Install dependencies
    INFO  Start blogging with Hexo!

  4. 输入静态部署命令：hexo g

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    JING@LAPTOP-DEHH91FV MINGW64 /d/MyStuday/git_codelife/Blog
    $ hexo g
    INFO  Validating config
    INFO  Start processing
    INFO  Files loaded in 136 ms
    (node:30036) Warning: Accessing non-existent property 'lineno' of module exports inside circular dependency
    (Use `node --trace-warnings ...` to show where the warning was created)
    (node:30036) Warning: Accessing non-existent property 'column' of module exports inside circular dependency
    (node:30036) Warning: Accessing non-existent property 'filename' of module exports inside circular dependency
    (node:30036) Warning: Accessing non-existent property 'lineno' of module exports inside circular dependency
    (node:30036) Warning: Accessing non-existent property 'column' of module exports inside circular dependency
    (node:30036) Warning: Accessing non-existent property 'filename' of module exports inside circular dependency
    INFO  Generated: archives/index.html
    INFO  Generated: index.html
    INFO  Generated: archives/2022/05/index.html
    INFO  Generated: fancybox/jquery.fancybox.min.css
    INFO  Generated: js/script.js
    INFO  Generated: css/fonts/FontAwesome.otf
    INFO  Generated: archives/2022/index.html
    INFO  Generated: js/jquery-3.4.1.min.js
    INFO  Generated: css/images/banner.jpg
    INFO  Generated: css/style.css
    INFO  Generated: fancybox/jquery.fancybox.min.js
    INFO  Generated: css/fonts/fontawesome-webfont.eot
    INFO  Generated: css/fonts/fontawesome-webfont.ttf
    INFO  Generated: css/fonts/fontawesome-webfont.woff
    INFO  Generated: css/fonts/fontawesome-webfont.woff2
    INFO  Generated: 2022/05/10/hello-world/index.html
    INFO  Generated: css/fonts/fontawesome-webfont.svg
    INFO  17 files generated in 443 ms

    一堆warning暂不纠结。

  5. 网页已经部署完成，输入 hexo s 命令可以查看 http://localhost:4000/

    1
    2
    3
    4
    5
    JING@LAPTOP-DEHH91FV MINGW64 /d/MyStuday/git_codelife/Blog
    $ hexo s
    INFO  Validating config
    INFO  Start processing
    INFO  Hexo is running at http://localhost:4000/ . Press Ctrl+C to stop.

    hexo框架默认博客，含一篇 Hello World 的博文。MINGW终端界面Ctrl+C停止服务后，网站不可访问。

将Hexo部署到GitHub

  1. 回到 Blog 文件夹，用笔记本打开 _config.yml 文件，下滑到文件底部，填上如下内容：

    1
    2
    3
    4
    deploy:
      type: git
      repository: https://github.com/nyjingle/nyjingle.github.io.git  #仓库地址
      branch: main

  2. 在 Blog 文件夹中，打开 Git Bash，安装Git部署插件，输入命令：npm install hexo-deployer-git --save

    1
    2
    3
    4
    5
    6
    7
    8
    9
    JING@LAPTOP-DEHH91FV MINGW64 /d/MyStuday/git_codelife/Blog
    $ npm install hexo-deployer-git --save

    added 1 package, and audited 252 packages in 2s

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

    found 0 vulnerabilities

  3. 分别输入以下三条命令

    1. hexo clean #清除缓存文件 db.json 和已生成的静态文件 public
    2. hexo g #生成网站静态文件到默认设置的 public 文件夹(hexo generate 的缩写)
    3. hexo d #自动生成网站静态文件，并部署到设定的仓库(hexo deploy 的缩写)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    $ hexo clean
    INFO  Validating config
    INFO  Deleted database.
    INFO  Deleted public folder.

    $ hexo g
    INFO  Validating config
    INFO  Start processing
    INFO  Files loaded in 122 ms
    (node:22916) Warning: Accessing non-existent property 'lineno' of module exports inside circular dependency
    (Use `node --trace-warnings ...` to show where the warning was created)
    (node:22916) Warning: Accessing non-existent property 'column' of module exports inside circular dependency
    (node:22916) Warning: Accessing non-existent property 'filename' of module exports inside circular dependency
    (node:22916) Warning: Accessing non-existent property 'lineno' of module exports inside circular dependency
    (node:22916) Warning: Accessing non-existent property 'column' of module exports inside circular dependency
    (node:22916) Warning: Accessing non-existent property 'filename' of module exports inside circular dependency
    INFO  Generated: archives/index.html
    INFO  Generated: archives/2022/index.html
    INFO  Generated: archives/2022/05/index.html
    INFO  Generated: index.html
    INFO  Generated: js/script.js
    INFO  Generated: fancybox/jquery.fancybox.min.css
    INFO  Generated: css/style.css
    INFO  Generated: css/fonts/fontawesome-webfont.woff2
    INFO  Generated: fancybox/jquery.fancybox.min.js
    INFO  Generated: css/images/banner.jpg
    INFO  Generated: js/jquery-3.4.1.min.js
    INFO  Generated: css/fonts/FontAwesome.otf
    INFO  Generated: css/fonts/fontawesome-webfont.eot
    INFO  Generated: css/fonts/fontawesome-webfont.ttf
    INFO  Generated: 2022/05/10/hello-world/index.html
    INFO  Generated: css/fonts/fontawesome-webfont.woff
    INFO  Generated: css/fonts/fontawesome-webfont.svg
    INFO  17 files generated in 432 ms

    第三条指令运行时出错：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    $ hexo d
    INFO  Validating config
    INFO  Deploying: git
    INFO  Clearing .deploy_git folder...
    INFO  Copying files from public folder...
    INFO  Copying files from extend dirs...
    On branch master
    nothing to commit, working tree clean
    fatal: unable to access 'https://github.com/nyjingle/nyjingle.github.io.git/': OpenSSL SSL_read: Connection was reset, errno 10054
    FATAL {
      err: Error: Spawn failed
          at ChildProcess.<anonymous> (D:\MyStuday\git_codelife\Blog\node_modules\hexo-util\lib\spawn.js:51:21)
          at ChildProcess.emit (node:events:527:28)
          at ChildProcess.cp.emit (D:\MyStuday\git_codelife\Blog\node_modules\cross-spawn\lib\enoent.js:34:29)
          at Process.ChildProcess._handle.onexit (node:internal/child_process:291:12) {
        code: 128
      }
    } Something's wrong. Maybe you can find the solution here: %s https://hexo.io/docs/troubleshooting.html

    尝试了枫叶博客下留言中同样问题的处理方法，无效果。
    第二日，先输入命令ssh -T git@github.com验证与github连接正常，再输入上述3条命令，顺利发布：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    $ hexo d
    INFO  Validating config
    INFO  Deploying: git
    INFO  Clearing .deploy_git folder...
    INFO  Copying files from public folder...
    INFO  Copying files from extend dirs...
    warning: LF will be replaced by CRLF in 2022/05/10/hello-world/index.html.
    The file will have its original line endings in your working directory
    warning: LF will be replaced by CRLF in archives/2022/05/index.html.
    The file will have its original line endings in your working directory
    warning: LF will be replaced by CRLF in archives/2022/index.html.
    The file will have its original line endings in your working directory
    warning: LF will be replaced by CRLF in archives/index.html.
    The file will have its original line endings in your working directory
    warning: LF will be replaced by CRLF in css/fonts/fontawesome-webfont.svg.
    The file will have its original line endings in your working directory
    warning: LF will be replaced by CRLF in css/style.css.
    The file will have its original line endings in your working directory
    warning: LF will be replaced by CRLF in fancybox/jquery.fancybox.min.js.
    The file will have its original line endings in your working directory
    warning: LF will be replaced by CRLF in index.html.
    The file will have its original line endings in your working directory
    warning: LF will be replaced by CRLF in js/jquery-3.4.1.min.js.
    The file will have its original line endings in your working directory
    warning: LF will be replaced by CRLF in js/script.js.
    The file will have its original line endings in your working directory
    [master 0e5927c] Site updated: 2022-05-11 15:32:09
    2 files changed, 2 insertions(+), 2 deletions(-)
    Enumerating objects: 50, done.
    Counting objects: 100% (50/50), done.
    Delta compression using up to 12 threads
    Compressing objects: 100% (34/34), done.
    Writing objects: 100% (50/50), 883.63 KiB | 11.48 MiB/s, done.
    Total 50 (delta 7), reused 0 (delta 0), pack-reused 0
    remote: Resolving deltas: 100% (7/7), done.
    To https://github.com/nyjingle/nyjingle.github.io.git
    + 6ba8af0...0e5927c HEAD -> main (forced update)
    branch 'master' set up to track 'https://github.com/nyjingle/nyjingle.github.io.git/main'.
    INFO  Deploy done: git

  4. 登录博客：https://nyjingle.github.io/

    成功登录，效果与本地浏览一致。 主页当前状态存在问题：

    1. rss feed点击404，无atom.xml文件
    2. 搜索框点击搜索无反应。