如何使用gitee+hexo在gitee上部署blog

我搭建的blog网站：kiloGrand

前期准备

  • 下载git，推荐下载地址：链接 ，在腾讯软件中心下载比较快
  • 下载nodejs 官方下载，我使用的版本是12.16.2，版本太高可能会出问题，推荐使用12.x.x系列的版本

安装软件

  • git 除了安装路径可以改之外，其他的不用改，一直next就行
  • nodejs 同上

注册Gitee和GitHub账号

github官网
gitee官网
注意：在gitee和github中的设置-多邮件管理中, “ [ ] 不公关我的邮箱地址”，这里不打勾，同时也要把你的邮箱设为提交邮箱
在这里插入图片描述

初始化项目

1
2
3
4
5
6
7
8
9
10
11
12
13
14
* 配置git  
  打开git    
    $ git config --global user.name 'gitee用户名'  
    $ git config --global user.email 'gitee登陆邮箱'
* 安装hexo  
    $ npm install hexo-cli -g  
* 安装hexo-deployer-git  
    $ npm install hexo-deployer-git --save
* 初始化项目  
    $ cd E://blog_project  
    $ hexo init blog  
    $ cd E://blog_project/blog  
    $ hexo g //依据网页文件和新的css样式生成新的网站文件  
    $ hexo s //启动本地服务器，可以在<http://localhost:4000>查看网站效果

使用jsDeliver+github搭建免费的cdn

参考教程见 简书链接

  1. 在github上新建一个名为cdn的仓库

  2. 把下载好的cdn文件解压到E://cdn中，里面的图片可以替换，文件名最后不要改变，建议在cdn目录下加一个大小在20m以内的短视频，后面会用到，下面是修改后并且上传到github后的样子：
    在这里插入图片描述

  3. 打开git
    cd E://blog_project/cdn

  4. 提交到github仓库上

    1
    2
    3
    4
    5
    6
    7
    8
    git init					//初始化
    git status 					//查看状态  
    git add .  					//添加文件到暂存区  
    git commit -m '第一次提交' 	// 提交到本地库 
    ​git remote add github cdn仓库链接 	//关联远程仓库  
    ​git pull --rebase github master 	//合并远程仓库和本地仓库的冲突  
    git push github master 				//推送到远程仓库上  
    (jsDeliver不支持加载超过20M的资源，所以一些视频最好压缩到20M以下)

  5. 发布仓库：浏览器打开github中新建的cdn，点击release发布, 发布版本号1.0（自定义）
    使用方法：
    https://cdn.jsdelivr.net/gh/user/repo@version/file
    https://cdn.jsdelivr.net/gh/user/repo/file
    eg： https://cdn.jsdelivr.net/gh/kiloGrand/cdn@1.2/img/custom/avatar.jpg https://cdn.jsdelivr.net/gh/kiloGrand/cdn/img/custom/avatar.jpg
    版本号不是必需的，是为了区分新旧资源，如果不使用版本号，将会直接引用最新资源

blog配置

  1. 首先，在gitee上新建一个仓库，仓库名为你的账户名

  2. 用编辑器打开blog文件夹，我用的是vscode：在这里插入图片描述

  3. 把blog/source中的所有md文件、blog/themes/Sakura/languages/zh-cn.yml和blog/themes/Sakura/_config.yml中的 ‘https://cdn.jsdelivr.net/gh/…’ 改成自己的cdn的文件链接。

  4. 按照官方文档进行配置，每当配置完一部份，可以使用下面的命令来生成网页，访问http://localhost:4000查看网站效果
    $ hexo clean
    $ hexo g
    $ hexo s
  5. 配置scaffolds文件夹下的md文件，这个文件夹是关于博客文章的。

注意：在配置首页媒体时，aplayer的ID是网易云音乐的歌单号，比如https://music.163.com/#/playlist?id=4958788236 ，它的ID是 4958788236，只需把原来的ID替换成你想要的歌单的ID就行了，其实这个项目的所有的音乐部分的ID都是网易云歌单号的ID，你可以用自己的网易云账户创建一个歌单，供blog使用。

blog部署

  1. 生成部署文件
    $ hexo clean
    $ hexo g
    $ hexo d //上传到远程在码云上的仓库
  2. 登录码云账户，打开和自己用户名相同的仓库, 点击服务，打开giteePages，点击开启。

在这里插入图片描述

深入开发

常见错误

  • 无法push到gitee/GitHub，可能是邮箱没有设置好，或者是_config.yml中的repo配置错了
  • hexo -g生成的public中的index是空的，可能是nodejs的版本太高，建议安装nvm来切换nodejs的版本

博客使用

编写文章的两种方法：

  • 在git下执行
    $ hexo new 博客文章名
    同时会在 根目录下 /source/_posts 目录下生成md文件
  • 手动到根目录下 /source/_posts 目录下，创建一个makedown 文件进行编写就可以了