本地初始化

下载Git，node.js，下载淘宝镜像cnpm

注意:这里面我基本上都是用cnpm代替npm来安装,下载速度快

查看版本

node -v

npm -v

cnpm config get registry

image-20210722121729965

下载hexo

全局安装：

1
cnpm install hexo-cli -g

image-20210722122027588

image-20210722122128829

检查安装情况：hexo -v，出现一下信息

hexo-cli: 4.3.0
os: win32 10.0.19042
node: 12.16.3
v8: 7.8.279.23-node.35
uv: 1.34.2
zlib: 1.2.11
brotli: 1.0.7
ares: 1.16.0
modules: 72
nghttp2: 1.40.0
napi: 5
llhttp: 2.0.4
http_parser: 2.9.3
openssl: 1.1.1g
cldr: 36.0
icu: 65.1
tz: 2019c
unicode: 12.1

接下来，进入到你要放博客的静态文件的位置，右键，选择 Git Bash Here，打开 Git Bash 之后，输入

1
2
3
hexo init blog		初始化创建，会在你所在位置(MyBlog)创建 blog 文件夹
cd blog
cnpm install		进一步安装hexo所需文件

image-20210722123653572

image-20210722124101492

其中 source 就是存放后面我们写博客的源文件的文件夹。

1
2
3
hexo clean			清除所有记录
hexo generate		生成静态网页
hexo server			启动服务,默认不加端口号是 4000, hexo server -p 80 表示端口号为 80

image-20210722125039269

image-20210722125625772

浏览器输入：http://localhost:4000

image-20210722125225209

按下 Ctrl+C 可以停止服务

修改主题

首先我们进入到你的本地博客目录下的themes目录下

我们选择一下自己喜欢的主题，这里是Butterfly，克隆你选择的主题的GitHub仓库到本地。

1
git clone https://github.com/jerryc127/hexo-theme-butterfly.git

image-20210722133947193

然后修改你博客根目录（我的则是blog目录）下的_config.yml文件里的theme配置来更换使用的主题

1
2
3
4
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: hexo-theme-butterfly

还有就是我并没有网上说的那样，将Butterfly的配置文件_config.yml（路径：\themes\hexo-theme-butterfly\）移动到source/_data下，因为我尝试了一下，在移动之后的那个_data里面修改配置文件的话，我的看不到修改后的效果，所以后面的修改都还是在上述主题路径的那个配置文件里修改。

然后重新输入

1
2
3
hexo clean			清除所有记录
hexo generate		生成静态网页
hexo server			启动服务,默认不加端口号是 4000, hexo server -p 80 表示端口号为 80

这里我报错了

1
extends includes/layout.pug block content include ./includes/mixins/post-ui.pug #recent-posts.recent-posts +postUI include includes/pagination.pug

查了一下需要再下载一些东西

1
cnpm install --save hexo-renderer-jade hexo-generator-feed hexo-generator-sitemap hexo-browsersync hexo-generator-archive

上传到gitee仓库（在维护，，，）

创建仓库

image-20210722152720507

在项目根目录下安装git部署插件

之后就可以使用 hexo deploy（或简写 hexo d）将项目部署到gitee远程仓库

1
cnpm install hexo-deployer-git --save

配置_config.yml文件，拉到最下面，输入我们创建的仓库地址（注意下面三个属性的分号之后都有一个空格）

1
2
3
4
deploy:
  type: git
  repo: https://gitee.com/nilonger/blog.git
  branch: master

然后就素质三连

1
2
3
4
5
hexo clean			清除所有记录
hexo generate		生成静态网页
hexo d				推送部署到gitee
或者直接输入：
hexo clean && hexo g && hexo d

将项目部署到gitee远程仓库这一步骤会让你输入用户名和密码

开启Gitee Pages 静态网页托管服务

image-20210722155727091

裂开了，怎么在维护，再见，我去github了

image-20210722161525725

上传到github仓库

创建仓库

记得仓库名要规范：用户名+github.io

image-20210722172833230

复制github的路径

image-20210722180218722

生成并配置一下ssh公钥，或者已经有公钥了，直接查找本机的ssh公钥，路径C:\Users\主机名\.ssh

修改_config.yml文件

1
2
deploy:
type: git  repo: git@github.com:nilonger/nilonger.github.io.git  branch: master

素质三连

1
2
3
4
hexo clean			清除所有记录
hexo generate		生成静态网页
hexo d				推送部署到github
或者：hexo clean && hexo g && hexo d

记得选择yes

image-20210722180154137

推送成功之后，就可以在浏览器输入下面链接，就可以打开了

1
nilonger.github.io

上传到github图片现实问题

安装hexo-asset-image插件

1
cnpm install https://github.com/7ym0n/hexo-asset-image --save

该插件用于在生成静态网页时生成正确的图片访问路径

设置typora

image-20210727183349248

该设置目的：使图片保存在.md文件的同名文件夹下，且该同名文件夹和.md文件在同一个文件夹下。同时该设置可以方便的直接粘贴图片到文件中即可，图片路径会自动生成。

这个时候启动该服务 hexo s，在本地可能还是看到图片展示还有问题（可能我当时没有素质三连什么的，但完成第三部再回来再发布服务 hexo s 就可以在本地看到了），但是我们右键，点击检查，查看网页源代码是可以看到图片的路径已经改为我们设置的路径。这个时候不用管，hexo d 推到github就好了。

修改hexo配置

找到博客根目录下的_config.yml，修改post_asset_folder: false为post_asset_folder: true

该配置目的： 每次通过hexo new 文件名新建博客后，都会创建一个与文件同名的文件夹用于存放图片 ，与上面typora的配置一致

改了配置就要记得素质三连

1
hexo clean && hexo g && hexo d

image-20210727190559748