安装 Node.js

Node.js 的安装有多种方法：

  1. 访问 Node.js 官网直接下载安装，后期通过 npm 插件 n 进行版本管理。
  2. 通过 nvm 进行 Node.js 版本管理与安装。
  3. 通过 brew 安装。

因为 Hexo 部分主题使用的插件依赖旧的 Node 版本，所以最好使用 nvm 进行安装，这样方便切换 Node 版本。

卸载全局的 Node

如果通过非 nvm 的方式安装 Node，想要切换为 nvm 安装管理，则需要先完全卸载之前安装的全局 Node，以避免后续冲突。

  1. 删除以下目录(macOS)的 Node 相关文件和文件夹(node 和 node_modules)。

    1
    2
    3
    /usr/local/bin/
    /usr/local/lib
    /usr/local/include

  2. 如果是使用的 brew install node 安装的 Node，那么你还需要在终端中执行 brew uninstall node 命令来卸载。

1
2
3
4
5
6
7
8
sudo rm /usr/local/bin/npm
sudo rm /usr/local/share/man/man1/node.1
sudo rm /usr/local/lib/dtrace/node.d
sudo rm -rf ~/.npm
sudo rm -rf ~/.node-gyp
sudo rm /opt/local/bin/node
sudo rm /opt/local/include/node
sudo rm -rf /opt/local/lib/node_modules

安装 nvm

1
$ brew install nvm

通过 brew 安装 nvm 后，需要根据提示，配置环境变量，否则会出现找不到命令的情况。

  1. 创建 nvm 目录。
  2. 添加 nvm 环境变量到系统中（zshrc 或 bash_profile）。

nvm 管理 Node

1
2
3
4
5
# 安装指定版本的 Node
$ nvm install vX.X.X

# 将指定 Node 设置为默认版本
$ nvm alias default vXX.XX.X

输入以下命令，验证 Node 安装成功。

1
2
$ node -v
$ npm -v

配置 Hexo

安装

使用 npm（Node Package Manager，即node包管理器）安装 Hexo。

1
$ npm install -g hexo-cli

通过 nvm 安装的每个版本 Node，都要分别安装 Hexo。

可能有文件读写权限的问题，可以尝试 sudo。（如遇问题， Ctrl+C 可终止当前任务）

国内环境可以使用 npm 淘宝镜像。（更换后使用 cnpm 命令）

1
2
3
4
5
# 方法一：
$ npm install -g cnpm --registry=https://registry.npm.taobao.org

# 方法二：
$ npm config set registry http://registry.npm.taobao.org/

初始化博客

安装 Hexo 完成后，可以开始初始化一个博客站点。

1
2
3
$ cd <folder>
$ hexo init
$ npm install

新建完成后，指定文件夹的目录如下：

1
2
3
4
5
6
7
8
.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes
  • scaffolds, 模版文件夹。
  • source, 资源文件夹。除 _posts 文件夹之外，以下划线开头的文件或文件夹，隐藏的文件会被忽略。
  • themes, 主题文件夹。

配置博客

初始化博客成功后，会在项目的根目录生成 _config.yml 配置文件。可参考 Hexo 官方文档 进行配置。

生成静态博客

1
hexo generate

Hexo 生成的所有文件都放在 public 文件夹中。可以根据需要进行部署。

本地启动服务器调试

1
hexo server

启动成功之后访问 http://localhost:4000 就可以看到生成的博客主页。

部署到 github

  1. 在项目的 _config.yml 配置文件中，添加 Coding/Github 地址。
  2. 执行 hexo deploy 进行部署。
1
2
3
4
5
deploy:
  type: git               #部署方式
  repo: <repository url>  #仓库地址
  branch: [branch]        #分支名，可任意填写，我填写的是master
  message: [message]      #可不填，这是显示在提交记录里的描述信息，默认为日期

部署到 腾讯云 CloudBase

手动部署

  1. 安装 CloudBase 命令行工具
  2. 登录腾讯云账号
  3. 上传发布文件到静态网站托管目录下
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 安装 CloudBase
npm i -g @cloudbase/cli

# 登录
cloudbase login

# 删除 Cloudbase 上所有内容
tcb hosting delete -e $envId -r $region

# 重新在新构建的 public 目录下推送
# 已支持地域
# gz: ap-guangzhou
# bj: ap-beijing
# sh: ap-shanghai
tcb hosting deploy -e $envId -r $region

serverless 部署

  1. 安装 serverless 插件。($ npm install -g serverless）
  2. 项目目录下，创建 serverless.yml 文件，配置 Serverless 参数。（参考 https://cloud.tencent.com/document/product/1154/51080）
  3. 执行 sls deploy 进行部署。
1
2
3
4
5
6
7
8
9
10
11
# serverless.yml

myWebsite:
  component: '@serverless/tencent-website'
  inputs:
    code:
      src: ./localhexo/public # Upload static files generated by HEXO
      index: index.html
      error: index.html
    region: ap-guangzhou
    bucketName: my-bucket-hexo

自动部署

  1. 安装 hexo-deployer-tcb 插件 （$ npm install -g hexo-deployer-tcb）
  2. 在项目的 _config.yml 配置文件中，配置 CloudBase 参数。
  3. 执行 hexo deploy 进行部署。
1
2
3
4
5
deploy:
  type: tcb
  secretId: yourSecretId
  secretKey: yourSecretKey
  envId: yourEnvId

hexo-deployer-tcb 插件暂不支持设置 region。故项目只能部署在默认的shanghai区。

新建博文

1
$ hexo new [layout] <title>

Hexo 有三种布局：post (source/_posts)、page (source)和 draft (source/_drafts)，对应不同的路径，自定义的其他布局都将储存到 source/_posts 文件夹。
文章的布局默认为 post，可以通过修改 _config.yml 中的 default_layout 参数来指定默认布局。

更换主题

只需要将主题放在 themes 文件夹下。修改 _config.yml 内的 theme 设定，即可切换主题。

注意 Maupassant 主题需要安装 hexo-renderer-sass，其对 Node 有版本要求，建议切换到 v14.18.3 以下版本。

其他

Hexo 常用命令

  1. hexo generate (hexo g) 生成静态文件，会在当前目录下生成一个新的叫做public的文件夹
  2. hexo server (hexo s) 启动本地web服务，用于博客的预览
  3. hexo deploy (hexo d) 部署播客到远端（比如github, coding等平台）
  4. hexo clean 清除缓存文件 (db.json) 和已生成的静态文件 (public)

nvm 常用命令

  1. nvm ls-remote，查看 Node 远程版本库
  2. nvm install node ，安装最新版本的 Node
  3. nvm install vXX.XX.XX，安装某版本的 Node
  4. nvm uninstall vXX.XX.XX，卸载某版本的 Node
  5. nvm ls，查看已经安装的 Node 版本
  6. nvm use vXX.XX.XX，切换某版本为当前使用的版本
  7. nvm alias default vXX.XX.X，将某版本设置为 Node 的默认版本
  8. nvm which vXX.XX.XX，查看某版本的 Node 的安装目录

参考

https://juejin.cn/post/6844904104121073677