title: Gitee &PicGo&Hexo 搭建个人博客
date: 2022/1/17 21:07:00
categories: 杂项
tags: 学习笔记
基于 Gitee&PicGo&Hexo 创建个人博客
全局注意
-
在 _config.yml 中的所有符号为英文符号且所有冒号后都要加一个 空格
-
全程命令行都是在 cmd 中运行，在 hexo s 指令用后 默认端口 中可以查看本地部署情况
-
PicGo 可能会发生上传图片全黑，那是因为图片太大
-
若是不知道 cmd 怎样选择打开那个文件夹，可以直接在这个路径下直接输入***cmd*** 回车，如下图
-
Typora 强烈建议在偏好设置中勾选 自动保存
-
若是写完后发现找不到文件可以直接 Typora 左上角文件保存到你想要保存的地方
-
若是哪一步出现问题，首先将问题（若是在cmd中的问题可以直接复制报错信息）在百度搜索，若还是不行仔细对照我的教程，再不行直接【个人博客搭建】Hexo + Gitee_哔哩哔哩_ bilibili 看这个视频（视频UP主录得我看着很难受，亲身经历不如看我总结的内容）
-
再不行直接卸载相关内容重新安装，还不行建议直接 CSDN，博客园写博客，也是非常抱歉我总结的内容没能帮到你！浪费了你的宝贵时间！
首先注册 gitee，下载 Typora，node，git（设置安装路径够大即可，其余下一步）
Typora 最新版本下载需要付费并且官网需要翻翻墙才能访问，建议去B站搜索 Typora下载
那么究竟 Typora 到底是干什么用的 ？Typora 又有什么重要的呢 ？ 以下为我的个人见解，仅供参考
- 首先 Typora 是一款强大的编辑软件，尤其是 MarkDown 的编辑，MarkDown我理解为是一种语法，非常建议大家在使用 Typora 前去学习一下Typora，简单学习链接
- Typora 在于其强大的能力，画各种图，插入各种代码，书写简单，页面简介，而且
纯免费- Typora生成的文件不是 .word 而是 .md 也就是 markdown 格式
- 想了解更多可以去 B站搜索介绍，打开 Typora 大门
注册后新建仓库，如下图
用户名为个人主页中的
随后创建 Gitee Page
第一次使用需要进行身份验证，审核后可以在该仓库中创建新文件 index.html,其中内容如下
<h1>Hello,World!</h1>
再回到 Gitee Page
更新后去网站地址检测是否正常
审核大概半天时间在这期间可以先完成以下内容的搭建
本地博客搭建
1. Hexo-cli 安装
npm install hexo-cli -g
或
先安装cnpm，然后利用cnpm安装hexo-cli
npm install cnpm
cnpm install hexo-cli -g
2. 初始化 hexo 项目
hexo init blog
3. 项目启动
永远的 hexo 三句箴言
-清除页面相关内容
hexo clean
-构建生成的页面相关内容
hexo g
-项目启动
hexo s
添加主题模板 Fluid
1. 在blog\themes目录下下载 Fluid
git clone https://gitee.com/mirrors/hexo-theme-fluid.git
2. 修改 _config.yml. .
找到 blog 下 config 的 theme 替换为对应下载主题名字（看themes下载下来的文件夹名
theme: hexo-theme-fluid
3. 修改为主题语言为中文
在 blog 目录下 _conf.yml 找到文件内容里的 language 替换为以下
language: zh-CN
4. 生成 about 页面
在 blog 路径下，执行命令（管理员cmd操作）
hexo new page about
创建成功后，去到 blog\source\about\insex.md ,添加 layout 属性，
以下为index.md里的内容
---
title: about
date: 2022-01-16 16:30:00
layout: about
---
图片内容等的修改
1. 添加友链导航
在 blog\themes\hexo-theme-fluid 目录下的 _config.yml 内容中去掉 navbar 导航栏 menu 下的 link 一栏 -{ 前的注释
修改后
- { key: “links”, link: “/links/“, icon: “iconfont icon-link-fill” }
2.修改页面标题&导航栏时的小小 icons
页面标题
blog 目录下的 _config.yml 内容中
title: Hexo
hexo 可以更改为自己想要的标题，效果如下图
页面左上角标题
blog\thems\hexo-theme-fluid 该主题目录下的 _config.yml 的内容中
navbar:
blog_title: "Fluid"
Fluid 改为自己想要的博客名字
修改效果如下图
首页背景图
还是主题下的 _config.yml ，找到 index
banner_img: /img/default.png
以上是图片路径，但是不要直接在该路径中修改图片，复制该图片名称，在该主题的img文件
正确做法
路径：hexo-theme-fluid\source\img 中复制你想要的首页背景图，复制原 default.png 的名字，后删除原图片，再修改复制过去的图片名字为 default.png ，以后的图片修改请遵守此处做法！！！
改完背景图回到 _config 中，在 banner_mask_alpha 修改背景图亮度
下面修改 text 修改首页背景图上的一行字体
text: “An elegant Material-Design theme for Hexo”
文件博客的本地上传测试
首先把自己写的 .md 文件复制到 blog\sourse_posts 目录下，在该 md 内容头部加上(首尾的三个 ***-*** 一定要加上)
---
title: Markdown
date: 2022/1/166 15:40:24
categories: 杂项
tags: 学习笔记
---
接着 hexo 三句箴言,部署后再在浏览器默认端口下查看博客是否正常
提交搭建的博客至Gitee
修改 blog\ _config.yml 配置文件的站点地址（deploy）：
deploy:
type: git
repo: https://gitee.com/J-Jia/j-jia.git
branch: master
enable: true
在 \blog 下安装 git 上传助手
npm install hexo-deployer-git -save
或
cnpm install hexo-deployer-git -save
等待安装完后，输入
- 清除缓存在Git的账号密码
git credential-manager uninstall
- 设置邮箱
git config -global user.email "俺滴邮箱"
- 设置账户
git config -global user.name "俺滴账号"
- 设置密码
git config -global user.password "俺滴密码"
- 部署线上
hexo d
此时去到你的Gitee Page 查看是否正常（本地图片没有很正常啊）
PicGo + Gitee 构建图床
那首先什么是 图床 呢？
举个例子：家里 有玻璃水杯，可以自己用，但当我们不在家时想喝水怎么办？图床 就相当于一个可随身携带的水杯，去哪只要带着就能用，怎么带，就需要背包，背包就是 Gitee ，gitee 链接就是记得要带水杯
-
在 Gitee 创建一个新的公开仓库 figure_of_typora
-
获取私人令牌
Gitee 点击右上角的头像，点击下滑栏中的 设置 找到私人令牌
点击生成新令牌，验证后复制生成私人令牌
-
下载 PicGo Picgo 下载地址 是 GitHub 网站，一直拖到最下面下载对应版本即可
-
设置 PicGo 中 Gitee 图床 注意填完后先点击设置为默认图床再点确定
PicGo设置
-
测试 PicGo
随意复制一图片点击粘贴板图片，上传后查看 PicGo 相册 与 Gitee 图片仓库 中是否有图片
-
Typra 设置
-
点击验证查看是否正常
-
重新随便复制一个图片，进行验证，点击上传，图片链接会从本地链接变为一个 Gitee 链接
如果正常则 **PicGo相册 ，Gitee 图片仓库都会有，并且在 Typora 中显示依旧正常
后续
当然这不是全部，博客是一个只属于自己独一无二的网站，你可以插入类似 live2d ，图标点击特效等等各种特效，但至于如何做，就需要自己探索。。。
至此全部结束
那么总结一下我们再写博客时需要做哪些
- 书写 md 文件
- 内容头部添加 title 等内容，一键将图片上传
- 转移到 Blog\source_posts 下
- hexo 三字箴言
- 确认无误直接
hexo d部署到 Gitee - 在 Gitee Page 更新后检查
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
