Hexo+Gitee搭建个人博客

`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
[32mINFO [39m 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'.
[32mINFO [39m Deploy done: [35mgit[39m

打开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 的值。

配置选项	默认值	描述
title	`Markdown` 的文件标题	文章标题
date	文件创建时的日期时间	发布时间，应保证全局唯一
author	根 `_config.yml` 中的 `author`	文章作者
img	`featureImages` 中的某个值	文章特征图
top	`true`	文章是否置顶，值为 `true`，则会作为首页推荐文章
cover	`false`	是否需要加入到首页轮播封面中
coverImg	无	该文章在首页轮播封面需要显示的图片路径，如果没有，则默认使用文章的特色图片
password	无	文章阅读密码，该值必须是用 `SHA256` 加密后的密码，防止被他人识破。
toc	`true`	是否开启 TOC，可以针对某篇文章单独关闭 TOC 的功能。
mathjax	`false`	是否开启数学公式支持
summary	无	文章卡片摘要显示的文字，如果无值程序会自动截取文章的部分内容作为摘要
categories	无	文章分类，建议一篇文章一个分类
tags	无	文章标签，一篇文章可以多个标签

`（六）自定义连接`

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

`（七）参考`

posted @ 2021-03-31 17:47 测试蔡坨坨阅读(654) 评论(0) 编辑收藏举报

刷新页面返回顶部

测试蔡坨坨

Hexo+Gitee搭建个人博客