准备工具

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 的全局安装

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

搭建仓库

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

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

image-20211226154022519

点击 New 来新建仓库

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

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

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

SSH

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

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

1
2
3
4
5
6
# 在 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 是否绑定成功:

1
2
3
4
5
6
# 在 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

1
2
3
4
5
6
7
# 在 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 仓库,按照以下步骤获取到仓库

image-20211226172830653

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

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

1
2
3
4
5
6
7
8
9
10
11
12
# 拉到文件的最后
# 默认的是:
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

1
2
3
4
5
6
7
8
9
10
11
# 安装 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/.../

主题安装

主题推荐

推荐几个主题:

Pure: https://github.com/cofess/hexo-theme-pure

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 命令的时候,命令行要以管理员身份运行)

1
2
3
4
5
6
7
8
# 安装方法一
# 用 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 # 检查有没有安装上

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

  1. 如果已经在 source/_data/ 创建了 butterfly.yml,删除掉
  2. 在 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

命令

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# 括号内是简写
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

1
2
3
4
5
6
7
8
# 可以调用自定义的配置文件
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 默认忽略隐藏文件):

1
2
3
4
5
6
7
8
9
10
11
# 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 可自带了)
1
2
3
4
5
6
# 修改根目录的 _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 [个人博客搭建教程] %}

中英文间自动插入空格:

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

写作

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

1
2
3
4
5
6
7
8
9
10
11
# 命令行方式新建 博客文章
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 文件夹下面创建自定义模板