Hexo+Gitee搭建个人博客

  • A+
所属分类：Web前端
摘要

文章源地址（点击跳转）beacuse（事出有因）：很久之前就知道Hexo搭建个人博客，但由于懒，一直没有行动，在此之前一直用的是博客园。
便宜好用的国外VPS推荐

Hexo+Gitee搭建个人博客

Hexo+Gitee搭建个人博客

文章源地址（点击跳转）

（一）前言

  • beacuse（事出有因）：

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

  • but（但是）：

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

    Hexo+Gitee搭建个人博客

  • so（因此）：

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

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

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

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

（二）前期准备

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

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

Hexo+Gitee搭建个人博客

2.2 开启Gitee Page服务

Hexo+Gitee搭建个人博客

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

Hexo+Gitee搭建个人博客

2.3 安装node.js

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

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

Hexo+Gitee搭建个人博客

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

Hexo+Gitee搭建个人博客

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

C:UsersDELL>node -v v15.12.0  C:UsersDELL>npm -v 7.6.3

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

  • 查看镜像源：npm get registry

    C:UsersDELL>npm get registry https://registry.npm.taobao.org/

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

    C:UsersDELL>npm config set registry https://registry.npm.taobao.org  C:UsersDELL>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:UsersDELL>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+Gitee搭建个人博客

本地启动：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，看到如下画面说明建站成功：

Hexo+Gitee搭建个人博客

（三）提交到Gitee上

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

修改以下代码：

deploy:   type: git   repo: https://gitee.com/cai_hesheng/cai_hesheng.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/cai_hesheng/cai_hesheng.git'. INFO  Deploy done: git

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

Hexo+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://cai_hesheng.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

  • 更新Gitee Pages服务

Hexo+Gitee搭建个人博客

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

Hexo+Gitee搭建个人博客

（四）装修博客

4.1 下载主题

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

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

Hexo+Gitee搭建个人博客

输入命令：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:blogsource_postsHexo-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层级很深，不利于分享和搜索引擎收录。
Hexo+Gitee搭建个人博客

  • 安装插件：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
便宜好用的国外VPS推荐