blog-engine-05-博客引擎 Hexo 入门介绍+安装笔记

简介: 这篇内容是关于博客引擎的系列文章摘要。作者对比了多个博客引擎,如 Jekyll、Hugo、Hexo、Pelican、Gatsby、VuePress、Nuxt.js 和 Middleman,并提供了实战教程,特别是详述了Jekyll的安装和SEO设置,以及Hexo的特性、优点(如简洁高效、丰富主题、插件系统和便捷部署)和Windows安装步骤。此外,还提及了添加本地搜索的配置方法。

拓展阅读

blog-engine-01-常见博客引擎 jekyll/hugo/Hexo/Pelican/Gatsby/VuePress/Nuxt.js/Middleman 对比

blog-engine-02-通过博客引擎 jekyll 构建 github pages 博客实战笔记

blog-engine-02-博客引擎jekyll-jekyll 博客引擎介绍

blog-engine-02-博客引擎jekyll-jekyll 如何在 windows 环境安装,官方文档

blog-engine-02-博客引擎jekyll-jekyll SEO

blog-engine-04-博客引擎 hugo intro 入门介绍+安装笔记

[blog-engine-05-博客引擎 Hexo 入门介绍+安装笔记]

blog-engine-06-pelican 静态网站生成 官方文档

blog-engine-06-pelican 静态网站生成 windows 安装实战

blog-engine-07-gatsby 建极速网站和应用程序 基于React的最佳框架,具备性能、可扩展性和安全性

blog-engine-08-vuepress 以 Markdown 为中心的静态网站生成器

blog-engine-09-nuxt 构建快速、SEO友好和可扩展的Web应用程序变得轻松

blog-engine-10-middleman 静态站点生成器,利用了现代 Web 开发中的所有快捷方式和工具

前言

由于个人一直喜欢使用 markdown 来写 个人博客,最近就整理了一下有哪些博客引擎。

感兴趣的小伙伴也可以选择自己合适的。

Hexo 是什么?

Hexo 是一个基于 Node.js 的静态博客生成器。

想象一下,如果你有一个魔法笔记本,你只需要写下你的想法,它就能自动帮你排版、美化,甚至还能发布到互联网上,这个魔法笔记本就是 Hexo。

Hexo 的特点

  1. 简洁高效
    Hexo 的配置简单,使用 Markdown 编写文章,让你可以专注于写作。
  2. 丰富的主题
    Hexo 社区提供了大量免费且美观的主题,你可以轻松地给你的博客换装。
  3. 插件系统
    Hexo 支持各种插件,可以扩展博客的功能,比如增加搜索、评论、分享等。
  4. 部署方便
    Hexo 可以部署到 GitHub Pages、Hexo Cloud 等多种平台上,操作简单。

Hexo 的优缺点

优点

  • 轻量级
    Hexo 生成的是静态网页,加载速度快,对服务器的要求低。
  • 社区活跃
    Hexo 有一个活跃的社区,你可以找到大量的教程和帮助。
  • 跨平台
    Hexo 支持 Windows、Mac、Linux 等多种操作系统。

Hexo 的不足

  • 静态网站
    由于 Hexo 生成的是静态网站,所以不支持动态网站的功能,如用户注册、登录等。
  • 需要一定的技术背景
    对于没有编程背景的用户来说,可能需要一些时间来学习和熟悉。

Windows 安装记录

准备工作

  • 安装 Node(必须)

官方 https://nodejs.org/en/ 下载安装即可。

node -v
v12.16.2
  • git 安装
git --version
git version 2.24.0.rc1.windows.1
  • github 申请

正式使用

  • 安装 hexo
npm install -g hexo-cli
  • 初始化文件夹
$ hexo init itbook52.github.io
$ cd itbook52.github.io

这个目标文件夹必须为空

生成的文件信息

$ ls
_config.yml  db.json  node_modules/  package.json  package-lock.json  scaffolds/  source/  themes/

修改配置

为了更方便的使用,我们修改一下 _config.yml 配置文件。

  • 原始内容
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: Hexo
subtitle: ''
description: ''
keywords:
author: John Doe
language: en
timezone: ''

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://yoursite.com
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  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: 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

# 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
## Use post's date for updated date unless set in front-matter
use_date_for_updated: false

# 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: landscape

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: ''
  • 修改后

主要修改以下三个部分的内容:

title: IT Books
subtitle: the it books
description: 收集常见的 it 书籍,供学习之用
author: ryo
language: zh-CN
timezone: Asia/Shanghai

url: https://itbook52.github.io

deploy:
  type: git
  repo: https://github.com/itbook52/itbook52.github.io.git
  branch: master

运行

  • 新建博客
hexo new "helloworld"
  • 启动
hexo server

通过 http://localhost:4000 可以访问。

生成与发布

  • 生成静态文件
$ hexo generate
  • 将本地文件与远程进行管理
git init
git add *
git commit -m "first commit"
git remote add origin https://github.com/itbook52/itbook52.github.io.git
git push -u origin master
  • 部署
$ hexo deploy

报错:

ERROR Deployer not found: git

执行

npm install --save hexo-deployer-git

重新执行即可。

主题

主题列表

主题

推荐主题

hexo-theme-next

hexo-theme-yilia

使用 next 主题

$ pwd
D:\_github\itbook52.github.io

在 blog 的 themes 目录下,下载 next 主题。

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

将主题直接下载到对应的 themes\next 目录下。

配置 _config.yml

配置主题为 next

theme: next

启动

  • 清空历史数据
hexo clean
  • 启动服务
hexo server

再次访问即可 http://localhost:4000/

添加本地搜索

安装

安装 hexo-generator-searchdb,在站点的根目录下执行以下命令:

npm install hexo-generator-searchdb --save

编辑配置

编辑站点配置文件,新增以下内容到任意位置:

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

编辑主题配置文件

启用本地搜索功能:

# Local search
local_search:
  enable: true

报错

INFO  Start processing
FATAL Something's wrong. Maybe you can find the solution here: https://hexo.io/docs/troubleshooting.html
Template render error: (unknown path)
  Error: expected end of comment, got end of file

原因

hexo 中 {# 属于吧保留字,会报错。

解决方案

{# 拆开写。

相关文章
|
7月前
|
搜索推荐 前端开发 Ruby
blog-engine-02-博客引擎jekyll-jekyll 博客引擎介绍
这组链接提供了多个静态博客引擎的对比和教程,包括Jekyll、Hugo、Hexo、Pelican、Gatsby、VuePress、Nuxt.js和Middleman。Jekyll是一个基于Ruby的静态网站生成器,适合专注于写作的用户,强调简单、快速和灵活性。安装Jekyll需先安装Ruby,然后通过gem命令安装Jekyll和相关插件。创建新网站、启动本地服务器预览、写文章和定制样式是使用Jekyll的基本步骤。
|
7月前
|
Go 开发工具 git
blog-engine-04-博客引擎 hugo intro 入门介绍+安装笔记
该文是关于博客引擎的系列文章,对比了jekyll、hugo、Hexo、Pelican、Gatsby、VuePress、Nuxt.js和Middleman。文章包括jekyll的安装和SEO,hugo和Hexo的入门,Pelican和Gatsby的介绍,VuePress和Nuxt.js的特性,以及Middleman的概述。Hugo是一个基于Go语言的快速、简单的静态网站生成器,特点包括速度快、易用、灵活和跨平台。文章还提供了Hugo在Windows上的安装步骤及创建、预览和发布网站的指南。
|
7月前
|
数据采集 JSON 搜索推荐
blog-engine-03-博客引擎 jekyll SEO
该文集对比了多个博客引擎,包括Jekyll、Hugo、Hexo、Pelican、Gatsby、VuePress、Nuxt.js和Middleman,提供了安装及SEO优化教程。SEO是Search Engine Optimization,能提升网站在搜索引擎的排名,增加曝光度和可信度。做好SEO涉及关键词研究、内容优化、速度提升、外部链接、结构清晰、移动适应和持续更新。难点在于竞争、需时间和规则变化。文章还分享了Google/Baidu收录检查方法及博客书写规范,强调标题和URL的标准格式。
|
7月前
|
存储 数据库 索引
neo4j命令,附官方文档链接
neo4j命令,附官方文档链接
|
数据采集 数据挖掘 Shell
[Hexo]部署博客及更新博文
找到其中的 deploy 标签,改成下图所示形式,并保存。注意:冒号后面要加上一个空格,否则会报错。
|
搜索推荐 JavaScript 前端开发
超详细Hexo+Github博客搭建小白教程(一)
超详细Hexo+Github博客搭建小白教程
413 0
超详细Hexo+Github博客搭建小白教程(一)
|
搜索推荐 JavaScript BI
超详细Hexo+Github博客搭建小白教程(二)
超详细Hexo+Github博客搭建小白教程
208 0
超详细Hexo+Github博客搭建小白教程(二)
|
数据采集 存储 缓存
超详细Hexo+Github博客搭建小白教程(三)
超详细Hexo+Github博客搭建小白教程
141 0
超详细Hexo+Github博客搭建小白教程(三)
|
前端开发 JavaScript 搜索推荐
超详细Hexo+Github博客搭建小白教程(一)
首先要了解一下我们搭建博客要用到的框架。Hexo是高效的静态站点生成框架,它基于Node.js。通过Hexo,你可以直接使用Markdown语法来撰写博客。相信很多小伙伴写工程都写过README.md文件吧,对,就是这个格式的!写完后只需两三条命令即可将生成的网页上传到你的github上,然后别人就可以看到你的网页啦。是不是很简单?你无需关心网页源代码的具体细节,你只需要用心写好你的博客内容就行。
915 0
超详细Hexo+Github博客搭建小白教程(一)
|
JavaScript Ubuntu Linux
【效率为王】超详细 Hexo + Github Pages 博客搭建教程
【效率为王】超详细 Hexo + Github Pages 博客搭建教程
536 0
【效率为王】超详细 Hexo + Github Pages 博客搭建教程
下一篇
DataWorks