Hexo博客搭建及配置

2023-10-26

Hexo 是高效的静态站点生成框架,基于 Node.js。 通过 Hexo 你可以轻松地使用 Markdown 编写文章,除了 Markdown 本身的语法之外,还可以使用 Hexo 提供的 tag 插件 来快速的插入特定形式的内容。Hexo 还拥有丰富的主题和插件。

前提环境

  • 安装Node.js (Should be at least nodejs 6.9)
  • 安装GitGit命令官方文档
  • Github注册并创建 github pages 库:库名为 username.github.iousername 必须和github用户名保持一致

Hexo 相关命令

选择博客目录文件夹,右键打开 Git Bash Here

  • 安装命令
npm install hexo-cli -g             # 安装hexo
hexo init username.github.io        # 初始化项目文件夹
cd username.github.io               # 进入项目根目录
npm install                         # 安装依赖包
  • 常用操作
hexo clean           # 清除缓存
hexo generate        # 编译文件 生成静态页面至 \public 目录
hexo serve           # 本地预览  http://localhost:4000 
hexo deploye         # 发布 https://username.github.io

hexo new "PostName"        # 新建文章至 \source\_posts
hexo new page  "pageName"  # 新建页面
  • 命令简写
hexo clean && hexo g -s    # 清除缓存+生成+预览
hexo clean && hexo g -d    # 清除缓存+生成+发布

预览

可在本地4000端口预览 http://localhost:4000
主题的配置文件,修改时会自动更新,无需重启服务器。

  • 先安装服务器插件
npm install hexo-server --save
  • 修改{% label primary@站点配置文件 %}
deploy:
  type: git
  • 预览
hexo serve 

Git 配置

配置 SSH keys

  • 生成新的 SSH keys
ssh-keygen -t rsa -C "github的注册邮箱"
  • 添加 SSH Key 到 GitHub
    在本地用户文件夹 C:\Users\Administrator\ 找到 .ssh\id_rsa.pub
    用编辑器打开,并复制全部内容 ·ctrl+A -> ctrl+C
    打开 github setting -> SSH keys and GPG keys -> New SSH keys -> 粘贴 -> Add SSH key

  • 测试设置是否成功

ssh -T git@github.com
  • 配置个人信息
git config --global user.name "username"
git config --global user.email "github注册邮箱"

部署博客到 github pages

  • 安装插件
npm install hexo-deployer-git --save
  • 修改{% label primary@站点配置文件 %}
deploy:
  type: git
  repo: git@github.com:username/username.github.io.git    # 预先创建好的库地址
  branch: master                                          # 分支名称
  message: update                                   # 自定义commit信息
  • 推送到 github
hexo deploye

完成以上操作后,使用浏览器访访问 https://username.github.io 就可以成功访问我们的博客

当执行 hexo deploy 时,Hexo 会将 public 目录中的文件和目录推送至_config.yml 中指定的远端仓库和分支中,并且完全覆盖该分支下的已有内容。
此外,如果您的 Github Pages 需要使用 CNAME 文件自定义域名,请将 CNAME 文件置于 source 目录下,只有这样 hexo deploy 才能将 CNAME 文件一并推送至部署分支

站点配置文件

Hexo 框架主要配置2方面的内容:站点配置文件和主题配置文件。

站点配置文件 ‪username.github.io\_config.yml
主题配置文件 ‪username.github.io\themes\next\_config.yml

站点配置文件建议参考中文官方文档

站点配置主要分为几块:

Site 网站
title: title 网站标题
subtitle: ∞ 网站子标题
description: 个人技术博客 网站的描述性
keywords: 网站的关键字
author: name 网站的作者
language: zh-CN 网站采用语言,与/theme/next/languages/zh-CN.yml下的文件名对应
timezone: 网站的时区
URL url配置
url: https://username.github.io 网站的url,如果不在域名根目录,应包含子目录,且root要设置为/子目录/
root: / 网站的根目录
permalink: :year/:month/:day/:title/ 文章永久链接的形成模版。每一篇文章都有唯一的url。
permalink_defaults: 文章永久链接中,各部分的默认值。
Directory 路径配置
source_dir: source 网站中源文件
public_dir: public 生成的静态网站的目录
tag_dir: tags 标签页所在的文件夹
archive_dir: archives 文档页所在的文件夹
category_dir: categories 类别页所在的文件夹
code_dir: downloads/code 代码页所在的文件夹
i18n_dir: :lang 国际语言所在的文件夹
skip_render: 忽略文档清单
Writing 写作设置
new_post_name: :title.md 默认新建文档名,:title为变量,指文档标题,也可用其他变量
default_layout: post 新建文档的默认布局
titlecase: false 是否要把标题中的首字符大写
external_link: true 是否要在新开tab中打开外链
filename_case: 0 文件名是否小写敏感
render_drafts: false 是否渲染草稿
post_asset_folder: false 是否启用资源文件夹。如启用,新建文档同时建立同名的资源文件夹
relative_link: false 是否把站内资源的链接改为站内相对链接。建议关闭。
future: true 文档中指定为未来时间创建
highlight:                     
  enable: true                          # 是否开启代码高亮功能 
  line_number: true                     # 代码块中是否在前面加上行号
  auto_detect: false                    # 是否自动检测代码块的语言
  tab_replace:                          # 用什么字符来代替tab(`\t`)字符。 

主页设置

index_generator:          
  path: ''                   # 主页所在路径,默认为''
  per_page: 10               # 主页的索引页包含文章数量,如未定义,则采用根目录下的`per_page`值
  order_by: -date            # 文章(Post类型)排序属性,`-`为降序 
  
archive_generator:           # 归档页
  per_page: 20
  yearly: true
  monthly: true

tag_generator:               # 标签页
  per_page: 10  
Category & Tag 分类和标签
default_category: uncategorized 对文档的默认分类
category_map: 对文档中的分类字段进行映射,建立分类文件夹时采用映射后的字符串
tag_map: 对文档中的标签字段进行映射,建立标签文件夹时采用映射后的字符串
per_page: 10 主页/分类/标签/存档等类型索引页包含文章数量
pagination_dir: page 分页所在文件夹

接下来是扩展(Extensions),放置插件和主题。

theme: next    # 更换主题

写作模板

在新建文章时,Hexo 会根据 scaffolds 文件夹内相对应的模板来建立文件

Front-matter 是文件最上方以 --- 分隔的区域,用于指定个别文件的变量,举例来说:

---
title: Hello World
date: 2013/7/13 20:46:25
---
参数 描述 默认值
layout 布局
title 标题
date 建立日期 文件建立日期
updated 更新日期 文件更新日期
comments 开启文章的评论功能 true
tags 标签(不适用于分页)
categories 分类(不适用于分页)
permalink 覆盖文章网址
keywords 仅用于 meta 标签和 Open Graph 的关键词(不推荐使用)

分类和标签

可以在 Front-matter 中设置分类和标签。

categories:
- Diary
- Sunday 
tags:
- Games

文章摘要和截断

在文章中使用 <!-- more -->,那么 <!-- more --> 之前的文字将会被视为摘要,在主页中展示。

置顶和置顶标签

修改Hexo文件夹下的node_modules/hexo-generator-index/lib/generator.js,在生成文章之前进行文章sticky值排序。

以下是最终的generator.js内容

'use strict';

var pagination = require('hexo-pagination');

module.exports = function(locals) {
  var config = this.config;
  var posts = locals.posts.sort(config.index_generator.order_by);
  
  // -----------------需要添加的代码------------------------
  posts.data = posts.data.sort(function(a, b) {
      if(a.sticky && b.sticky) { // 两篇文章sticky都有定义
          if(a.sticky == b.sticky) return b.date - a.date; // 若sticky值一样则按照文章日期降序排
          else return b.sticky - a.sticky; // 否则按照sticky值降序排
      }
      else if(a.sticky && !b.sticky) { // 以下是只有一篇文章sticky有定义
          return -1;
      }
      else if(!a.sticky && b.sticky) {
          return 1;
      }
      else return b.date - a.date; // 都没定义按照文章日期降序排
  });
  //-------------------------分割线-----------------------
  
  var paginationDir = config.pagination_dir || 'page';
  var path = config.index_generator.path || '';

  return pagination(path, posts, {
    perPage: config.index_generator.per_page,
    layout: ['index', 'archive'],
    format: paginationDir + '/%d/',
    data: {
      __index: true
    }
  });
};

修改完成后,只需要在front-matter中设置需要置顶文章的 sticky: true。同时sticky也决定了是否添加置顶标签。
也可以设置sticky值为数字,将会根据sticky值大小来选择置顶顺序,sticky值越大越靠前。
需要注意的是,这个文件不是主题的一部分,也不是Git管理的,备份的时候比较容易忽略。

本地图片链接

  • 如果你的Hexo项目中只有少量图片,那最简单的方法就是将它们放在 source/images 文件夹中。然后通过类似于 ![](/images/image.jpg){% asset_img /images/image.jpg %}的方法访问它们。
  • 对于那些想要更有规律地提供图片和其他资源以及想要将他们的资源分布在各个文章上的人来说,Hexo也提供了更组织化的方式来管理资源。
    需要首先修改站点配置文件 post_asset_folder: true 打开资源文件夹。
    打开当资源文件管理功能打开后,Hexo将会在你每一次通过 hexo new [layout] <title> 命令创建新文章时自动创建一个文件夹。这个资源文件夹将会有与这个文章文件一样的名字。将所有与你的文章有关的资源放在这个关联文件夹中之后,你可以通过相对路径 ![](image.jpg) 来引用它们。

踩过的坑

skip_render:跳过指定文件的渲染。匹配到的文件将会被不做改动的复制到 public 目录中。

  • skip_render: "mypage/**" 将会直接将 source/mypage/下的所有文件和目录不做改动地输出到 ‘public’ 目录
    注意:这里只能填相对于source文件夹的相对路径。千万不要手贱加上个/

  • skip_render: "_posts/test-post.md" 这将会忽略对 ‘test-post.md’ 的渲染

  • skip_render: "mypage/*"将会忽略source/mypage/文件夹下所有文件的渲染

  • skip_render: "mypage/*.html" 将会忽略source/mypage/文件夹下.html文件

  • 如果要忽略多个路径的文件或目录,可以这样配置:

    skip_render: 
      - "_posts/test-post.md"   
      - "mypage/*"
    

参考链接:
Github+Hexo搭建专属自己的博客
HEXO添加置顶功能

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Hexo博客搭建及配置 的相关文章

  • Matlab plotyy画2个纵坐标不同的图

    目录 plotyy函数可以绘制双纵坐标的二维图 具体用法总结如下 1 如何设置双坐标 2 如何设置线型 3 加注图例 plotyy函数可以绘制双纵坐标的二维图 具体用法总结如下 1 plotyy X1 Y1 X2 Y2 以左 右不同纵轴绘制
  • 创建repo报错

    doesn t match any of the locations specified by path repo because this setting is empty 这个错误的原因所有的master和data都要配置一个path
  • 十分钟学会开发自己的Python AI应用【OpenAI API篇】

    最近 OpenAI 宣布 ChatGPT 将很快推出他们的 API 虽然我们不知道这需要多长时间 但这之前我们可以熟悉下OpenAI API 快速开发自己的AI应用 通过今天学习 OpenAI API 你将能够访问 OpenAI 的强大模型
  • python在获取网络状态时连接尝试失败应该怎么办

    如果 Python 在获取网络状态时连接尝试失败 可以采取以下措施 对检查网络连接状态 检查是否有其他设备或程序正在使用网络 确保网络连接正常 检查目标网站是否存在 如果目标网站不存在或正在维护 连接将失败 使用代理服务器 如果您的网络有限
  • 数据分析毕业设计 大数据商城人流数据分析与可视化 - python

    文章目录 0 前言 课题背景 分析方法与过程 初步分析 总体流程 1 数据探索分析 2 数据预处理 3 构建模型 总结 0 前言 这两年开始毕业设计和毕业答辩的要求和难度不断提升 传统的毕设题目缺少创新和亮点 往往达不到毕业答辩的要求 这两
  • npm ERR! code EPERM npm ERR! syscall open npm ERR! path D:\Program Files\nodejs\npm_packages\_cacach

    问题描述 npm ERR code EPERM npm ERR syscall open npm ERR path D Program Files nodejs npm packages cacach 问题截图 问题原因 因为nodojs的
  • Kaldi 编译问题

    今天编译Kaldi 总是冒出 Could not find any libraries usr local lib liblapack liblapack atlas libclapack that seem to be an ATLAS
  • MySQL编码设置方法 MySQL编码为utf8设置方法

    mysql的默认编码是拉丁 我每次JSP制作网页用insert语句插入数据库时汉字都会显示成问号 安装mysql后 启动服务并登陆 使用show variables命令可查看mysql数据库的默认编码 由上图可见database和serve
  • 前端学习————css实现简单登录页面

    css实现简单登录页面 一 页面展示 二 思路 1 设置背景图片 2 设置登录框框并使其处于靠右位置 3 设置登录框框内容 三 代码展示 1 HTML 2 css 一 页面展示 二 思路 1 设置背景图片 2 设置登录框框并使其处于靠右位置
  • matlab cftool光滑曲线导出为什么就不光滑了_MATLAB

    0 前言 数据可视化 data visualization 技术指的是运用计算机图形学和图像处理技术 将数据转换为图形或图像在屏幕上显示出来 并进行交互处理的技术 它涉及计算机图形学 图像处理 计算机辅助设计 计算机视觉及人机交互技术等多个
  • 常用电磁屏蔽材料介绍及技术指标

    其实在电子设备工作时 其内部及外部会存在各种电磁干扰 这些干扰会影响到设备的正常工作 通常 电子设备工作时对外界的干扰强度及其自身抗外界干扰的能力 我们将其称之为电磁兼容 电磁兼容 Electromagnetic Compatibility
  • arduino字符串处理函数charAt()提取字符

    语法 String charAt n 参数 n 字符串中的第几个字 返回值 char 功能 获取字符串中的某一个字符 字符的位置即n的位置 String str hello 定义一个字符对象 Char s str charAt 3 取对象里
  • 单链表插入与删除数据

    1 按元素大小顺序插入到链表中 2 include
  • 在eclipse中调试时,怎样查看一个变量的值?

    在要查看的变量前先设置断点 然后选中变量 右键选debug as gt Java Application 打开debug 透视图 这时在Variables 窗口中可以看到变量当前的值 如果是局部变量 也可以在局部变量窗口中查看 要知道一个方
  • 【区块链新手快速入门】如何构建一个区块链

    本文翻译自 Learn Blockchains by Building One 作者 dvf 原文链接 https hackernoon com learn blockchains by building one 117428612f46
  • go单元测试进阶篇

    2019独角兽企业重金招聘Python工程师标准 gt gt gt 版权声明 本文由腾讯云数据库团队 原创文章 转载请注明出处 文章原文链接 https www qcloud com community article 9219850014

随机推荐