教程

使用 Gitee 和 Hexo 框架搭建个人博客教程

CWorld · 8月6日 · 2019年

来自酷安 正常老司机
2018-12-29 小米MIX 2S

前言

搭建效果

看一下我花了一点时间的搭建效果

我的博客:查看链接>>

为何使用 Gitee 搭建个人博客

免费,不用自己花钱买空间域名,代码托管平台,不用太担心后台挂了,目前国内访问 GitHub 速度慢,还可能被墙,所以 Gitee 来构建个人博客。 Gitee 类似国内版的 GitHub ,访问速度有保证。

什么是 Hexo

官网:查看链接>>
Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown (或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。

搭建准备工作

开启搭建

注册登入Gitee新建一个仓库

新建仓库

开启Gitee Pages服务以后就可以用这个地址作为你的博客地址

启用pages服务
启用
你的博客地址

Note.js 执行本地安装 Hexo 框架

打开 Note.js 命令窗口

打开命令窗口

输入一键安装命令:

npm install -g hexo-cli

一键安装

大概等待2~3分钟后就安装好了,确定是否安装可使用命令:

hexo v 查看版本信息

查看hexo版本信息

初始化 hexo

选择本地 hexo 数据目录:

hexo init "E:\文档\My Hexo"

(我是自己定义的位置,可自己修改)

选择数据目录位置

开始初始化 hexo ,依次执行下命令:

进入数据目录:cd "E:\文档\My Hexo"

初始化:npm install

初始化hexo

初始化成功后,在数据目录下会有以下文件夹,记住你的数据目录路径,以后要用得到的!

数据目录

本地部署预览

先查看搭建 hexo 本地博客是否成功,在自己上一步安装数据目录下 Git Bash 使用命令:

hexo s 来启动本地服务,再次 Ctrl+C 停止本地服务

启动本地服务

浏览器进入 localhost:4000 预览本地博客

4000链接

浏览本地博客

完成以上算是成功一半了,接下来配置Git同步服务端

Git 配置同步 Gitee 服务端

配置 Git 全局信息

配置 Git 全局信息,这样才能提交数据

git config --global user.name "你的Gitee用户名"
git config --global user.email "你Gitee使用的邮箱"

查看注册信息
配置Git全局

修改配置文件

进去码云查看我们创建博客的仓库,记录之前我们开启 Gitee Pages 的地址,修改配置文件中的信息

在数据根目录,找到这个文件 _config.yml 配置文件

配置文件

修改存放数据路径

记录这个网址

设置 _config.yml 的信息 (url 和root) 信息如下

url 和root 修改

设置 Git 路径

进入仓库记录以下 git 地址

记录git地址

设置 _config.yml 的信息 (deploy) 信息如下:

设置deploy信息

完成以上信息,就算是本地端配置好了。

测试 gitee

我们来测试一下本地文件能否于 gitee 端传输数据上去。先安装 hexo-deployer-git 插件,在数据目录执行:

npm install hexo-deployer-git --save

安装git插件

生成静态文件,并上传至 Gitee 端,部署到服务器
在数据目录 git bash 执行下命令:

hexo g && hexo d

部署至服务器

查看仓库,我们看到文件有更新,说明我们对接成功了

文件更新

这样子用就完成了部署

我们就可以直接访问这个网址进入自己的博客了

博客地址
博客初始界面

可以看到我们的初始界面还是有点简陋的

发布博客

博客怎么写呢?
本地博客保存在:
数据目录 \source_posts\ md文件

博客内容

我们只要写好的博客用 Markdown 编辑器,导出 md 文件放入此文件夹,再次执行命令:

hexo g && hexo d

即可提交至服务器端

推荐Markdown编辑器: 小书匠编辑器

编辑内容

美化主题

刚搭建的博客还是有点简陋的,我们可以应用主题
官网上有很多开源的主题: 查看链接>>

Next 主题

使用教程: 查看链接>>

新手温馨提示

  • 安装hexo用到的是Node-npm执行
  • 配置并部署至服务器是在站点目录文件下用Git执行
    注意看上图的所用到的命令窗口!

疑难解答

遇到不会的问题,可以多看官网的文档 查看链接>>

相关文章
暂无相关文章!
1 条回应
  1. kindyear2019-10-16 · 13:34

    哈哈哈