2、搭建流程-正式搭建

一、速度安装

1
2
3
4
5
6
npm config set registry https://registry.npm.taobao.org # 设置淘宝镜像
npm install hexo-cli -g # 安装hexo
hexo -v
hexo init # 初始化博客
hexo generate # 申城网站信息
hexo server # 开始网站服务

image-20240121144257425

二、Github部署

第一步：创建一个username.github.io的库

image-20240121145110346

第二步：在博客根目录的_config.yml配置

1
2
3
4
deploy:
  type: git
  repository: [email protected]:username/username.github.io.git  # 你的仓库地址
  branch: gh-pages

仓库的gh-pages分支部署你的页面，然后再master分支保存你网站的源代码，不会相互覆盖。

第三步：正式部署

1
2
3
4
hexo clean # 清除缓存
hexo generate # 生成网站
hexo deploy # 部署至远程网络
# 三步不可或缺！！！

注意错误点！！！！

  • 在进行二次代码上传前必须加上hexo clean这句话！不然可能会出现缓存问题而导致上传后出现404问题

  • 代码上传前先将.git、.deploy_git目录全部删除

三、更换主题（例子Fluid）

安装包

第一步：将压缩包解压放到themes目录下

image-20240121164212957

第二步：将Hexo的根目录的_config.yml修改

1
2
theme: fluid  # 指定主题
language: zh-CN  # 指定语言，会影响主题显示的语言，按需修改

四、写文章

第一步

1
hexo new page about

第二步：编辑/source/about/index.m同时配置

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
---
title: about
date: 2024-01-21 16:29:21
---
## 一、速度安装

```bash
npm config set registry https://registry.npm.taobao.org # 设置淘宝镜像
npm install hexo-cli -g # 安装hexo
hexo -v
hexo init # 初始化博客
hexo generate # 申城网站信息
hexo server # 开始网站服务
```

![image-20240121144257425](https://cdn.jsdelivr.net/gh/mogullzr/Typora_img@main/202401211443748.png)



# 二、Github部署

#### 第一步：创建一个username.github.io的库

![image-20240121145110346](https://cdn.jsdelivr.net/gh/mogullzr/Typora_img@main/202401211456347.png)

#### 第二步：在博客根目录的_config.yml配置

```bash
 deploy:
   type: git
   repository: [email protected]:username/username.github.io.git  # 你的仓库地址
   branch: gh-pages
```

仓库的gh-pages分支部署你的页面，然后再master分支保存你网站的源代码，不会相互覆盖。



#### 第三步：正式部署

```bash
 hexo clean # 清除缓存
 hexo generate # 生成网站
 hexo deploy # 部署至远程网络
```



## 二、更换主题


配置
1
post_asset_folder: true # 目的：创建文章的时候同时生成一个目录来装图片

第三步：本地启动

1
2
hexo g -d
hexo -s

五、个性化设置

  • Hexo的根目录下_config.yml

    image-20240121165728611

  • Fluid目录下的_config.yml修改Fluid的图标（基本都有解释可以直接查看这些是什么）

    image-20240121170015457