Hexo + Gitee零成本部署属于自己的个人博客

目前市场上比较火的一些博客框架: Hexo、jekyll、Solo、Halo 、gohugo、VuePress、wordpress 等等 ,这些都是开源的静态博客框架(没有登录注册,后台管理等等)。

完整部署流程

通过前期的环境Node、Hexo、Git和VScode的安装部署,再通过CMD命令行进行本地博客环境的部署,然后将本地博客代码推送至码云Gitee,即可搭建个人博客的框架。

安装 Node.js 环境

Hexo 是基于Node.js 的博客框架,使用 Node.js 官方安装程序时,请确保勾选 Add to PATH 选项(默认已勾选)。

node下载地址:http://nodejs.cn/download/
确认node.js安装成功:运行下面两个命令打印版本号即可

node -v #查看node版本
npm -v  #查看npm版本

安装 Node.js 淘宝镜像加速器 (cnpm)

npm install -g cnpm --registry=https://registry.npm.taobao.org #安装Node.js淘宝镜像加速器
cnpm -v #查看cnpm版本,安装成功则显示版本号
# 修改 node 类库默认安装位置
# 默认是在 C:\Users\lingStudy\AppData\Roaming\npm
npm config set prefix "D:\nodejs安装路径\node_global"
npm config set cache "D:\nodejs安装路径\node_cache"
# 查看修改是否成功
npm root -g
# 然后把D:\install\node\node_global配置到环境变量的 PATH 下即可
123456789101112131415

安装 Node.js 淘宝镜像加速器 (cnpm)出错:

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

错误代码:

C:\Users\X-STAR>npm install -g cnpm --registry=https://registry.npm.taobao.org
npm ERR! code EPERM
npm ERR! syscall rename
npm ERR! path C:\Users\X-STAR\AppData\Roaming\npm\node_modules\cnpm
npm ERR! dest C:\Users\X-STAR\AppData\Roaming\npm\node_modules\.cnpm-wxbqVbZB
npm ERR! errno -4048
...

解决方案一:

npm cache verify
#输入后,npm会去校验一些缓存依赖的完整和有效性

解决方案二:

npm cache clean --force
#直接用命令清理就行

解决方案二:

打开users目录下边AppData\Roaming目录找到npm文件夹和npm-cache文件夹,删除这两个文件夹里边所有内容,然后再去运行npm install就可以了。

Hexo安装

Hexo 官网: https://hexo.io/zh-cn/

npm install hexo-cli -g
# 查看hexo版本
hexo -v
hexo-cli: 4.2.0
...

Git安装

Git官网下载:https://git-scm.com/download

git --version  #查看Git版本
git version 2.29.2.windows.2

VScode安装

VScode官网https://code.visualstudio.com/

本地博客部署

hexo init blog #创建blog目录
cd blog  #进入blog目录
npm install #blog目录下安装
hexo server #本地blog部署完成

Gitee码云部署

Gitee官网https://gitee.com/

1、新建仓库,仓库名字和个人用户名保持一致,避免出错。

图一

2、选择语言Html,不初始化,点击创建,若全局设置没有显示个人邮箱,在设置邮箱选项选定绑定。

图二

3、CMD输入下列代码,创建密钥。输入代码后出现Enter passphrase(empty for no passphrase )可不设置密码回车即可。

git config --global user.name "huaweiyou"
git config --global user.email "[email protected]"
ssh keygen -t rsa -C "[email protected]"

4、个人文件下的C:\Users\X-STAR \ .ssh文件夹的文件id_rsa.pub用记事本格式打开并全选复制。


图四

5、Gitee码云中设置选项,SSH公钥添加复制好的密钥确定。

图五

本地代码推送Gitee码云

1、CMD进入本地部署的个人文件夹目录下,将本地代码推送到码云。

cd blog  #进入blog目录
npm install hexo-deployer-git --save #安装将推送本地代码到码云

2、服务选项无Gitee pages,进入管理,初始化readme文件选项即可。
图六

图七

3、进入服务选项,点击Gitee pages勾选强制使用HTTPS,启动。


图八

4、启动后,系统自动生成网址,点击进入显示404,因本地博客的代码未上传至码云,下一步上传代码至码云。

图九

5、个人文件夹目录下的config.yml用VScode打开,按图示要求输入代码,注意冒号后面的空格格式对齐。repo地址为Gitee地址。

repo: https://gitee.com/huaweiyouyu/huaweiyou.git
branch: master
图十
图十一
图十二

6、第16行代码改为个人博客网址链接https://huaweiyou.gitee.io/(个人地址即可,此处为教程测试地址),然后Language处修改zh-CN语言。

图十三

7、CMD进入本地部署的个人文件夹目录下,输入如下代码,将本地代码推送到码云,然后进入Gitee服务Gitee pages更新选项,即可访问,至此一个博客的框架搭建好了,注意每次本地部署都需要在码云上点击更新。

cd blog  #进入blog目录
hexo cl #清理缓存
hexo g #生成网站文件
hexo s #本地测试代码,Ctrl+c停止本地映射
hexo d #推送本地代码到码云,第一推送需要输入码云的账号密码
图十四

本地文件更新

1、个人博客根目录文件下的C:\Users\X-STAR\huaweiyouyu\source_posts存放博客的文章,新建txt文件,修改后缀格式为.md,用typroa软件打开编辑,typora见新手教程https://www.jianshu.com/p/2cb7fbb9ca3d。

图十五

2、输入代码块---,然后按格式输入title和date,统一格式。

title: 文章标题
date: 2020/11/10 11:20:28

3、CMD进入本地部署的个人文件夹目录下,将本地代码推送到码云。

cd blog  #进入blog目录
hexo cl && hexo g && hexo s #一键三联输入
#清理缓存
#生成网站文件
#本地测试代码,Ctrl+c停止本地映射
hexo d #推送本地代码到码云

你可能感兴趣的:(Hexo + Gitee零成本部署属于自己的个人博客)