准备工作

安装Node.js

下地址： http://nodejs.cn/download/

在这里选择Add to PATH然后点Next继续就行了

img

安装Git

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

运行安装包，选择合适的安装位置，然后点Next。后面的安装步骤全部只要点Next就行了，不需要我们多余配置

Snipaste_2020-02-29_09-02-25.png

验证nodejs是否安装配置成功

我们安装完Git后，在桌面右键会有Git Bash Here，我们直接点开。会出来一个终端，我们分别执行下面的命令

1
2
node -v
npm -v

如果输出了版本号，那么证明配置成功，如果没有版本号，请重新安装nodejs（检查是否勾选Add to Path），或者手动为nodejs添加环境变量

image

安装cnpm（npm镜像，可选）

在git bash里面执行下面的命令

1
npm install -g cnpm --registry=https://registry.npm.taobao.org

检查cnpm是否安装成功，执行

1
cnpm -v

如果输出版本号就是安装成功了

安装Hexo

在git bash执行下面的命令安装hexo程序

1
2
3
npm install -g hexo-cli
或者
cnpm install hexo-cli -g

初始化博客

选择一个文件夹，然后右键打开Git Bash Here。例如：我在F盘新建了一个blog文件夹，就在blog文件夹下打开git bash

这里会显示你当前目录：

image

然后分别执行

1
2
hexo init
npm install

等待命令完成后，就完成了初始化。

预览博客

分别执行下面两个命令

1
2
npm install hexo-server
hexo s

image

然后会出来一段http开头的网址，我们复制下来然后在浏览器打开

就会出现这么一个页面了

image-20211126202718072

部署到Github

新建仓库名用户名.github.io并配置好仓库。

在当前项目直接远程连接自己的github上传文件，这会涉及到SSH（关于SSH是什么，网上有很多详细说明，可以自己查找学习）

上传插件安装+配置

安装上传插件：

1
npm install hexo-deployer-git --save

修改网站配置文件_config.yml,并添加deploy信息：repo的配置信息，替换成自己的项目名字

1
2
3
4
deploy:
  type: git 
  repo: git@github.com:用户名/用户名.github.io.git 
  branch: main

生成SSH key

按照网上的教程生成ssh key的时候是直接ssh-add,但是失败了，调查问题，发现原因是因为，我是第一次使用ssh-agent代理，第一次需要首先执行以下命令，以后就不需要了（具体原来请参考此处链接）：

1
ssh-agent bash

以上命令回车，启动进程，后再输入命令：

1
ssh-add ~/.ssh/id_rsa

1942510533-5c6f9e75aafcd_fix732

ssh，简单来讲，就是一个秘钥，其中，id_rsa是你这台电脑的私人秘钥，不能给别人看的，id_rsa.pub是公共秘钥，可以随便给别人看。把这个公钥放在GitHub上，这样当你链接GitHub自己的账户时，它就会根据公钥匹配你的私钥，当能够相互匹配时，才能够顺利的通过git上传你的文件到GitHub上。

而后在GitHub的setting中，找到SSH keys的设置选项，点击New SSH key，把你的id_rsa.pub里面的信息复制进去。
6

验证是否连接成功：

1
ssh -T git@github.com

会提示你下面这个，输入yes回车就行了

1
Are you sure you want to continue connecting (yes/no/[fingerprint])?

出现下面的语句说明你的ssh key已经配置好了

1
Hi wispyoureyes! You've successfully authenticated, but GitHub does not provide shell access.

7

ok,到了这一步，本地跟远程github的连接已经建立，在项目中，直接生成静态文件，上传就可以了：

1
2
3
$ hexo clean  //清除缓存文件db.json和已生成的静态文件public
$ hexo g   //生成网站静态文件到默认设置的public文件夹
$ hexo d   //部署网站到设定的仓库

Typora+自带Picgo-core配置

安装Picgo-core

第一种方法

直接在 Typora 中 偏好设置->图像 的上传服务中选择 PicGo-Core(command line）然后点击 下载或更新 ，等待下载即可。速度较慢

第二种方法

确保已经安装好了 node.js，直接打开 cmd 中运行 npm install picgo -g，等待安装即可。输入命令picgo -v查看版本，如果有输出则添加成功。

使用Github-plus

安装Github-plus

Typora 中点击 文件->偏好设置->图像->验证图片上传选项 ,下方红框内即为Picogo-core的安装位置。(去掉\picgo.exe)

image-20211127152714016

打开 cmd，运行

1
cd C:\Users\1\AppData\Roaming\Typora\picgo\win64

然后运行以下命令，即可安装。

1
picgo install github-plus

image-20211126182135826

配置Github-plus

打开配置文件

image-20211126182246867

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
  "picBed": {
    "uploader": "githubPlus",
    "current": "githubPlus",
    "githubPlus": {
      "branch": "main", // 仓库的分支
      "customUrl": "https://fastly.jsdelivr.net/gh/byzczc/images", // 访问的自定义url
      "origin": "github", // 存放的图片类型
      "repo": "byzczc/images", // 存放图片的仓库
      "path": "2021images", // 仓库中存放图片的文件夹，也可以不填
      "token": "" // 访问github的仓库的token，就是一开始生成的
    }
  },
  "picgoPlugins": {
    "picgo-plugin-github-plus": true // 启用github-plus插件
 }
}

上面的 customUrl，在这里我是使用了 jsdeliver cdn 进行加速访问，如果不知道是什么，就直接按照我的配置设置，或者不填。

image-20211126182357934

点击Typora的验证图片上传选项，如果显示验证成功，则表示配置成功。

图片重命名上传

picgo-plugin-rename-file 插件可以帮我们按照一定的规则将文件进行重命名，防止上传错误，具体设置请看picgo-plugin-rename-file。

输入命令安装:

1
picgo install rename-file

image-20211126212232806

安装完成后，打开picgo的配置文件C:\Users\用户名\.picgo\config.json末尾最后一个大括号前添加下面的配置信息。

1
2
3
4
,
"picgo-plugin-rename-file": {
  "format": "{y}-{m}-{d}-{hash}"
}

命名规则：

1
2
3
4
5
6
7
8
9
10
11
12
{y} 年，4位
{m} 月，2位
{d} 日期，2位
{h} 小时，2位
{i} 分钟，2位
{s} 秒，2位
{ms} 毫秒，3位(**v1.0.4**)
{timestamp} 时间戳(秒)，10位(**v1.0.4**)
{hash}，文件的md5值，32位
{origin}，文件原名（会去掉后缀）
{rand:}, 随机数，表示个数，默认为6个，示例：{rand：32}、{rand}
{localFolder:}, 表示层级 ，默认为1，示例：{localFolder:6}、{localFolder}

image-20211127153950241

自用完整备份

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
{
  "picBed": {
    "uploader": "githubPlus",
    "current": "githubPlus",
    "githubPlus": {
      "branch": "main", // 仓库的分支
      "customUrl": "https://fastly.jsdelivr.net/gh/byzczc/images", // 访问的自定义url
      "origin": "github", // 存放的图片类型
      "repo": "byzczc/images", // 存放图片的仓库
      "path": "2021images", // 仓库中存放图片的文件夹，也可以不填
      "token": "" // 访问github的仓库的token，就是一开始生成的
    }
  },
  "picgoPlugins": {
    "picgo-plugin-github-plus": true // 启用github-plus插件
    ,
    "picgo-plugin-rename-file": true
  },
  "picgo-plugin-github-plus": {
    "lastSync": "2021-11-27 03:39:53"
  },
  "picgo-plugin-rename-file": {
    "format": "{y}-{m}-{d}-{hash}"
  }
}