准备工具

Node.js 安装和配置

安装

下载路径：https://nodejs.org/en/download/

选择自己的系统和合适的版本

安装一直点 Next 就可以了，安装路径改为其他盘

Win+R 打开 cmd，运行 node -v 和 npm -v，看有没有输出版本信息

修改全局模块路径和缓存路径

当我们在执行 npm install express -g 命令时，g 表示 global 全局，会默认下载到 C 盘，可以放到其他盘

到 node.js 安装目录下面新建 node_global 和 node_cache 文件夹，在 node_global 文件夹下再建一个 node_modules 文件夹

命令行中执行以下两条命令：

1 2	npm config set prefix "D:\Program\nodejs\node_global" # 路径替换为自己的 npm config set cache "D:\Program\nodejs\node_cache"

若使用了 nvm：

1 2	npm config set prefix "D:\Program\nvm\v16.15.0\node_global" # 路径替换为自己的 npm config set cache "D:\Program\nvm\v16.15.0\node_cache"

在 node.js 的安装目录下，找到 node_modules/npm/npmrc 文件，用管理员模式打开编辑：

1
2
3

# 添加以下命令：
prefix=D:\Program\nodejs\node_global  # 路径替换为自己的
cache=D:\Program\nodejs\node_cache

配置环境变量

在系统变量中，新建

变量名：NODE_PATH

变量值：node_global 文件夹下的 node_modules 路径如：``D:\Program\nodejs\node_global\node_modules`
用户变量中的 Path 变量

将默认的 npm 路径如：``C:\Users\Domenic\AppData\Roaming\npm`

修改为新建的 node_global 路径如：``D:\Program\nodejs\node_global`

测试成果

配置完后，安装个 module 测试下，就安装最常用的 express 模块

管理员模式启动命令行，进行模块的全局安装

1	npm install express -g # -g 是全局安装的意思

Git 安装

下载地址：https://git-scm.com/downloads

安装就一直点 Next

Git 的默认编辑器是 Vim，这个不用改，如果想要用 Notepad++ 或者 Notepad2，可以添加环境变量

在系统变量的 path 里面添加 Notepad++ 的安装路径如：D:\Program\Notepad++

其他的编辑器配置方式也同理

1	notepad++ 文件名.后缀 # 在 git bash 中调用 notepad++ 打开文件

测试是否安装成功：

1	git --version # 命令行执行此代码

Hexo 安装

管理员模式启动命令行，进行 hexo-cli 的全局安装

npm install hexo-cli -g
# 安装完可以用以下命令查看是否安装成功
hexo -v                           # 查看 hexo 工具的版本
npm list -g                       # 查看全局安装的模块列表

搭建仓库

我们使用 Github 来搭建仓库网址：https://github.com/

Github 账号的用户名，注册邮箱，密码很重要，因为在命令中需要使用这些信息

点击 New 来新建仓库

仓库名必须是 Github 用户名加上 .github.io 如：domeniczz.github.io

然后勾选 Add a README file，Add .gitignore 和 Choose a license 可以不勾选

之后就可以点击创建仓库了

SSH

打开文件资源管理器，进入任意一个文件夹如：D:\Repository\

右键，点击 Git Bash Here，启动 Git Bash 命令行窗口

# 在 Git Bash 执行以下命令
ssh                               # 检查电脑中有没有安装 ssh
# 生成 ssh key
ssh-keygen -t rsa -C "你的账号邮箱地址"
# Linux 环境的粘贴快捷键是：Shift + insert
# 之后要敲 4 次回车（出现冒号 ':' 就敲回车）

之后进入如下路径：C:\Users\用户名\.ssh（这就是刚刚的命令生成的东西）

找到 id_rsa.pub 文件，然后使用 Notepad++ 或者其他编辑器打开，复制所有内容

Ctrl + A 全选，Ctrl + C 复制

之后进入 Github，点击右上角的用户头像，点击 Settings，在选择 SSH and GPG keys

点击 New SSH key 新建一个 ssh key

Title 填写什么无所谓如：domeniczz blog

Key 中把刚刚复制的 id_rsa.pub 中的内容粘贴进去

之后测试 ssh 是否绑定成功：

# 在 Git Bash 执行以下命令
ssh -T git@github.com
# 出现：Are you sure you want to continue connecting (yes/no/[fingerprint])?
# 输入 yes，回车
# 显示：Hi domeniczz! You've successfully authenticated, but GitHub does not provide shell access.
# 绑定成功！

如果要添加第二个仓库，比如 Gitee，需要再次操作一边 SSH 模块的步骤

本地生成博客内容

本地创建一个文件夹如：D:\Repository\Domenic_Zhang_Blog

用管理员模式启动 Git Bash，之后用 cd 命令到文件夹如：cd D:/Repository/Domenic_Zhang_Blog

# 在 Git Bash 中执行命令
npm install -g hexo               # 如果之前没有安装，就安装，安装了的不用管
hexo init                         # 初始化 hexo 博客
# 如果出现 fatal: unable to access 'heeps://github.com/hexojs/hexo-starter.git'
# 不要慌，网络问题，只是没有连接上 Github，多试几次
# 显示：INFO  Start blogging with Hexo!
# 初始化成功！

执行 hexo init

若提示 hexo: command not found，是因为没有正确配置环境变量
若提示 Failed to install dependencies，是因为没有用管理员身份启动

Hexo 是开源的框架，hexo init 是把 hexo 的开源仓库拷贝到了本地

1 2	# 接着在 Git Bash 中执行命令 hexo s # server，打开了本地的服务器

如果提示防火墙权限，就点击允许访问

显示：INFO Hexo is running at http://localhost:4000 . Press Ctrl+C to stop. 说明打开服务器成功

我们可以复制网址 http://localhost:4000 来访问

Linux 环境的复制快捷键是：Ctrl + insert，按 Ctrl + C 就是关闭本地服务器

发布博客到互联网

进入 Github 仓库，按照以下步骤获取到仓库

进入本地博客的文件夹如：D:\Repository\Domenic_Zhang_Blog

找到 _config.yml，使用 Notepad++ 或者其他编辑器打开

# 拉到文件的最后
# 默认的是: 
deploy: 
  type: ''
# 改为: 
# 注意，输入的内容和 ':' 之间要有一个空格
deploy: 
  type: git
  repository: 
    # github: https://github.com/domeniczz/domeniczz.github.io.git
    github: git@github.com:domeniczz/domeniczz.github.io.git # Github 仓库 ssh 地址
  branch: master                  # Github 主分支默认是 main，我改成了 master，没改过的就填 main

之后在 Git Bash 里面依次执行命令

Git Bash 的命令路径是本地博客的路径如：/d/repository/Domenic_Zhang_Blog

# 安装 hexo-deployer-git 自动部署发布工具
npm install hexo-deployer-git --save

# 若安装报错，可以先清除一下再安装
rm -rf .deploy_git
npm install hexo-deployer-git --save
-----------------------------------------------------------------------------------------------------
npm list hexo-deployer-git        # 检查是否安装成功
hexo g                            # generate，生成页面，放在 public 文件夹下面生成当日日期的文件路径下
                                  # 如：./public/2021/12/27/hello-world/
hexo d                            # deploy，该命令就是把本地的博客的文件上传到 GitHub 仓库

获取个人博客的 url：

进入仓库的设置，往下拉找到 Pages，点击 Visit site

就会看到：Your site is published at https://domeniczz.github.io/.../

主题安装

主题推荐

Preview: http://cofess.github.io/

Melody: https://github.com/Molunerfinn/hexo-theme-melody

Preview: https://flytreeleft.org/

Butterfly: https://github.com/jerryc127/hexo-theme-butterfly

Preview: https://butterfly.js.org/ https://crazywong.com/

Diaspora: https://github.com/Fechin/hexo-theme-diaspora

Preview: https://fech.in/

Matery: https://github.com/blinkfox/hexo-theme-matery

Preview: http://blinkfox.com/

Maupassant: https://github.com/tufu9441/maupassant-hexo

Preview: https://www.haomwei.com/

示例安装

我选择安装的是 butterfly 主题

依次执行以下步骤（使用 npm 命令的时候，命令行要以管理员身份运行）

# 安装方法一
# 用 git 把 master 分支克隆到 themes/butterfly 文件夹下
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly
------------------------------------------------------------------------------------------------------
# 安装方法二
npm i hexo-theme-butterfly        # Hexo 版本要 5.0.0 以上，安装后放在 ./node_modules
npm update hexo-theme-butterfly   # 升级
# 升级后去 https://github.com/jerryc127/hexo-theme-butterfly/releases 查看更新内容

修改 Hexo 根目录下的 _config.yml

1	theme: butterfly # 主题设置为 butterfly

下载安装 pug 以及 stylus 的渲染器

1 2	npm install hexo-renderer-pug hexo-renderer-stylus --save npm list # 检查有没有安装上

为了减少升级主题后带来的不便，建议：

如果已经在 source/_data/ 创建了 butterfly.yml，删除掉
在 hexo 的根目录创建文件 _config.butterfly.yml，并把 主题目录 的 _config.yml 内容复製到 _config.butterfly.yml 中（以后只在 _config.butterfly.yml 中进行配置就行）

最后，可以执行 hexo g 生成页面，再执行 hexo s 来开启本地服务器，预览页面

更多的使用方法可以前往 https://butterfly.js.org/ 查看安装文档

Hexo 使用

Hexo 的使用文档：https://hexo.io/zh-cn/docs

命令

# 括号内是简写
hexo g --deploy(-d)               # 文件生成后立即部署网站
hexo g --watch(-w)                # ！这个命令很有用，实时监控文件的变化，适合调试
                                  # 更改文件后可以在新的命令行窗口执行 hexo s 来查看效果
-----------------------------------------------------------------------------------------------------
hexo s --port(-p)                 # 更改端口，防止端口被占用
hexo s --static(-s)               # 直接使用 public 目录下生成的静态文件，不会重新生成
                                  # 因为 hexo s 相当于 hexo g 加上 hexo s -s，会重新生成一遍
-----------------------------------------------------------------------------------------------------
hexo list <type>                  # 如：hexo list post 可以显示出所有的文章
                                  # 如：hexo list route 可以显示出网站文件架构
-----------------------------------------------------------------------------------------------------
hexo clean                        # 清除缓存文件(db.json)和已生成的静态文件(public)
                                  # 如果发现有错误矫正不了，可以使用此命令
hexo --safe                       # 安全模式，不会载入插件和脚本，当安装新插件出问题时，可尝试用安全模式
-----------------------------------------------------------------------------------------------------

配置文件

先创建一个备份 _config_backup.yml

# 可以调用自定义的配置文件
hexo s --config _config_custom.yml
# 也可以同时调用多个（Hexo 会自动合并成一个 _multiconfig.yml，排在后面的的配置文件优先级高）
hexo s --config _custom_1.yml,_custom_2.yml
------------------------------------------------------------------------------------------------------
# 如果想长期切换为其他的配置文件
hexo --config _config_custom.yml  # 把配置文件指定为 _config_custom.yml
# 我没有更换

添加 Hexo 需要包含、剔除、忽略的文件（Hexo 默认忽略隐藏文件）：

# Include / Exclude file(s)
## include:/exclude: options only apply to the 'source/' folder
include:
  - ".nojekyll" # this file will tell GitHub not using Jekyll to render site
exclude:
  - ".DS_Store"
  - "desktop.files.json"
  - "desktop.files"
ignore:
  - "desktop.files.json"
  - "desktop.files"

文章插入图片：

1	npm install hexo-renderer-marked # 安装相应的插件（新版 hexo 可自带了）

# 修改根目录的 _config.yml
# 启用 asset 功能（资源文件夹）
post_asset_folder: true # enabled, automatically resolved asset image to its corresponding post’s 
marked:
  prependRoot: true
  postAsset: true

1
2
3

# markdown 博客文件中，图片路径要写成：
{% asset_img slug [title] %} # slug 是图片的文件名，title 是文章的标题（因为图片放在同名文件夹下）
                             # 如：{% asset_img new.png [个人博客搭建教程] %}

中英文间自动插入空格：

# Insert a space between Chinese character and English character (中英文之间添加空格)
pangu:
  enable: true # 改为 true
  field: site # site/post

写作

Hexo 创建的文章模板在 ./scaffolds 下面

# 命令行方式新建 博客文章
hexo new "Your Artical Title"     # hexo 会在 ./source/_posts 文件夹下面创建该名 .md 文件
                                  # 其中的 title 就是文章标题，date 就是创建日期，tags 是文章标签
hexo new "title" --replace(-r)    # 若存在同名文章，就将其替换
                 --path(-p)       # 自定义新文章的路径
-----------------------------------------------------------------------------------------------------
# 命令行方式新建 博客文章
hexo new draft "Draft Title"      # hexo 会在 ./source/_drafts 文件夹下面创建该名 .md 文件
                                  # 草稿文章不会被渲染，不显示在博客中
-----------------------------------------------------------------------------------------------------
hexo new page "Page Title"        # hexo 会在 ./source/_page 文件夹下面创建该名 .md 文件

自己也可以在 scaffolds 文件夹下面创建自定义模板

个人博客搭建教程 - Hexo