Hexo+Gitee搭建个人博客

logo2.1.png

Hexo+Gitee搭建个人博客

文章源地址(点击跳转)

(一)前言

  • beacuse(事出有因):

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

  • but(但是):

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

    image.png

  • so(因此):

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

  • why(为什么选择Hexo+Gitee):

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

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

(二)前期准备

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

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

2.2 开启Gitee Page服务

image.png

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

image.png

2.3 安装node.js

官网:

https://nodejs.org/en/
https://nodejs.org/en/

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

image.png

下载完安装即可(安装很简单Next --> Next就可以):

image.png

检查node.js是否安装成功,win+r打开cmd命令行界面,分别输入node -vnpm -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/
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!

目录结构:

image.png

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

image.png

(三)提交到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仓库,可以看到我们推送成功的静态文件的目录结构:

image.png

再次修改根目录下的_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服务

image.png

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

image-20210319154419416

(四)装修博客

4.1 下载主题

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

切换到themes目录,右键单击,选择Git Bash Here:

image.png

输入命令: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.ymltheme 的值:theme: hexo-theme-matery

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

  • 中文用户,建议修改 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 选项中的所有内容均为非必填的。但仍然建议至少填写 titledate 的值。

配置选项 默认值 描述
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 文章标签,一篇文章可以多个标签

(六)参考

  • 闪耀之狐
    https://blinkfox.github.io/2018/09/28/qian-duan/hexo-bo-ke-zhu-ti-zhi-hexo-theme-matery-de-jie-shao/

  • 基于Hexo的matery主题搭建博客并深度优化
    https://www.lixl.cn/2019/092856736.html

(七)补充

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

  • 安装插件: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