Hexo的安装使用小记

2022-01-18 17:15:35 浏览数 (1)

Hexo 在 Windows 环境下运行可能会随机出现多种奇怪的错误，推荐有能力的话尽量在 Linux 下如 Ubuntu 环境部署相关服务。

初步部署一个 Hexo 博客

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

前置工作的准备：

Hexo 的运行需要 Node.js 和 Git 的支持，首先需要下载 win 下的 Git 组件：Git 下载地址，安装 win 下的 Node.js,这里选择安装 Node.js 的 LTS 版本即可：Node.js 下载地址

Windows 用户 对于 windows 用户来说，建议使用安装程序进行安装。安装时，请勾选 Add to PATH 选项。 另外，您也可以使用 Git Bash，这是 git for windows 自带的一组程序，提供了 Linux 风格的 shell，在该环境下，您可以直接用上面提到的命令来安装 Node.js。打开它的方法很简单，在任意位置单击右键，选择“Git Bash Here”即可。由于 Hexo 的很多操作都涉及到命令行，您可以考虑始终使用 Git Bash 来进行操作。

安装 Hexo 到你的电脑：

运行 Powershell（若提示权限不足 premission denied 等错误,请运行管理员权限的 Powershell)执行npm install -g hexo-cli完成安装。

代码语言：javascript复制
ERROR! Log cannot be display

初始化 Hexo：

在 Powershell 中 cd 到想要保存文件的目录执行以下命令完成初始化

代码语言：javascript复制
$ hexo init <folder>
$ cd <folder>
$ npm install

<folder>是你想要创建 Hexo 文件夹的目录名称，需要自行修改 初始化完成后产生的目录树为

代码语言：javascript复制
.
├── _config.yml #管理网站的大部分参数配置
├── package.json #npm程序信息
├── scaffolds
├── source #文档存储目录
|   ├── _drafts #草很高
|   └── _posts #页面
└── themes #主题文件夹

生成第一个 Hexo 网页：

$ hexo new <title>

  • 关于目录中的页面布局（Layout），Hexo 默认给出了三种样式post、page 和 draft，在使用$ hexo new命令创建不同的 Layout 时，Hexo 也会生成不同的储存路径。布局路径Postsource/_postsPagesourceDraftsource/_drafts

使用 Hexo 产生页面：

在你的网页文件夹根目录中执行hexo g即可生成页面文件，使用hexo s即可在 LocalHost 上打开一个本地的静态服务器可供本地预览。

Hexo 程序对于文件中的空格十分敏感，在修改配置文件和页面时需要格外注意空格的使用！

[========]

自定义 Hexo 博客的相关配置_config.yml

位于/目录下的_config.yml主要用于配置网站参数与 Hexo 运行有关的插件功能，详细用法参考Hexo Configuration

  • 例如：
代码语言：javascript复制
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: 米奇妙妙屋
subtitle: ifibe ∞
description: 米奇不妙屋
keywords: [Karan, blog, 个人博客, 個人博客, 米奇妙妙屋]
author: Karan
language: default
timezone:

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://ifibe.com/ #网站域名
root: / #网站目录
permalink: :year/:month/:day/:title/ #页面固定链接
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: 404.html #跳过渲染的文件

# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new 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:

# 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

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: Butterfly #设置Hexo使用的主题
Plugins: #相关插件的启用
  - hexo-generator-sitemap
  - hexo-generator-feed

#### Sitemap自动插件（需要插件配合）
sitemap:
  path: sitemap.xml

#### 流程图插件（需要插件配合）
flowchart:
  options: # options used for `drawSVG`
#### 流程图插件（需要插件配合）
sequence:
  options:
    theme:
    css_class:

#### 搜索功能插件（需要插件配合）
search:
  path: search.xml
  field: post
  content: true
git hexo node.js bash powershell

0 人点赞