雨无形的技术分享

AI改变世界

0%

使用Hexo搭建博客

发表于 更新于 分类于

前言

时空跃迁，一晃数载未谙博客之道。近期，AI浪潮犹如猛兽横行，诸多AI写作工具横空出世，如Notion AI、ChatGPT、New Bing诸神之居，令我技术宅心生欲望，欲再战博客江湖。在对比了市面上各种热门利器后，觉得Wordpress犹如巨龙繁重，故决意挥舞Hexo这把轻盈之剑，书写我的技术心得与见闻。仅以此篇为开端与诸君同仁分享这段全新的征途。

以上为ChatGPT4为我写的开头，下面内容为ChatGPT4生成，我仅做修改与整理

一、Hexo简介

Hexo是一个基于Node.js的快速、简洁且高效的博客框架，让你可以专注于写作，而无需关心底层技术。通过Hexo，你可以轻松将Markdown文件转换为静态网页，并部署到GitHub Pages等免费托管服务上。

二、安装Hexo

在安装Hexo之前，确保你的计算机上已经安装了Node.js和Git。

  1. 首先打开命令行工具，输入以下命令来安装Hexo：
1
npm install -g hexo-cli
  1. 接着创建一个新的Hexo项目：
1
2
hexo init my-blog
cd my-blog
  1. 初始化完成后，输入以下命令安装项目所需的依赖：
1
npm install
  1. 最后，使用以下命令启动本地服务器预览效果：
1
2
hexo server
# hexo s 也可以实现同样效果

现在，打开浏览器访问http://localhost:4000，你就能看到Hexo默认的博客站点。

三、配置Hexo

_config.yml是Hexo的全局配置文件，包含了许多用于自定义博客的设置。以下是一些常见配置项及其说明：

基本信息

  1. title：博客的标题
  2. subtitle：博客的副标题
  3. description：博客的描述信息
  4. author：博主的名字
  5. language：博客的显示语言，例如en表示英文，zh-CN表示简体中文
  6. timezone：博客的时区，例如Asia/Shanghai表示中国上海时区

站点设置

  1. url：博客的部署地址，例如https://example.com
  2. root：博客的根路径，例如/blog/（默认为/）
  3. permalink：博客文章的永久链接格式，例如:year/:month/:day/:title/，具体可参考**官方文档**
  4. permalink_defaults：用于设置永久链接中变量的默认值

目录设置

  1. source_dir：源文件目录（默认为source）
  2. public_dir：生成的静态文件目录（默认为public）
  3. tag_dir：标签页生成的目录（默认为tags）
  4. archive_dir：归档页生成的目录（默认为archives）
  5. category_dir：分类页生成的目录（默认为categories）

写作设置

  1. new_post_name：新文章文件的命名格式，例如:title.md（默认为:year-:month-:day-:title.md）
  2. default_layout：新文章的默认布局（默认为post）
  3. auto_spacing：是否自动在英文与中文之间插入空格（默认为false）
  4. titlecase：是否将标题转换为Title Case格式（默认为false）
  5. external_link：是否在新标签页打开外部链接（默认为true）

分页设置

  1. per_page：每页显示的文章数（默认为10；设置为0表示禁用分页）
  2. pagination_dir：分页的目录（默认为page）

扩展设置

  1. theme：当前使用的主题名称
  2. deploy：部署设置，包括部署类型、仓库地址、分支名称等
  3. plugins：插件列表

以上只是 _config.yml 中一些常见配置项的简要说明。更多关于Hexo配置的详细信息，请参考**官方文档**。

四 、安装与配置Next主题

Next主题是一款为Hexo设计的简洁优雅的主题，下面我们将介绍如何安装和配置Next主题。

  1. 在my-blog目录下，输入以下命令克隆Next主题：
1
git clone https://github.com/theme-next/hexo-theme-next themes/next
  1. 修改_config.yml文件中的theme字段为next：
1
theme: next
  1. 接下来，我们可以根据个人喜好对Next主题进行定制。打开themes/next/_config.yml文件，你可以在这里修改博客标题、头像、菜单等设置。

例如，设置博客标题：

1
title: My Awesome Blog

五、常用插件的安装与配置

接下来，我们将介绍几个常用的Hexo插件，以丰富你的博客功能。

1. hexo-deployer-git

这个插件可以让你轻松地将博客部署到GitHub Pages、GitLab Pages等平台。

安装方法：

1
npm install hexo-deployer-git --save

配置方法：在_config.yml文件中添加以下内容：

1
2
3
4
deploy:
  type:git
  repo: <your_repository_url>
  branch: <your_branch_name>

将<your_repository_url>替换为你的GitHub或GitLab仓库地址，<your_branch_name>替换为你想要推送的分支名称（通常为gh-pages或master）。

2. hexo-generator-sitemap

这个插件用于生成博客的站点地图（sitemap），有助于提高搜索引擎对你的博客的收录。

安装方法：

1
npm install hexo-generator-sitemap --save

配置方法：在_config.yml文件中添加以下内容：

1
2
sitemap:
  path: sitemap.xml

3. hexo-generator-feed

这个插件用于生成博客的RSS订阅源，方便读者通过RSS阅读器订阅你的博客更新。

安装方法：

1
npm install hexo-generator-feed --save

配置方法：在_config.yml文件中添加以下内容：

1
2
3
4
feed:
  type: atom
  path: atom.xml
  limit: 20

六、写作与发布

使用Hexo写博客非常简单，只需要在source/_posts目录下创建一个Markdown文件，例如hello-world.md，然后开始书写内容。

当你完成文章后，使用以下命令生成静态文件：

1
2
hexo generate
#hexo g 也可以实现同样效果

接着，使用以下命令部署博客到你之前配置的GitHub或GitLab仓库：

1
2
hexo deploy
#hexo d 也可以实现同样效果

至此，你已经成功搭建并发布了一个使用Hexo和Next主题的个人博客站点！接下来，你可以继续探索Hexo的更多功能，如自定义主题、添加插件等，让你的博客更具个性。

总结一下，使用Hexo搭建个人博客站点既简单又高效，通过Next主题和一些常用插件，你可以快速构建一个漂亮、实用的博客。现在，开始你的Hexo博客之旅吧！