Fork me on GitHub

个人知识库：hexo博客

字数统计: 2.5k字   |   阅读时长≈ 10分

一个超实用的个人网站

hexo是什么？

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他标记语言）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

我需要准备什么？

  1. 首先是他必备的运行环境，NodeJS和Git，下面会准备链接
    1. GIt：GIT 下载链接
    2. NodeJS：Nodejs安装包

安装组件

安装Git

直接点击安装即可，安装完成后打开cmd

按住win+R，输入cmd即可打开命令行窗口

输入下列代码，查看版本

1
git --version

​

安装完成会显示版本号，则说明安装成功

安装NodeJS

点击下载链接，打开安装即可，和上一步一样

按住win+R，输入cmd即可打开命令行窗口

输入下列代码，查看版本

1
node --version

安装完成会显示版本号，如我的版本为V20.13.1

安装hexo

组件安装完成后，输入

1
npm install -g hexo

即可开始安装hexo

创建一个hexo目录

安装好后，在你空域磁盘的目录下创建一个新的文件夹，如blog

然后双击进入文件夹

在显示目录的位置单击，输入cmd即可唤醒命令窗口

初始化hexo

打开cmd窗口之后，输入

1
hexo init

即可开始hexo 的初始化，等待初始化完成，你就可以看到目录了

预览hexo的模样

初识的hexo默认有一篇教你起步的HelloWorld文章，会告诉你三个命令

分别是

1
2
3
hexo clean 用于清理缓存
hexo g 生成静态页面
hexo d 部署你写作的内容

这三个指令作为常用的指令，是接触hexo必须要记住的

安装一个好看的主题

hexo博客带有主题系统，可以通过

1
git clone 附带链接把主题拷贝到本地

主题存放在hexo目录的themes下

在你的cmd窗口输入cd themes 即可进入这个目录

以Next主题为例，在命令行输入以下内容

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

即可下载出一个**/themes/next**了

打开文件夹，再进入themes下的themes，即blog/themes/themes，那么存储Next主题的路径就是：blog/themes/themes/Next

进入目录选择next文件夹，**右键复制，粘贴到，blog/themes/**即可

配置文件

blog根目录下记录了hexo的全局配置

下列代码区就是文件的大概内容

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: 站点标题
subtitle: '' 副标题
description: '' 网站描述
keywords: 网站的关键词。支持多个关键词。
author: 您的名字
language: 网站语言，中文设置zh_CN即可
timezone: '' 时区，核对时间，设置为Asia/Shanghai 即可

# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: 网址, 必须以 http:// 或 https:// 开头
root: 网站根目录
permalink: 文章的 永久链接 格式
permalink_defaults: 永久链接中各部分的默认值
pretty_urls: 改写 permalink 的值来美化 URL
  trailing_index: true # 是否在永久链接中保留尾部的 index.html，设置为 false 时去除
  trailing 'index.html' 是否在永久链接中保留尾部的 .html, 设置为 false 时去除 (对尾部的 index.html无效)
  trailing_html: true # Set to false to remove trailing '.html' from permalinks

# Directory
source_dir: 资源文件夹，存放内容。默认值source
public_dir: 公共文件夹，于存放生成的站点文件。默认值public
tag_dir: 标签文件夹，默认值tags
archive_dir: 归档文件夹，默认值archives
category_dir: 分类文件夹，默认值categories
code_dir: Include code文件夹，source_dir下的子目录，默认值downloads/code
i18n_dir: 国际化（i18n）文件夹，默认 :lang
skip_render: 跳过指定文件的渲染。匹配到的文件将会被不做改动地复制到 public 目录中。您可使用 glob 表达式来匹配路径。默认留空

# Writing 这部分没有特殊需求保持不变即可
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link:
  enable: true # Open external links in new tab
  field: site # Apply to the whole site
  exclude: ''
filename_case: 0
render_drafts: false
post_asset_folder: false 启用资源文件夹，用来存放本地的图片，开启改为 true
relative_link: false
future: true
syntax_highlighter: highlight.js
highlight:
  line_number: true
  auto_detect: false
  tab_replace: ''
  wrap: true
  hljs: false
prismjs:
  preprocess: true
  line_number: true
  tab_replace: ''
  	

# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
  path: ''
  per_page: 10
  order_by: -date

# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# Metadata elements
## https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta
meta_generator: true

# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD  日期格式
time_format: HH:mm:ss  时间格式
## updated_option supports 'mtime', 'date', 'empty'
updated_option: 'mtime'  当 Front Matter 中没有指定 updated 时 updated 的取值

# Pagination
## Set per_page to 0 to disable pagination
per_page: 10  每页显示的文章量 (0 = 关闭分页功能)
pagination_dir: page  分页目录

# Include / Exclude file(s) 没有需要不写
## include:/exclude: options only apply to the 'source/' folder
include: Hexo 默认会不包括 source/ 下的文件和文件夹（包括名称以下划线和 . 开头的文件和文件夹，Hexo 的 _posts 和 _data 等目录除外）。通过设置此字段将使 Hexo 处理他们并将它们复制到 source 目录下
exclude: Hexo 不包括 source/ 下的这些文件和目录
ignore: Hexo 会忽略整个 Hexo 项目下的这些文件夹或文件

# Extensions 主题配置，在theme后输入主题名字即可
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: particlex

# Deployment 部署部分的设置，如部署到GitHub或者gitee，gitlab
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: 类型，写git
  repo: github的仓库地址，需要提前配置ssh
  branch: 部署分支，main或master都可以

hexo中加入本地图片的实现

  1. 首先需要打开配置文件config.yml。找到post_asset_folder: false设置项，把flase改为true，保存文件

  2. 安装扩展，找到你的cmd窗口，hexo-asset-image

    1. 方法为在博客根目录下运行cmd，输入

      1
      npm install https://github.com/xcodebuild/hexo-asset-image.git --save

完成上述配置后，每次创建新的文章，都会生成一个资源文件夹，里面即可存放你的图片，如截图，壁纸，文件内容，学习资料等

  1. 输入

    1
    hexo n 文件名  创建新的文件，也会生成同名的文件夹，可以存放资源进去

  • 本地图片的引用方法

    1. 使用Typora，点击格式，图像，插入本地图像，选择刚刚对应文件夹的目录即可

    2. 引用语法

      1
      2
      # 引用图片的时候一定要带上目录名称作为路径
      ![本地图片](测试文章/本地图片.jpg)

    3. 补充说明

    4. 显然，在hexo中引入图片的方式稍微有点繁琐，即：必须在_post目录下新建一个与文章同名的目录，然后将需要引用的图片文件都放在该目录中。 还好使用插件hexo-asset-image能够帮助我们自动创建图片目录（每次都会自动创建，如果在文章中不需要引用图片资源，可以手动将该目录删除）。

      那么，为什么需要将文章引用的图片放置在与文章同名的目录呢？ 原因是：在执行hexo g命令的时候会将文章转换为一个index.html文件，该文件路径为public/年/月/日/文章名称/index.html，同时也会将文章中引用的图片文件拷贝到与index.html文件相同的目录中。

注册GitHub账号

首先，要知道入口在哪里

GitHub：[注册入口](Join GitHub · GitHub)

其次，你要准备这些

  1. 可用的邮箱
  2. 注册后创建一个仓库
  3. 本地的ssh密钥，用于免登录调用GitHub的仓库

注册,输入用户名（英文数字组合），绑定邮箱，即可注册

创建仓库，补充说明以下内容

  1. 仓库名字设置为，用户名.GitHub.io
  2. 如你的用户名是lulu，那么就是lulu.GitHub.io
  3. 根据GitHub的规则，当部署到GitHubpages服务后，按照刚刚命名的仓库才会被识别

根据规则，这样写

本地的ssh密钥

按住win+R，输入以下内容

1
2
git config --global user.name "muzihuaner"
git config --global user.email "xxxxxx@qq.com"

  1. 第一项为你的GitHub用户名，第二项为注册邮箱

  2. 分别配置好以后，可以执行检查指令

    1
    2
    git config user.name
    git config user.email

  3. 确认无误，输入

    1
    2
    ssh-keygen -t rsa -C "youremail"
    email就是你注册GitHub的邮箱

  4. 生成的文件会存储到如下目录

    1
    c:\useers\用户名\.ssh 下

  5. 如图所示位置

  6. 将文件中的密钥写进去

  8. 确定文件目录后，根据下面的说明

    id_rsa是你这台电脑的私人秘钥，id_rsa.pub是公共秘钥。把公钥放在GitHub上，当你连接自己的Github账号时，它就会根据公钥匹配你的私钥，当能够相互匹配时，才能够顺利的通过Git上传你的文件到GitHub上。

  9. 找到*SSH and GPG keys*，新建SSH Key

  10. 以文本方式打开id_rsa.pub文件，将内容复制到Key，标题随便起，添加Key。

配置config文件的部署

打开**/blog下的condig.yml**,找到deploy的内容,根据代码块的内容改写你的文档

1
2
3
4
deploy:
  type: git
  repository: git@githb.com:muzihuaner/muzihuaner.github.io.git
  branch: main

安装上传扩展

这个扩展是方便你对写作好的内容部署到你规定的仓库的,代码如下

1
npm install hexo-deployer-git --save

上传依次输入这些指令

1
2
3
4
hexo clean 清理缓存
hexo g 生成网页
hexo d 部署到仓库(上传)
hexo s 本地预览你的网页

确认无误即可上传部署了

开启pages服务

GitHub pages

打开你的GitHub仓库,点击settings,在左侧栏找到pages选项

修改完后,即可用用户名.GitHub.io进行访问了,案例网站如下

案例网站

赏

谢谢你请我吃糖果

支付宝
微信

扫一扫，分享到微信

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia-plus根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

业余爱好者，喜欢折腾，欢迎交流