文章摘要： 使用Hexo框架并部署到Github平台的个人博客项目。

  • 针对 Debian Linux 系统的环境。

注释

  • 博客中使用的图片使用vscode编辑器中的Excalidraw插件绘制，能够实现一个文件随时修改图像和展示结果，实现无需导出图片操作。
  • 该博客是静态博客，因此没有后台管理系统或登录功能，没有涉及数据库操作等内容。

项目简介

  • 使用Hexo框架并部署到Github平台的个人博客项目。

项目部署流程

安装项目所需软件

  • 若你的计算机中已经安装，则自行跳过该步骤。
# 安装Git
sudo apt install git

# 安装Node.js
sudo apt install nodejs

# 安装npm包管理工具
sudo apt install npm

# 通过Node.js的npm包管理工具安装Hexo框架
sudo npm install -g hexo-cli

初始化项目的本地文件

# 手动选择或创建存放项目的目录
mkdir "项目目录名称"

# 切换到项目的目录下
cd "项目目录"

# 初始化项目
# 将会在当前目录中创建一个新的目录结构
# 包含项目所需的文件和文件夹
hexo init

# 安装依赖项
# 将会在当前目录中继续下载一些文件
npm install

安装Arknights主题

# 切换到项目的目录下
cd <路径>/<项目目录名称>/themes

# 通过Git下载Hexo博客框架的Arknights主题文件
git clone https://github.com/Yue-plus/hexo-theme-arknights.git themes/arknights

# 安装Arknights主题所需的依赖项
npm install hexo-server hexo-browsersync hexo-renderer-pug --save

# 通过hexo命令来上传文章到github平台的插件
npm install hexo-deployer-git --save

修改Hexo框架的配置文件

修改Hexo配置文件

  • 修改Hexo博客框架中的“_config.yml”文件。
  • 修改内容如下：
# Hexo博客框架配置文件

#### 网站 ####
# 网站标题
title: 魔术桌的个博客
# 网站副标题
subtitle: ""
# 网站描述
description: 「因为所以科学道理，原来如此皆有前提」
# 网站的关键词，支持多个关键词
keywords: 机器人、人工智能、机器学习、深度学习、操作系统、编程语言
# 我的名字
author: 魔术桌
# 网站使用的语言
language: zh-cn
# 网站时区
timezone: Asia/Shanghai


#### 网址 ####
# 设置我的网址url
# 网址, 必须以 http:// 或 https:// 开头
# 例如，如果您使用GitHub页面，请将url设置为'https://username.github.io/project'
url: https://magictable.github.io
# 网站根目录
root: 
# 文章的 永久链接 格式
permalink: title/:title/
# 永久链接中各部分的默认值
permalink_defaults: 
# 改写 permalink 的值来美化 URL
pretty_urls: 
  trailing_index: true # 是否在永久链接中保留尾部的 index.html，设置为 false 时去除
  trailing_html: true  # 是否在永久链接中保留尾部的 .html, 设置为 false 时去除 (对尾部的 index.html无效)

#### 目录 ####
# 资源文件夹
source_dir: source
# 公共文件夹
public_dir: public
# 标签文件夹
tag_dir: tags
# 归档文件夹
archive_dir: archives
# 分类文件夹
category_dir: categories
# 代码文件夹，位于资源文件夹下的子目录
code_dir: downloads/code
# 国际化（i18n）文件夹
i18n_dir: :lang
# 跳过指定文件的渲染。匹配到的文件将会被不做改动地复制到 public 目录中。您可使用 glob 表达式来匹配路径。
skip_render:


#### 文章 ####
# 新文章的文件名称
new_post_name: :title.md
# 预设布局
default_layout: post
# 把标题转换为标题框
titlecase: false
# 在新标签中打开链接
external_link: 
  enable: true # 在新标签中打开链接
  field: site  # 对整个网站（site）生效或仅对文章（post）生效
  exclude: []  # 需要排除的域名，主域名和子域名如 www 需分别配置
# 把文件名称转换为 (1) 小写或 (2) 大写，默认0不变
filename_case: 0
# 显示草稿
render_drafts: true
# 启用 资源文件夹
post_asset_folder: false
# 把链接改为与根目录的相对位址
relative_link: false
# 显示未来的文章
future: true
# 代码块的设置
syntax_highlighter: highlight.js
highlight:
  auto_detect: false
  line_number: true
  line_threshold: 0
  tab_replace: ""
  exclude_languages:
    - example
  wrap: true
  hljs: false
prismjs:
  preprocess: true
  line_number: true
  line_threshold: 0
  tab_replace: ""


#### 首页设置 ####
index_generator:
  path: ""               # 博客索引页的根路径。(默认值为'')
  per_page: 20           # 每页显示的帖子。 (0 = 禁用分页)
  order_by: -date        # 文章顺序。(默认情况下按日期降序排列)
  pagination_dir: page   # URL格式


#### 分类和标签 ####
# 默认分类
default_category: uncategorized
# 分类别名
category_map: 
# 标签别名
tag_map: 


#### 日期 / 时间格式 ####
# 日期格式
date_format: YYYY-MM-DD
# 时间格式
time_format: HH:mm:ss
# 当 Front Matter 中没有指定 updated 时 updated 的取值，'mtime'时间, 'date'日期, 'empty'空
updated_option: mtime


#### 包括或不包括目录和文件 ####
# 包含隐藏文件（包括名称以下划线开头的文件/文件夹，* 除外）
include: 
# 排除文件或文件夹
exclude: 
# 忽略文件/文件夹
ignore: 


#### 主题 ####
## Plugins（插件）: https://hexo.io/plugins/
## Themes（主题）: https://hexo.io/themes/
# 当前主题名称。 值为false时禁用主题
theme: arknights-1.19.0
# 主题的配置文件。 在这里放置的配置会覆盖主题目录下的 _config.yml 中的配置
theme_config: ./themes/arknights-1.19.0/_config.yml
# Meta generator 标签。 值为 false 时 Hexo 不会在头部插入该标签
meta_generator: 


#### 部署 ####
deploy:
  type: git
  repo: https://github.com/MagicTable/magictable.github.io.git
  branch: main       # 分支名称
  message: 更新文章   # 自定义提交信息

修改Arknights主题的配置文件

  • 目录在：./themes/<主题>/_config.yml
  • 修改文件为如下内容，部分配置信息自行修改。
# 标签页图标
favicon:
  type: "image/x-icon"
  href: "/favicon.ico"

# canvas 动态背景
canvas_dust: true

# 默认颜色模式 dark / dark-only / light / light-only / auto
# dark 暗色模式
# light 亮色模式
# light-only 锁定颜色模式
# auto 跟随系统
color: auto

# <body> 背景图片链接
background_image:
  dark: /img/dark_backdrop.jpg # 暗色模式
  light: /img/light_backdrip.jpg # 亮色模式

# 导航栏
menu:
  文章动态: ""
  文章归档: "/archives/"
  数据资产: "/data_asset/"
  网站导航 : "/web_navigation/"
  # 智能体: "/chat_agent/"
  # 留言板: "/guestbook/"
  关于: "/about/"

# 侧边栏
aside:
  in_left: false # 侧边栏在左 true / false
  logo: /img/avatar_MagicTable.png #图片链接，建议 1:1 比例
  dr: / # 侧边栏 Dr. 链接
  icp: # ICP 备案号，与版权声明相同，但会链接到 https://beian.miit.gov.cn/
  copyright: # 版权声明、备案号等，可自定义键值，不想显示则留空
    # 萌:
    #   萌ICP备XXXXXXXX号: https://icp.gov.moe/?keyword=XXXXXXXX
    # copyright:
    #   CC BY-NC-SA 4.0: https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh

# 社交链接
# 格式：链接 || 图标
# 所有可用图标参考：https://fontawesome.com/icons
social:
  # GitHub: https://github.com/yourname || fab fa-github
  # E-Mail: mailto:yourname@gmail.com || fa fa-envelope
  # BiliBili: https://space.bilibili.com/0000000 || fa-brands fa-bilibili
  # Weibo: https://weibo.com/yourname || fab fa-weibo
  # Zhihu: https://www.zhihu.com/people/yourname || fab fa-zhihu

# post 文章页面配置；true / false
post:
  date: true    # 是否显示发布日期
  updated: true # 是否显示修改日期
  excerpt: true # 是否在文章中显示摘要内容（<!-- more--> 以上的内容）
  count: true   # 是否显示字数统计
  time: true    # 是否显示预计阅读时长
  # 文章末显示打赏二维码
  reward:
    # 支付宝 | Alipay: img/Alipay.png
    # 微信 | Wechat: img/WeChat.png
  # 以下两项依赖 hexo-wordcount，请参阅 README 开启


# 文章内目录
toc:
  list_number: true # true / false ；是否显示编号
  max_depth: 6      # 最大目录深度
  min_depth: 1      # 最小目录深度

# 归档页
archives:
  categories_count: true # 是否显示分类总数
  tags_count: true # 是否显示标签总数

# 搜索
search:
  enable: true
  content: true # 若为 false，仅可搜索标题及 metadata
  preload: false # 自动加载搜索数据
  # 设为 post 时，仅可搜索 post 页面
  # 设为 page 时，仅可搜索非 post 页面
  # 设为 all 时，可搜索全部页面
  field: post
  # 设为 html 时，依据 html 文件生成
  # 设为 striptags 时，滤除 html tag
  # 设为 raw 时，依据 markdown 源文件生成
  format: striptags

# 不蒜子
# 详见 http://busuanzi.ibruce.info/
busuanzi:
  enable: false
  sitePV: true # 站点总访问量
  siteUV: true # 站点访客数
  pagePV: true # 页面访问量

# Valine，评论插件
# 详见 https://valine.js.org
valine:
  enable: false
  app_id:      # APP ID
  app_key:     # APP KEY
  server_url:  # APP DOMAIN（LeanCloud 国际版）

# gitalk，评论插件
# 详见 https://github.com/gitalk/gitalk
gitalk:
  enable: false
  client_id:      # GitHub 应用 Client ID
  client_secret:  # GitHub 应用 Client Secret
  repo:           # 用于存放评论数据的 GitHub 仓库
  owner:          # 该 GitHub 仓库所有者
  admin:          # 具有写该 GitHub 仓库权限的用户，例如: [adminA,adminB]
  id: location.pathname # (可选) 页面的唯一标识

# Waline，评论插件
# 详情: https://waline.js.org/
waline:
  enable: false
  server_url: #Server_Url

#Artalk
#详见：https://artalk.js.org/
artalk:
  enable: false
  server: https://artalk.server.instance/ # 你的 Artalk 服务地址
  site_name: My Blog                      # 站点名称，用于区分多个站点（可选）

# 图表支持
mermaid:
  enable: true
  version: "10.5.0"

# pjax 支持
pjax:
  enable: true

# 公式前端渲染
mathjax:
  enable: false
  version: "2.6.1"

# 在 `<head>` 标签内引入 CSS 样式表
stylesheets:

# 在 `<body>` 尾部引入 JavaScript 脚本
scripts:

生成静态文件

# 请在项目目录下执行
# 会在项目目录下生成一个最终渲染后的网页目录。
hexo g

启动本地服务进行测试

# 请在项目目录下执行
# 在本机中启动一个web服务，可通过给出的链接在浏览器中查看结果
hexo s

到华为云购买域名

  • 购买域名
  • 解析域名

配置Git工具对接Github平台

  • 提示：若没有Github平台的账户，请提前到官方网站注册。

在Github平台中创建博客项目

设置SSH免密码登入

# 在本地生成SSH公钥
ssh-keygen -t ed25519 -C "Github的用户邮箱"
# 后面会提示存储路径，保持默认，回车继续
# 提示输入私钥密码，保持无，回车继续
# 提示再次输入私钥密码，保持无，回车继续
# 在`/home/用户名/.ssh/`下会生成`id_ed25519`私钥、`id_ed25519.pub`公钥

读取公钥文件

cat /home/用户名/.ssh/id_ed25519.pub
# 复制输出的公钥内容

设置Github平台账户的SSH公钥

  • 用户可以通过主页右上角 「个人设置」->「安全设置」->「SSH 公钥」->「添加公钥」，添加生成的 public key 添加到当前账户中。

设置 Gitee的邮箱和用户名

# 配置用户名和邮箱，若用户名存在空格则需要使用双引号包裹起来。
git config user.name "【用户名】"
git config user.email "【电子邮件】"

# 保存用户名和密码
git config credential.helper store

上传文章到Github平台

  • 提示：首次部署连接会要求输入Github的用户名和密码，且linux命令行端没有图像界面，请仔细输入。
  • 若生成静态文件后又修改了文章或配置
  • 请先执行hexo clear清空缓存，再从新hexo g生成新的静态文件，最后再上传Gitee平台。
# 上传文章
hexo d

Github平台端项目仓库配置

项目仓库必要设置

  • 到Gitee平台中创建的博客项目中，进入「管理」->「基本信息」
  • 仓库名称：随意无限制
  • 路径：需要与用户名一致且全部小写，这样网站地址不会产生二级域名。
  • 语言：JavaScript
  • 是否开源：开源

开启Github Pages服务

管理小技巧

  • 文件名需要规划好，不重名，清晰好记。
  • 文章需要经常更新且优化同步等。

项目目录结构讲解

node_modules目录

  • 该目录是nodejs底层所需要的依赖库。

public目录

  • 该目录是hexo框架执行hexo generate命令生成的编译渲染后最终的页面文件。

.deploy_git目录

  • 该目录是hexo框架执行hexo deploy命令时生成的部署项目到github上的项目，上传时会将该目录提交到github，且该目录是有版本控制的，因此需要进行版本控制。
更新时间: