目前市场上比较火的一些博客框架: 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 #推送本地代码到码云