HexoGitee搭建个人博客 hexo+github个人博客搭建

Hexo+Gitee搭建个人博客

（一）前言

• beacuse（事出有因）：

  很久之前就知道Hexo搭建个人博客，但由于惰性，一直没有行动，在此之前一直用的是博客园。

• but（但是）：

  今天打开博客园，发现网站进行整改，导致之前的博客无法查看，也无法发布新博客。
  

• so（因此）：

  本着自己动手，丰衣足食的原则，废话不多说，开始搭建自己专属的个人博客网站。

• why（为什么选择Hexo+Gitee）：

  • Hexo官方网站提供详细的中文文档，可以帮助我们快速搭建个人博客。

  • GitHub的镜像在国外，访问速度会受到限制，当然也可以通过CDN加速，这里使用Gitee就不用担心限速问题了。

（二）前期准备

2.1 注册Gitee账号并创建一个仓库

这里建议仓库的名称跟Gitee账号的用户名一致，这样后面生成的网站地址就没有二级目录，要短一些。

2.2 开启Gitee Page服务

服务 - Git Pages - 提交实名认证信息（之前是不需要实名认证，后面需要实名认证，大约一个工作日）

开启后如下图所示可以看到生成的网站地址：

2.3 安装node.js

官网：https://nodejs.org/en/

Node.js 的版本不低于 8.10，这里建议使用 Node.js 10.0 及以上版本。

下载完安装即可（安装很简单Next --> Next就可以）：

检查node.js是否安装成功，win+r打开cmd命令行界面，分别输入node -v和npm -v

C:\Users\DELL>node -v
v15.12.0

C:\Users\DELL>npm -v
7.6.3

由于npm默认的镜像是在国外，速度慢且可能出现异常，所以我们需要更换源镜像，这里替换成淘宝镜像：

• 查看镜像源：npm get registry

  C:\Users\DELL>npm get registry
  https://registry.npm.taobao.org/
  

• 修改镜像源：npm config set registry https://registry.npm.taobao.org

  C:\Users\DELL>npm config set registry https://registry.npm.taobao.org
  
  C:\Users\DELL>npm get registry
  https://registry.npm.taobao.org/
  

2.4 安装Git

官网地址：http://git-scm.com/

2.5 安装Hexo

所有必备的应用程序安装完成后，即可使用npm命令安装Hexo：npm install -g hexo-cli。

C:\Users\DELL>npm install -g hexo-cli

added 66 packages in 3s

2.6 建站

在电脑中创建一个文件夹用来存放博客，如：F:\blog 之后的命令行操作都在这个文件夹的目录下进行。

生成默认博客：hexo init

F:\blog>hexo init
INFO  Cloning hexo-starter https://github.com/hexojs/hexo-starter.git
INFO  Install dependencies
INFO  Start blogging with Hexo!

目录结构：

本地启动：hexo s

F:\blog>hexo s
INFO  Validating config
INFO  Start processing
INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

打开浏览器输入：http://localhost:4000，看到如下画面说明建站成功：

（三）提交到Gitee上

打开根目录/blog下的_config.yml文件

修改以下代码：

deploy:
  type: git
  repo: https://gitee.com/caihesheng/caihesheng.git   #将地址换成自己的地址
  branch: master

安装部署插件：

F:\blog>npm install hexo-deployer-git --save

added 7 packages in 1s

清理缓存：hexo clean

生成静态文件：hexo g

F:\blog>hexo g
INFO  Validating config
INFO  Start processing
INFO  Files loaded in 108 ms
... 
INFO  Generated: js/jquery-3.4.1.min.js
INFO  Generated: css/fonts/fontawesome-webfont.svg
INFO  17 files generated in 627 ms

推送到Gitee：hexo d Gitee的用户名/邮箱 密码

F:\blog>hexo d ********* *************
INFO  Validating config
INFO  Deploying: git
...
Branch 'master' set up to track remote branch 'master' from 'https://gitee.com/caihesheng/caihesheng.git'.
INFO  Deploy done: git

打开Gitee仓库，可以看到我们推送成功的静态文件的目录结构：

再次修改根目录下的_config.yml文件：

# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: https://caihesheng.gitee.io # 修改成自己的Gitee Page的地址
permalink: :year/:month/:day/:title/
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks

更新Gitee Pages，每次修改博客内容后都需要做以下操作：

• hexo clean

• hexo g/hexo d -g/hexo deploy -g

• hexo d

• 更新Gitee Pages服务

打开浏览器输入地址：https://caihesheng.gitee.io/，看到如下画面，说明提交成功：

（四）装修博客

4.1 下载主题

这里使用到了前面安装的git命令，通过命令来克隆主题文件。

切换到themes目录，右键单击，选择Git Bash Here：

输入命令：git clone https://gitee.com/yafine66/hexo-theme-matery.git

$ git clone https://gitee.com/yafine66/hexo-theme-matery.git
Cloning into 'hexo-theme-matery'...
remote: Enumerating objects: 4860, done.
remote: Counting objects: 100% (4860/4860), done.
remote: Compressing objects: 100% (2021/2021), done.
remote: Total 4860 (delta 3200), reused 4179 (delta 2775), pack-reused 0
Receiving objects: 100% (4860/4860), 14.50 MiB | 1.51 MiB/s, done.
Resolving deltas: 100% (3200/3200), done.

4.2 切换主题

• 修改根目录下的 _config.yml 的 theme 的值：theme: hexo-theme-matery

• 修改两个 per_page 的分页条数值为 6 的倍数，如：12、18 等，这样文章列表在各个屏幕下都能较好的显示。

• 中文用户，建议修改 language 的值为 zh-CN。

4.3 新建菜单页

分类categories页、标签tags页、关于我about页（这里演示categories，其他类似创建）：

categories 页是用来展示所有分类的页面，如果 source 目录下还没有 categories/index.md 文件，那么就需要新建一个，命令如下：

hexo new page "categories"

编辑你刚刚新建的页面文件 /source/categories/index.md，至少需要以下内容：

---
title: categories
date: 2018-09-30 17:25:30
type: "categories"
layout: "categories"
---

4.4 其他样式配置

更多样式的配置在\hexo-theme-matery\_config.yml中修改。

（五）新建文章

输入命令：hexo new '文章名'

F:\blog>hexo new 'Hexo+Gitee搭建个人博客'
INFO  Validating config
INFO  Created: F:\blog\source\_posts\Hexo-Gitee搭建个人博客.md

Front-matter 选项中的所有内容均为非必填的。但仍然建议至少填写 title 和 date 的值。

（六）自定义连接

Hexo默认文章链接生成规则是按照年、月、日、标题来生成的。一旦文章标题或者发布时间被修改，URL 就会发生变化，之前文章地址也会变成404，而且URL层级很深，不利于分享和搜索引擎收录。

• 安装插件：npm install hexo-abbrlink --save

  F:\blog>npm install hexo-abbrlink --save
  
  added 5 packages in 2s
  

• 修改配置

  修改博客根目录配置文件 _config.yml 的 permalink：

  permalink: p/:abbrlink.html  
  abbrlink:
      alg: crc32   #算法： crc16(default) and crc32
      rep: hex     #进制： dec(default) and hex
  

（七）参考

• 闪耀之狐
• 基于Hexo的matery主题搭建博客并深度优化