基于Hexo及GitHub Pages搭建个人博客

基于Hexo及GitHub Pages搭建个人博客

Hexo

Hexo 是一个基于JavaScript，快速、简洁且高效的开源博客框架，具有以下特点：

• 超快速度
  Node.js 所带来的超快生成速度，让上百个页面在几秒内瞬间完成渲染。
• 支持 Markdown
  Hexo 支持 GitHub Flavored Markdown 的所有功能，甚至可以整合 Octopress 的大多数插件。
• 一键部署
  只需一条指令即可部署到 GitHub Pages, Heroku 或其他平台。
• 插件和可扩展性
  强大的 API 带来无限的可能，与数种模板引擎（EJS，Pug，Nunjucks）和工具（Babel，PostCSS，Less/Sass）轻易集成

Hexo vs Jekyll vs Hugo

Hexo是基于JavaScript开发的开源博客框架，GitHub Stars 35.3K(截止2022-08-25)。
Jekyll是基于ruby开发的开源博客框架，GitHub Stars 45.2K(截止2022-08-25)。
Hugo是基于Go开发的开源博客框架，GitHub Stars 61.4K(截止2022-08-25)。

我选择Hexo的原因：

• 我是web前端开发工程师，对自己熟悉的JavaScript有好感
• Hexo的开发者是中国台湾人，资源和文档对中文支持好
• 配置上手简单

初始化博客

安装前提：

• Node.js (Node.js 版本需不低于 10.13，建议使用 Node.js 12.0 及以上版本)
• Git

# 1. 安装 Hexo
npm install -g hexo-cli

# 2. 初始化项目
hexo init hexo-demo

# 3. 安装依赖
cd hexo-demo
npm i

# 4. 启动本地服务，访问http://localhost:4000/
npm run server

配置博客

打开hexo的配置文件_config.yml，具体配置可参考官方文档，下面是我的配置，给大家参考一下

参考配置

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

# Site
title: 小王子星球
subtitle: '道虽迩，不行不至，
事虽小，不为不成。'
description: '一只热爱生活的程序猿'
keywords: '全栈，前端，后台，JavaScript，java，css3，html5，Linux，数据库'
author: 小王子
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://chenqy9.github.io/
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
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: next

search:
  path: search.xml
  field: post
  content: false
  format: html

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repo: https://github.com/chenqy9/chenqy9.github.io.git
  branch: master

安装并配置NexT主题

Hexo的默认主题是landscape，其官方网站也提供了很多其他主题。我个人喜欢
NexT主题，下面展示一下主题的安装和配置。

# 1. 通过npm安装主题
cd hexo-demo # 进入你的博客项目根目录
npm install hexo-theme-next # 安装主题

# 2. 修改_config.yml的主题配置项为next
# theme: next

# 3. 通过npm更新主题
npm install hexo-theme-next@latest

主题的配置文件为根目录的_config.next.yml，可以从node_modules拷贝一份官方默认配置到博客根目录，具体操作如下：

# 复制默认配置到博客根目录
cp node_modules/hexo-theme-next/_config.yml _config.next.yml

具体的配置项可参考官方文档，下面是我的配置给大家参考一下：

参考配置

# ===============================================================
# It's recommended to use Alternate Theme Config to configure NexT
# Modifying this file may result in merge conflict
# See: https://theme-next.js.org/docs/getting-started/configuration
# ===============================================================

# ---------------------------------------------------------------
# Theme Core Configuration Settings
# See: https://theme-next.js.org/docs/theme-settings/
# ---------------------------------------------------------------

# Allow to cache content generation.
cache:
  enable: true

# Remove unnecessary files after hexo generate.
minify: false

# Define custom file paths.
# Create your custom files in site directory `source/_data` and uncomment needed files below.
custom_file_path:
  #head: source/_data/head.njk
  #header: source/_data/header.njk
  #sidebar: source/_data/sidebar.njk
  #postMeta: source/_data/post-meta.njk
  #postBodyEnd: source/_data/post-body-end.njk
  #footer: source/_data/footer.njk
  #bodyEnd: source/_data/body-end.njk
  #variable: source/_data/variables.styl
  #mixin: source/_data/mixins.styl
  #style: source/_data/styles.styl


# ---------------------------------------------------------------
# Scheme Settings
# ---------------------------------------------------------------

# Schemes
# scheme: Muse
# scheme: Mist
# scheme: Pisces
scheme: Gemini

# Dark Mode
darkmode: true


# ---------------------------------------------------------------
# Site Information Settings
# ---------------------------------------------------------------

favicon:
  small: /images/favicon-16x16.png
  medium: /images/favicon-32x32.png
  apple_touch_icon: /images/apple-touch-icon.png
  safari_pinned_tab: /images/safari-pinned-tab
  #android_manifest: /manifest.json

# Custom Logo (Warning: Do not support scheme Mist)
custom_logo: /uploads/logo.jpeg

# Creative Commons 4.0 International License.
# See: https://creativecommons.org/about/cclicenses/
creative_commons: