CWorld

Stay hungry, Stay foolish. 求知若愚,虚怀若谷。

2019年6月22日教程


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

前言

搭建效果

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

我的博客:查看链接>>

为何使用 Gitee 搭建个人博客

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

什么是 Hexo

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

搭建准备工作

开启搭建

注册登入 Gitee 新建一个仓库

新建仓库

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

启用pages服务

启用

你的博客地址

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

打开 Note.js 命令窗口

打开命令窗口

输入一键安装命令:

1
npm install -g hexo-cli

一键安装

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

1
hexo v 查看版本信息

查看hexo版本信息

初始化 Hexo

选择本地 hexo 数据目录:

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

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

选择数据目录位置

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

1
2
进入数据目录:cd "E:\文档\My Hexo"
初始化:npm install

初始化hexo

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

数据目录

本地部署预览

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

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

启动本地服务

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

浏览本地博客

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

Git 配置同步 Gitee 服务端

配置 Git 全局信息

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

1
2
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 端传输数据

先安装 hexo-deployer-git 插件,在数据目录执行:

1
npm install hexo-deployer-git --save

安装git插件

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

1
hexo g && hexo d

Hexo 将其改为了:

1
hexo g -d

部署至服务器

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

文件更新

这样就完成了部署

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

博客地址

博客初始界面

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

发布博客

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

博客内容

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

1
hexo g -d

即可提交至服务器端

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

编辑内容

美化主题

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

Next 主题

使用教程: 查看链接>>

新手温馨提示

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

疑难解答

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

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

不妨用打赏💰再伤我一次

:D 获取中...