本篇博客主要介绍基于码云Gitee和Hexo搭建个人博客。

Gitee Pages


Gitee Pages是一个免费的静态网页托管服务,我们可以使用Gitee Pages托管博客、项目官网等静态网页。类似于GitHub Pages,目前Gitee Pages支持Jekyll、Hugo、Hexo编译静态资源。

Gitee Pages使用示例


首先,我们在Gitee中新建一个仓库,如下:

gitee pages 替代品_git


创建好仓库之后,将其克隆到本地,然后我们在文件夹中新建一个index.html,写入如下代码

<h1>xsk sz</h1>

然后我们将代码上传到Gitee中

gitee pages 替代品_git_02


然后,我们点击服务,选择Gitee Pages

gitee pages 替代品_静态网页_03


点击启动即可,效果如下

gitee pages 替代品_git_04


gitee pages 替代品_git_05


我们打开网站地址,效果如下

gitee pages 替代品_gitee pages 替代品_06

环境搭建


安装node.js


我们先去官网下载安装包,地址如下:
安装包下载地址下载完成后,安装即可

安装完之后,我们打开cmd,输入node,看一下是否安装成功,如下:

gitee pages 替代品_gitee pages 替代品_07


如上图所示表示安装成功

安装成功之后,我们更换下npm的源,否则下载速度太慢了,命令如下:

npm config set registry http://registry.npm.taobao.org/

gitee pages 替代品_官网_08

安装Hexo


我们使用下面命令来安装Hexo,命令如下:

npm install -g hexo-cli

gitee pages 替代品_gitee pages 替代品_09

然后我们新建一个文件夹,在该文件夹下执行如下命令

hexo init

gitee pages 替代品_git_10


生成Hexo运行所需的文件,文件夹目录结构如下

gitee pages 替代品_git_11


然后我们执行如下命令启动Hexo,命令如下:

hexo s

gitee pages 替代品_静态网页_12


gitee pages 替代品_官网_13

博客部署


首先,我们在Gitee上创建一个仓库,如下:

gitee pages 替代品_gitee pages 替代品_14


然后我们来修改Hexo配置文件_config.yml,写入如下内容:

deploy:
	type: git
	repo: 码云的项目地址
	branch: master

gitee pages 替代品_git_15


然后,我们使用下面命令进行博客的部署

npm install hexo-deployer-git --save

gitee pages 替代品_gitee pages 替代品_16

hexo g --d

gitee pages 替代品_gitee pages 替代品_17


此时本地文件夹中会出现一个public文件夹,代表部署成功

gitee pages 替代品_gitee pages 替代品_18


最后,我们登录Gitee,开启Gitee Pages功能即可

gitee pages 替代品_静态网页_19


我们打开网址,看一下效果

gitee pages 替代品_静态网页_20

主题修改


前面我们看到的是官方默认的主题,如果不喜欢的话,我们可以自己修改,官方也提供了一些网友自己制作的主题,可以直接拿来用

网址https://hexo.io/themes/

gitee pages 替代品_git_21


我们可以直接点击红框中的内容进行预览,可以点击绿框中的主题进行下载,下面,我们通过一个具体的例子来看一下主题该如何修改

gitee pages 替代品_官网_22


感觉这个主题挺好看的,我们点击红框内的内容来预览一下,如下:

gitee pages 替代品_git_23


我们就使用这个主题,我们点击前面绿框中的内容,进入GitHub进行下载

gitee pages 替代品_git_24


点击Download ZIP下载压缩包,然后将zip包中的内容解压到hexo/themes中

gitee pages 替代品_git_25


我们复制这个文件夹的名字,然后返回上一级,打开_config.yml,将里面的theme对应的值改为复制的名字,如下:

gitee pages 替代品_git_26


然后我们打开cmd,切换到Hexo文件夹,执行以下命令

hexo generate
hexo server

gitee pages 替代品_git_27


然后我们打开网址来看一下效果

gitee pages 替代品_静态网页_28


最后我们使用下面命令就可以将新的主题部署到Gitee中,命令如下:

hexo g --d

gitee pages 替代品_官网_29


最后,我们在Gitee Pages中点击一下更新即可

gitee pages 替代品_静态网页_30

博客的使用


这里我们使用Typora来写博客,每篇博客的格式如下

title: 文章标题
date: 2020-06-02 10:24:30
tags: 测试
categories: Hexo

---
文章正文

我们来写一个测试博客,内容如下:

gitee pages 替代品_git_31


我们使用下面命令进行部署,命令如下

hexo g --d

gitee pages 替代品_git_32


同样的,我们在Gitee Pages中点击一下更新,就可以看到新的博客了,如下:

gitee pages 替代品_git_33