• ❤ hexo主题+Gitee搭建个人博客

    ❤Hexo的基本使用

    常用命令

    hexo new '' 新建文章
hexo c&&hexo g&&hexo s  一键三连
hexo d 推送

1. npm install -g hexo 安装hexo
2. hexo init Lourance初始化
3. npm install hexo-cli -g  安装hexo脚手架
5. cd Lourance  进入目录
6. npm install  进一步安装hexo所需文件
7. 启动
	hexo clean   # 清除所有记录 /hexo c
	hexo generate  # 生成静态网页 /hexo g
	hexo server    # 启动服务 /hexo s

其他
ssh-keygen -t rsa -C "2455067339@qq.com" 生成电脑的个人密钥
npm install hexo-deployer-git --save 部署工具的安装


部署前准备添加公钥
1、注册登录码云
2、生成|添加SSH公钥
3、配置 ssh 账户和邮箱
	git config --global user.email *********@qq.com # 设置邮箱
	git config --global user.name '****'   # 设置用户名
4、查看账户和邮箱
	git config --global user.name
	git config --global user.email
5、本地生成ssh公钥
	ssh-keygen -t rsa -C "xxxxx@xxxxx.com"
6、查看 ssh 公钥
	vim ~/.ssh/id_rsa.pub
7、 部署到码云上面
8、 测试  ssh -T git@gitee.com
9、 配置连接 Gitee
10、复制 Gitee上的个人URL ，到 hexo 的配置文件 _config.yml

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36

    1. 认识

    官网

    官网地址：https://hexo.io/zh-cn/
    在这里插入图片描述

    介绍

    Hexo是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。即把用户的markdown文件，按照指定的主题解析成静态网页。

    2. 安装

    准备环境

    准备环境
	1.node 
	hexo 基于 node，所以首先要安装node环境（node尽量18以及以上）
	2.npm
	包管理工具

    • 1
    • 2
    • 3
    • 4
    • 5

    安装

    安装使用hexo之前需要先安装Node.js和Git，当已经安装了Node.js和npm(npm是node.js的包管理工具)，可以通过以下命令安装hexo

    npm install -g hexo-cli 安装hexo脚手架

    • 1

    安装成功：
    在这里插入图片描述

    3. 使用

    部署发布

    hexo init （初始化 hexo，必须是空文件夹）
npm install （工程配置）

浏览器调试
hexo g （）
hexo s （启动hexo的服务）

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    在这里插入图片描述

    到这里你本地已经简单搭建起来了博客

    hexo c （清楚缓存）
hexo g 
hexo d （Gitee博客配置好了以后推送到gitee的）
hexo s

    • 1
    • 2
    • 3
    • 4

    发布到gitee上面

    打开博客文件夹下面的_config.yml 文件
配置自己的个人博客路径
		type: 'git'
		repo: https://gitee.com/tbai/note.git  #替换成你自己仓库的HTTP URL地址
		branch: master
1
2
将生成的网站地址配置到自己的_config.yml文件之中
//  url: https://gitee.com/tbai/note.git


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    部署博客

    1、安装自动部署发布工具，不然部署会报错

    npm install hexo-deployer-git --save

    • 1

    2、一键三连

    • 一般发布文章或者修改博客后需要这些操作：清除缓存>生成静态文件>启动服务器，测试没问题后再部署
    【清除缓存 hexo clean】
【生成静态文件 hexo generate】
【启动服务器 hexo server】
【部署 hexo deploy】
hexo c
hexo g
hexo d
hexo s
// 我们可以写成一条命令
hexo c&&hexo g&&hexo s
$ hexo d

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    进阶操作部分

    1. 如何发表新的文章
    1、hexo new "new article"
会在对应的路径下创建一个名为“new article”的markdown文件
只要在这个文件中用markdown语言进行编写文章内容即可，保存后，输入命令


hexo g     //生成静态页面
hexo s    //启动本地服务器进行查看
hexo d   //查看后没有问题即可部署到github上
【自己习惯】
【修改以后个人三连】
hexo g && hexo d 
hexo s 

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    4. 目录和配置

    官方配置地址：https://hexo.io/zh-cn/docs/configuration

    .
├── _config.yml 网站的配置信息，您可以在此配置大部分的参数
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    5. 主题安装

    下载自己喜欢的主题，可以去 github 下载压缩包然后放到博客项目根目录下的 themes 中。
    然后配置 _config.yml

    `icarus 主题地址` 

地址：https://gitcode.com/ppoffice/hexo-theme-icarus/overview?utm_source=csdn_github_accelerator&isLogin=1

安装：
npm install hexo-theme-icarus  
hexo config theme icarus

`这里我遇到的问题就是控制台一直报红色输出问题`

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    所有主题地址：
    https://hexo.io/themes/

    （1）主题选择历程

    1、开始选择的是
    hexo主题里面的yilla简洁主题，菜单不明显，放弃

    搭建了hexo主题NextT主题

    使用主题Butterfly

    01下载主题
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly

2 修改站点配置文件_config.yml,
	把主题修改为 Butterfly
	theme: Butterfly

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    为便于后续平滑升级，在source目录下创建_data文件夹,将Themes/Butterfly目录下的 _config.yml复制一份到source/_data目录下,并改名为butterfly.yml

    执行以下指令,以查看应用主题后的效果

    hexo clean #清除旧的内容
hexo g #生成发布用的静态页面

    • 1
    • 2

    （2）hexo主题Yilla使用

    下载使用

    1、Yilla主题下载到theme目录中
    git clone https://github.com/litten/hexo-theme-yilia.git

    • 1
    2、Yilla配置主题【找到上一层的_config.yml这个文件】
    theme: hexo-theme-yilia

    • 1
    3、Yilla将属性值改为刚刚下载的主题名，将文件进行保存
    hexo clean //清除一下缓存
hexo g  //生成静态页面
hexo s //开启本地服务器

    • 1
    • 2
    • 3
    4、Yilla给页面设置过多内容时候隐藏一部分
    <!-- more -->

    • 1
    5、Yilla文章显示目录

    themes/yilia/_config.ym中进行配置 toc: 2即可，它会将你 Markdown 语法的标题，生成目录，目录查看在右下角。

    6、Yilla文件配置_config.yml

    主题的配置文件。和 Hexo 配置文件不同，主题配置文件修改时会自动更新，无需重启 Hexo Server。

    7、Yilla语言配置languages
    8、Yillasource文件夹

    资源文件夹，除了模板以外的 Asset，例如 CSS、JavaScript 文件等，都应该放在这个文件夹中。文件或文件夹开头名称为 _（下划线线）或隐藏的文件会被忽略。

    如果文件可以被渲染的话，会经过解析然后储存到 public 文件夹，否则会直接拷贝到 public 文件夹

    9、配置图片资源
    • 添加图片资源文件夹。 路径为 themes/yilia/source/下，可添加一个 assets 文件夹，里面存放图片资源即可
    • 配置文件中直接引用即可。路径为 themes/yilia/_config.yml，找到如下即可
    10、文章显示摘要

    问题。点击主页时，发现所有文章都是全文显示，不利于查找，可控制显示的字数
    解决办法。 在你 MD 格式文章正文插入 即可，只会显示它之前的，此后的就不显示，点击文章标题，全文阅读才可看到，同时注释掉以下 themes/yilia/_config.yml，重复

    # excerpt_link: more

    • 1
    11、增加归档菜单

    修改 themes/yilia/_config.yml

    menu:
    主页:  /
    归档:  /archives/index.html

    • 1
    • 2
    • 3
    12、添加顶部加载条
    用编辑器打开 BLOG\themes\yilia\layout\_partial\head.ejs 配置文件。

在这段代码末尾添加



<% if (title){ %><%= title %> | <% } %><%= config.title %>



  
    

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    19、添加左侧显示文章数
    20、添加总文章数
    21、鼠标点击小红心
    !function(e,t,a){function r(){for(var e=0;e


    • 1
    • 2
    • 3
    • 4
    • 5
    22、hexo主题-标签页面
    23、Hexo yilia 随笔

    “随笔” 其实就是文章的一个 tags(标签)，如果你想把文章作为随笔的话，请在文章的首部写个 tags 为 “随笔” 的标签。如下图：

    24、hexo添加about导航栏
    • 创建用于关于导航栏的网页，通过命令hexo new page "about"创建，即在source下创建about文件夹，该文件夹下新建index.md，根据普通文章正文要求对其书写即可。
    • 接下来，就需要将该新网页绑定在新的导航栏上面。修改 theme/使用主题 目录下对应的**_config.yml**主题配置文件
    # Header
	menu:  #站点导航栏，按照如下格式添加: 右侧为public文件夹下的路径，索引至index.md
          #从上至下依次显示在右上角从左至右处
  Home: /	 #主页导航栏
  All-lists: /archives		#所有列表导航栏
  Resume: /Shengjie		#个人简历导航栏
  About: /about			#关于导航栏

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    在你想插入的位置上插入关于导航栏(支持中文)，然后将新创建的/about作为其路径，即可导航至你自定义的index.md。

    （3）hexo主题NestT使用

    下载使用

    git clone https://github.com/iissnan/hexo-theme-next themes/next

    • 1
    Next主题美化

    1、主题简单配置

    Next主题主要分为四种scheme，可以在主题文件的_config.yml文件中进行选择，分别是Muse、Mist、Pisces、Gemini；

    下载

    git clone https://github.com/iissnan/hexo-theme-next themes/next

    • 1
    我主要选用的是Gemini风格

    • 1

    2、Next常规配置

    • 个人信息配置

    在站点的_config.yml文件中进行配置：

    title: 陶白&博客
subtitle: 学无止境
description: 路漫漫其修远兮，吾将上下而求索。
keywords: 陶白,北安南栎，博客
author: tbai
language: zh-CN # 主题语言
timezone: Asia/Shanghai #中国的时区，不要乱改城市

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 头像配置

    将头像放置在themes/next/source/images/中，然后在主题中打开_config.yml文件中进行配置：

    avatar:
  # In theme directory (source/images): /images/avatar.gif
  # In site directory (source/uploads): /uploads/avatar.gif
  # You can also use other linking images.
  url: /img/avatar.jpg #将我们的头像图片放置在blog/themes/next/source/images目录下，填写具体地址
  # If true, the avatar would be dispalyed in circle.
  rounded: false #鼠标放在头像上时是否旋转
  opacity: 1 #头像放缩指数
  # If true, the avatar would be rotated with the cursor.
  rotated: true #头像是否设为圆形，否则为矩形

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 其它常规配置
    # Table Of Contents in the Sidebar
toc:
  enable: true #是否自动生成目录
  # Automatically add list number to toc.
  number: false #目录是否自动产生编号
  # If true, all words will placed on next lines if header width longer then sidebar width.
  wrap: false #标题过长是否换行
  # Maximum heading depth of generated toc. You can set it in one post through `toc_max_depth` var.
  max_depth: 6 #最大标题深度
# Sidebar offset from top menubar in pixels (only for Pisces | Gemini).
  offset: 12 #侧边栏相对主菜单像素距离
  # Back to top in sidebar.
  b2t: true #是否提供一键置顶
  # Scroll percent label in b2t button.
  scrollpercent: true #是否显示当前阅读进度
  # Enable sidebar on narrow view (only for Muse | Mist).
  onmobile: false #手机上是否显示侧边栏
  

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 菜单栏配置

    在主题中打开_config.yml文件中进行配置：

    menu:
  home: / || home
  # about: /about/ || user
  tags: /tags/ || tags
  categories: /categories/ || th
  archives: /archives/ || archive
  #schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap
  #commonweal: /404/ || heartbeat

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    系统自动帮我们创建了home和archives页面，所以我们只需要使用终端创建tags和categories页面即可

    $ cd hexo文件目录
$ hexo new page "tages"
$ hexo new page "categories"

    • 1
    • 2
    • 3

    3、添加搜索功能

    1、安装 hexo-generator-searchdb 插件

    $ cd 文件目录
$ npm install hexo-generator-searchdb --save

    • 1
    • 2

    2、打开站点配置文件_config.yml,找到Extensions在下面添加:

    # 搜索
search:
  path: search.xml
  field: post
  format: html
  limit: 10000

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    3、打开主题配置文件_config.yml,找到Local search，将enable设置为true。

    4、添加分类、标签、关于

    1. hexo new page "about"
2. hexo new page "tags"
3. hexo new page "categories"

    • 1
    • 2
    • 3

    5、增加categories: 书籍

    • 只要搭建好了categories界面，然后在自己的博客里面增加上面categories即可

    6、设置菜单项的显示中文文本

    打开 themes/next/languages/zh-Hans.yml 文件,搜索 menu 关键字，修改对应中文或者新增。

    7、Hexo NexT主题更改语言

    打开站点配置文件：站点根目录/_config.ymlspa

而后搜索找到language属性，属性值配置成zh-Hans，表示中文c
language: zh-Hans

    • 1
    • 2
    • 3
    • 4

    8、 设置头像边框为圆形框

    打开位于 themes/next/source/css/_common/components/sidebar/sidebar-author.syl 文件,修改如下:

    .site-author-image {
      display: block;
      margin: 0 auto;
      padding: $site-author-image-padding;
      max-width: $site-author-image-width;
      height: $site-author-image-height;
      border: $site-author-image-border-width solid $site-author-image-border-color;
    // 修改头像边框
      border-radius: 50%;
      -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    9、hexo之next主题添加分类

    编辑新建界面，将页面类型设置为categories，主题将会在这个页面上显示所有的分类：

    ---
title: categories
date: 2018-03-02 12:33:16
type: "categories"
---
然后在需要的地方添加【categories：分类】就可以

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    10、 主页文章添加边框阴影效果

    打开 themes/next/source/css/_custom/custom.styl ,向里面加代码:

    // 主页文章添加阴影效果
.post {
   margin-top: 0px;
   margin-bottom: 60px;
   padding: 25px;
   -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
   -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    11、修改文章间分割线

    打开 themes/next/source/css/_common/components/post/post-eof.styl ,修改：

    .posts-expand {
  .post-eof {
    display: block;
  //  margin: $post-eof-margin-top auto $post-eof-margin-bottom;  
    width: 0%; //分割线长度
    height: 0px; // 分割线高度
    background: $grey-light;
    text-align: center;
  }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    12、代码块自定义样式

    // Custom styles.
code {
    color: #ff7600;
    background: #fbf7f8;
    margin: 2px;
}
// 边框的自定义样式
.highlight, pre {
    margin: 5px 0;
    padding: 5px;
    border-radius: 3px;
}
.highlight, code, pre {
    border: 1px solid #d6d6d6;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

    Next主题优化

    前言

    在Hexo的模板中选择了Next主题，看中了Gemini风格。特意修改了一下，以满足使用

    找到themes中的next文件夹，进入/source/css/_variables/目录，打开Gemini.styl文件
置$body-bg-color，改变页面背景色。

    • 1
    • 2

    页面底部主题信息删除

    打开themes中的next文件夹，找到_config.yml文件，修改footer下面的配置为false即可

    • 1

    页面顶部黑色线条删除

    打开themes中的next文件夹，找到/source/css/_common/components/header/headerband.styl文件，删除background样式即可

    • 1

    可能遇到的问题

    环境要求

    对于node环境要求
    在这里插入图片描述

    网速过慢

    npm是从国外服务器下载，速度慢可能出现异常，所以我们可以安装cnpm来替换npm

# 终端输入
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
#查看安装版本
$ cnpm -v

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    安装淘宝镜像文件 【后续补充】

    安装淘宝镜像文件 【后续补充】
git config --global user.name "Lourance"
git config --global user.email "2455067339@qq.com"

# 建议不要直接使用 cnpm 安装依赖，会有各种诡异的 bug。
可以通过如下操作解决 npm 下载速度慢的问题
npm install --registry=https://registry.npm.taobao.org


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    本地推送到远程仓库出的问题解决

    [remote rejected] master -> master (hook declined) error: failed to push some refs to

解决方法：码云的解决方法 ： 设置>多邮箱管理>公开

    • 1
    • 2
    • 3

    终端输入“hexo clean”报错，正确做法是：

    首先定位到博客文件夹，输入以下命令并回车：
    cd /Users/你的用户文件夹名/你的 blog 文件夹名【我的 tbai】
    开启 root 权限（超级管理员权限），输入以下命令并回车：
    sudo su
    最后一步，依次输入 hexo 三连并回车：

    $ hexo clean
$ hexo g
$ hexo d

    • 1
    • 2
    • 3

    Gitee上出现未可知的违规信息

    检查以后发现是文章里面有 &  ，Gitee
// 删除以后再次更新正常

    • 1
    • 2

    hexo博客使用Next主题，将主题改为子主题Gemini后，用hexo s启动服务器本地查看正常，但hexo d推送至服务器后，服务器端的主题并没有改变。

    解决方法
使用命令hexo clean清除缓存后，再重新使用hexo g编译，最后再用hexo d推送即可。

    • 1
    • 2

    markdown主题图片不显示

    问题：改主题为Gemini时，hexo clean，hexo g，hexo d 三个命令完成后主题未改变
    解决办法：删除next下的.git文件夹（这好像是个隐藏文件夹），再上传时修改成功。

附：后来我又发现用 hexo s 命令查看网页部署时是成功的，但是 hexo d 部署到GitHub上就不行，后来等一会就行了，可能是有延迟。

    • 1
    • 2
    • 3

    我的博客以及相关其他博客

    https://ltbai.gitee.io/note/ 我的博客

https://lovelijunyi.gitee.io/
https://sunhwee.com/

    • 1
    • 2
    • 3
    • 4
  • 相关阅读:
    spring探秘之ConfigurationClassPostProcessor（一）：处理@ComponentScan注解
    ipconfig显示的内容分析(一）网卡
    [蓝桥杯]避免常见坑点（输入输出问题、数据溢出问题等）
    保障通航桥梁安全，创新边缘计算技术助力桥梁主动防撞预警系统
    Go：TernarySearch三元搜索(附完整源码)
    StringUtils 系列之 StringUtils.isBlank() 和 StringUtils.isNotBlank() 的区别、CollectionUtils.isEmpty()
    Unity中Shader通道ColorMask
    Js的三大核心之DOM
    Java项目：SSH电影在线售票管理系统
    【二进制部署k8s-1.29.4】五、kube-controller-manager安装配置
  • 原文地址：https://blog.csdn.net/weixin_43615570/article/details/136249626