Hexo | 使用 hexo博客主题部署到gitee / github

tag

- hexo
- gitee
- blog

前言

对于个人博客,有几种方式

1、使用第三方服务器(托管)
如 github,gitee,coding等代码托管商

2、自行购买服务器
不推荐对于个人博客来说，仅仅是文章的展示足矣

因为github国内访问速度较慢，所以本文展示使用gitee(码云)作为服务器搭建hexo博客
不论是 github,还是gitee，都有一个xxxpage的功能，本意用来项目内容的展示,借此可以用于个人博客的展示

使用gitee搭建hexo博客

搭建本地服务

1、准备环境

准备下载node.js和git客户端

使用node.js原因是hexo是基于node.js渲染的
使用git中的gitbash用于文件下载,配置和发布到远端仓库

我们需要NPM去下载需要的包或插件

测试npm是否下载好

$ npm -v
2.3.0

⚠️出现版本号说明npm安装成功

下载之后，你会发现linux命令行环境，以后的命令就在git bash上执行，记住❗❗❗

2、下载hexo

在下载安装hexo之前，再次测试 NPM 和 Node.js是否配置好执行
node -v   # 查看是否下载好了node.js可以查看到版本
npm -v   #查看npm是否下载好
效果

3、执行命令下载cnpm

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

思路: 使用cnpm下载hexo ，先用npm下载cnpm

4、正式下载hexo

cnpm install -g  hexo-cli

注意这个过程可能需要花点时间,取决网速

测试是否下载好

hexo  -v

如下，出现版本号和Node版本号说明下载成功 ⬇

5、安装hexo

本地电脑选择一个磁盘下，新建立文件夹用于存放博客,如选择系统 F盘，新建文件夹为 blog

cd /F/    #这个是切换到F盘的命令
pwd        #这个是查看是否在F盘的命令
mkdir blog    #这个是在 F盘建立一个blog名文件

⚠️注意:这个新建的blog目录就是整个博客的根目录，如果后期有什么问题，直接把这个目录删除掉。重来就行

6、初始化hexo博客

hexo init    #执行这段代码后，会自动下载一个默认主题和默认文章

如果出现初始化不成功可能是没有安装包管理依赖
重新下载依赖
npm install # 下载 npm

7、发布第一篇hexo博客

新建一篇markdown文章

hexo new  "xxxxx"

xxxx就是文章的标题比如

hexo  new  "这是我的第一篇文章"

hexo 博客是用 markdown格式编写的，可以理解为和txt类似的文本文档格式，所以上述就是新建一个名为"这是我的第一篇文章"的markdown文档

这个文章会保存在博客根目录的source/_post/文件中,如下图⬇

使用vscode编辑器打开blog博客根目录

hexo常用命令介绍

hexo clean  #清空已有的hexo 网站文件
hexo generator  #  (也可以简写为 hexo  g)  启动网页文件和新css样式来生成新的文件
hexo sever    # (简写hexo  s) 启动本地服务 ，可以在localhost:4000端口查看本地生成的文件预览（这个就是在正式发布到远端的一种检查）

8、预览本地博客文章

执行

hexo  clean  
hexo  g   # 生成博客文件(css,js,...)
hexo  s   # 启动本地预览服务

这样本地预览就完成了，如果有什么问题，直接把那个博客根目录删除。重来就可以❗

部署到远程仓库

通过地址可以访问博客

1、配置gitee和本地计算机

打开gitee官网注册或者登陆注册或者登陆

依次按照下述步骤

⚠️这个公钥的作用就相当于本地和gitee的一个通关证，以便于下次传到gitee时，不用输入密码什么的 ⚠️注意一定要添加个人公钥，第五步的那个添加个人公钥，这个是有写权限的公钥, 不是第一个页面的只读公钥如果不这么做，那么就部署不到服务器gitee

如何添加公钥，点击如何获取个人公钥

启动gitee page 这页面就发布文件的地方

2、配置本地hexo博客文件

使用编辑器打开对应的博客根目录/blog/config.yml 这里使用的是vscode编辑器

点击根目录下的config.yml文件

⚠️这里的repo: xxxxx xxxx是生成仓库后的克隆/下载ssh或者https路径而不是这个仓库的路径 gitee.com/用户名/仓库名所以

使用ssh git方式:
  git@gitee.com:用户名/仓库名.git
使用Https格式:
  https://gitee.com/用户名/仓库名.git

所以git部署目录后面都要加git

可以在gitee页面找到相关信息
先进入仓库 https://gitee.com/用户名/仓库名,找到如下图所示按钮

坑1

⚠️注意config.yml文件这个地方格外注意的是

#URL
##If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://gitee用户名.gitee.io/
root: /

https://gitee用户名.gitee.io 是 站点地址

如果设置 root为 /子目录,说明博客位于站点的子目录下,访问需要添加/子目录,即https://gitee用户名.gitee.io/子目录
如果设置 root为/,则博客位于站点下，可以直接访问站点访问博客https://gitee用户名.gitee.io

仓库地址: https://gitee.com/gitee用户名/仓库名
站点地址: https://gitee用户名.gitee.io (这里我的仓库名和gitee用户名同名)

站点地址实际上即「Gitee Page”启动/更新」后显示的网站地址，用于访问博客的,所以最后博客访问是要登录 https://gitee用户名.gitee.io

gitee.io是giteePage服务，用于显示html文件

如果URL和root字段没有配置好，可能会出现网页访问不了的情况，须注意怕麻烦，因此干脆像GitHubPage一样强制要求使用账号同名新建网站仓库，这样还获得了以账号名为特征的独有域名，一举两得！

坑2

#Deployment
##Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: git@gitee.com:用户名/仓库名.git
  branch: master

⚠️注意每个:后面都要有一个空格( 这是yaml文件格式要求 )

须了解两个地址:

git部署目录 = URL地址 = gitee pages的预览网址
仓库地址

3、部署

在命令行窗口切换到根目录执行

hexo clean
hexo g
hexo d     #部署到gitee远端

你会发现部署失败我要部署到远端之前还要下载git插件,在 gitbash 执行

cnpm  install --save hexo-deployer-git

安装好之后再执行上述操作执行 hexo d之后第一次可能要验证ssh，输入邮箱和用户名

再次执行 hexo d 好了到浏览器输入静态网站网址吧

butterfly博客主题实例

⚠️此时博客是默认的主题，不美观,可以使用其他的第三方主题theme或者如果会web可自定义样式