hexo+gitee搭建个人博客,手把手教学包括报错解决

在这里插入图片描述

准备工作

1.安装node.js
官网: https://nodejs.org/zh-cn/
在这里插入图片描述
一直默认安装就行

2.安装git
阿里淘宝镜像站下载最新的版本,速度较快:https://npm.taobao.org/mirrors/git-for-windows/
任意选版本进行对口的32 或者64 .exe安装就可以
在这里插入图片描述
3.检查npm -v node -v 安装完成没有,成功出现以下界面
在这里插入图片描述
4.找任意一个盘新建一个文件夹
在这里插入图片描述
然后进入这个文件夹,cmd命令跳转到这个窗口(最好是保证管理员身份打开)
在这里插入图片描述

5.安装 hexo
输入npm install hexo-cli -g 或者 cnpm install hexo-cli -g 来安装hexo ,出现下图证明安装成功
在这里插入图片描述
这里可以通过hexo -v来验证是否成功
在这里插入图片描述

6.初始化 hexo 模板
在命令窗口输入 hexo init 出现下图表示成功在这里插入图片描述
初始化完成后,文件夹里面如下图
在这里插入图片描述
7.运行hexo

运行 hexo,注意是在 自己创建的文件夹运行。按如下顺序依次输入:

hexo clean # 清空已有hexo网站文件

hexo g(or generate) # 依据网页文本与新的CSS样式生成新网站文件

hexo s(or server) # 启动本地服务器,可以在localhost:4000查看网站修改效果
在这里插入图片描述
在这里插入图片描述
这时候访问http://localhost:4000/会出现默认页面
在这里插入图片描述

8.修改样式
通过快捷键 Ctrl + C 来停止本地服务器,就可以继续对网站内容进行修改

我使用的是git glone 下载 butterfly样式
git clone -b master https://gitee.com/immyw/hexo-theme-butterfly.git themes/butterfly 来下载 butterfly 主题
原地址如下 https://gitee.com/immyw/hexo-theme-butterfly
如果出现以下问题
在这里插入图片描述
解决方案 :输入下图四个命令 相当于手动配置git的代理
git config --global http.proxy http://127.0.0.1:1080
git config --global https.proxy http://127.0.0.1:1080
git config --global --unset http.proxy
git config --global --unset https.proxy
在这里插入图片描述
在这里插入图片描述
9.更换样式
更换 hexo 主题
配置文件夹主目录中的 _config.yml,用记事本打开 _config.yml ,下拉至最底部,修改默认 theme: landscape 为 theme: butterfly
在这里插入图片描述

注意: theme 后面是英文冒号加一个空格

10.安装渲染工具 pug 以及 stylus 的渲染器
如果你没有pug以及stylus的渲染器
npm install hexo-renderer-pug hexo-renderer-stylus --save
在这里插入图片描述
如果出现 下图错误 告诉你有三个高危漏洞
在这里插入图片描述
根据他的提示 npm audit fix 并且npm audit 查看,应该会出现以下提示 这时只需要npm 对应的包就可以了(白色区域命令)
然后重新运行 npm install hexo-renderer-pug hexo-renderer-stylus --save
在这里插入图片描述
11.重新运行新主题
hexo clean
hexo g
hexo s 出现下图表示成功
在这里插入图片描述
刷新页面出现
在这里插入图片描述

12.新建文章
在博客目录的 source 文件夹中的 _post 文件夹中添加你要写的博客文件,文件命名为file_name.md
在这里插入图片描述
可以复制原来的hello-world.md修改,建议 去查看一下Markdown 语法
重新运行以下就可以在原页面看到两个博客了
在这里插入图片描述
13.自动部署至 gitee 右上角+号新建仓库
在这里插入图片描述
然后在管理里面设置开源
在这里插入图片描述
14.修改配置文件
配置主目录中的 _config.yml,根据你自己的仓库地址来修改配置文件,然后保存

url: 换成你的仓库地址
root: 需要新增一行,换成你的仓库名称

type: 改为 git
repo: 换成你的仓库 git 地址
branch: 改为 master 如下图
在这里插入图片描述

在这里插入图片描述

15.安装 hexo-git 部署工具
npm install hexo-deployer-git --save
在这里插入图片描述

绑定 gitee 账户信息
git config --global user.email “换成你自己的注册邮箱”
git config --global user.name “换成你自己的注册用户名”
hexo g --d #一键部署
当本地文件夹出现public文件夹,说明部署成功
在这里插入图片描述
注意 :第一次部署时会弹出一个对话框,提示输入 gitee 码云的账号密码就可以了

16.前往 Gitee Pages
第一次使用 Gitee Pages 部署页面时,会要求你上传身份证的正、反面和手持身份证照片,进行实名认证,审核时间是一个工作日内
在这里插入图片描述
实名后,进入页面,强制更新
在这里插入图片描述
此时访问 Gitee Pages 网址 ,就能访问啦

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值