Hexo折腾之旅

最新推荐文章于 2023-03-22 22:00:46 发布

only_matthew

最新推荐文章于 2023-03-22 22:00:46 发布

阅读量444

点赞数

分类专栏：折腾文章标签：个人开发

本文链接：https://blog.csdn.net/only_achina/article/details/126423057

版权

前言

在试过WordPress和Typeho后，感觉好用是好用（可以在线写文章），可惜速度慢了点，一测速全国都是1.5s~4s,于是打算折腾Hexo。

不看官方教程的后果

啥也不知道疯狂百度，瞎几把看别人的blog结果还是不会，还是得自己折腾。
搜了一圈以后还是回到了官方文档，跟着官方一步一步来。
官网： Hexo

如何折腾官网都有详细的介绍，但是还是可以记录一下的。

Let’s get started!

安装环境

官方页面：文档 | Hexo

hexo和大部分开源软件一样，下载安装更新都依赖与git，我们需要去git官网下载git。

Git - Downloading Package (git-scm.com)

安装自己的架构和系统选择下载，我的是windows 64就选择win64了。

再安装hexo依赖的环境node.js即可开始你的hexo折腾之旅。

Download | Node.js (nodejs.org)

当然如果你网不太好的话可以去国内的镜像站下载：

安装Hexo

npm install -g hexo-cli

即可安装Hexo的基础包。

安装完Hexo基础包后即可选择一个目录安装Hexo。

打开cmd或者poweshell，cd到你要安装到的目录。

如果你是win11可以直接在该目录右键：

输入

hexo init <folder>
cd <folder>
npm install

到这里Hexo就安装完成了。

对于各个目录的说明请查看：建站 | Hexo

安装主题

我选择的是butterfly，可以说是Hexo最优秀的主题之一了：Butterfly 安裝文檔(一) 快速開始 | Butterfly

在你的Hexo安装目录执行：

git clone -b master https://gitee.com/immyw/hexo-theme-butterfly.git themes/butterfly

当然你也可以选择从github拉取或者npm安装。

安装之后当然需要启用了，打开Hexo安装目录下的 _config.yml,Ctrl + F 查到到 theme: 修改成 theme: butterfly

一定要加空格，Hexo的配置文件不加空格有时会发生意想不到的的错误！这个坑我当时排了2个小时！

配置Hexo官方配置

永久链接中的trailing_index和 trailing_html强烈建议关闭，那样就不会有后缀

# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: https://blog.loveoi.net
permalink: :category/:title/
permalink_defaults:
pretty_urls:
  trailing_index: false # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: false # Set to false to remove trailing '.html' from permalinks

一般的，我们只需要修改开头的几个文件即可，这是我的配置文件，可以参考一下：

# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: CS奇妙
subtitle: ''
description: ''
keywords:
author: only_matthew
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: https://blog.loveoi.net
permalink: :category/:title/
permalink_defaults:
pretty_urls:
  trailing_index: false # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: false # 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: downloads/code
i18n_dir: :lang
skip_render:

# 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
relative_link: false
future: true
highlight:
  enable: true
  line_number: true
  auto_detect: false
  tab_replace: ''
  wrap: true
  hljs: false
prismjs:
  enable: false
  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'

# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page

# Include / Exclude file(s)
## include:/exclude: options only apply to the 'source/' folder
include:
exclude:
ignore:

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: butterfly

search:
  path: search.xml
  field: post
  format: html
  limit: 10000

feed:
  enable: true
  type: rss
  path: rss.xml
  limit: 20
  hub:
  content:
  content_limit: 140
  content_limit_delim: ' '
  order_by: -date
  icon: icon.png
  autodiscovery: true
  template:

sitemap:
  path: 
    - sitemap.xml
  template: ./sitemap_template.xml
  rel: false
  tags: true
  categories: true
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment

deploy:
  -   type: ali-oss
      region: ******
      accessKeyId: ********************
      accessKeySecret: ***************
      bucket: *****
  -   type: git
      repo: *************************
      branch: gh-pages
      message: blog_update

详细的修改可以查看Hexo官方说明：配置 | Hexo

新建页面为下一步的主题页面配置铺垫

官方说明：Butterfly 安裝文檔(二) 主題頁面 | Butterfly

按照官方说明配置页面:

标签页

前往你的 Hexo 博客的根目录
输入hexo new page tags
你会找到source/tags/index.md这个文件
修改这个文件：
记得添加 type: “tags”

之后新建的文章也需要添加一个 tags 参数才能生效。

分类页

前往你的 Hexo 博客的根目录
输入hexo new page categories
你会找到source/categories/index.md这个文件
修改这个文件：
记得添加 type: “categories”

之后新建的文章也需要添加一个 categories 参数才能生效。

友链

在Hexo根目录输入

hexo new page links

打开生成的文件，修改：

---
title: 友情链接
date: 999999
type: "link"
---

再在Hexo安装文件夹的source下新建一个_date文件夹，在其中新建link.yml即可，可以参考我的link.yml：

class:
  class_name: MySelf
  link_list:
    1:
      name: 引导页
      link: https://www.oier.xin
      avatar: https://img.oier.xin/22/03/24/%E5%A4%B4%E5%83%8F%E4%B8%93%E7%94%A8%E5%9B%BE.png
      descr: 引导页
    2:
      name: Luogu blog
      link: https://loveoi.blog.luogu.org/
      ava