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-pagesmaster)。

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博客之旅吧!