【前端】打造自己的hexo博客_hexo一本通

今日更新完毕，建议关注收藏点赞！

打造自己的hexo blog

#需要安装git node.js 这里略#安装hexo
npm install -g hexo-cli
npm install hexo
hexo help#<folder>必须是空的
hexo init <folder>
cd <folder>
npm install#文件结构如下
.
├── _config.yml #Site configuration file
├── package.json #Application data markdown默认安装
├── scaffolds #Scaffold folder.有各种脚手架
├── source #your site’s content 命名前有下划线的会被忽略 除了_posts
|   ├── _drafts #可渲染的文件如markdown html被放在public文件夹中
|   └── _posts
└── themes #主题

• _config.yml文件
  这里可以配置网站的名字、描述、语言、网址url，如果是中文则把en改为zh
  对应的文件放在对应的文件夹中
  
• 操作

hexo new [layout] <title> #layout为空表示默认布局 draft为草稿布局
#title不可空 
#默认情况将会创建一个标题名称的文件夹以及里面有index.md
#可以指定path
hexo new page --path about/me "About me" #source/about/me.md#用脚手架
hexo new photo "My Gallery" #使用脚手架layout名为photo，这个是在scaffords/photo.mdhexo generate #生成静态文件
hexo deploy #部署到网站
hexo server #开启本地服务器 默认是http://localhost:4000/hexo list <type> #列出所有路由hexo migrate <type>#从别的博客系统移植内容过来hexo publish [layout] <filename> #发表一份草稿 将草稿从_drafts->_posts文件夹
hexo --draft#显示source/_drafts中的草稿 默认不显示草稿#支持iframe image link 链接到其他本站帖子 也支持html渲染
#也支持EJS (Embedded JavaScript)渲染
{% iframe url [width] [height] %}
{% img [class names] /path/to/image [width] [height] '"title text" "alt text"' %}{% link text url [external] [title] %}{% post_path filename %}
{% post_link filename [title] [escape] %}

• Categories & Tags 分类与标签
  分类 和 标签 都是通过文章的 Front Matter（文章头部信息）来设置的。你可以在每篇文章的 Markdown 文件中定义这些信息。

---
title: "My Post"
date: 2025-02-08 10:00:00
categories: - Programming
tags: - JavaScript- Hexo
---
This is the content of my post.

在主题模版中显示分类和标签，你可以在文章页的模板文件（比如 themes/your-theme/layout/_partial/post.ejs）中添加以下内容来显示分类和标签：

<!-- 含EJS (Embedded JavaScript) 模板语言 -->
<p class="categories">Categories: <%= page.categories.join(', ') %></p>
<p class="tags">Tags: <%= page.tags.join(', ') %></p>

• 代码块 2种写法
  [url]部分会显示在代码块右上角

{% codeblock [title] [lang:language] [url] [link text] [additional options] %}
code snippet
{% endcodeblock %}
or
`` [language] [title] [url] [link text] code snippet ``{% codeblock _.compact http://underscorejs.org/#compact Underscore.js %}
_.compact([0, 1, false, 2, '', 3]);
=> [1, 2, 3]
{% endcodeblock %}

• 主题
• • 使用一个其他主题，步骤：
    进入hexo项目/themes下，git clone 相应的主题，更改项目根目录下的_config.yml中的theme设置为新的名称，更改themes对应主题下的_config.yml，更改后不需要server重启,之后执行命令安装依赖、生成站点、启动本地服务器

npm install
hexo generate
hexo server  #http://localhost:4000
hexo deploy #部署到github pages#安装部署插件hexo-deployer-git可以简化流程，自动化
npm install hexo-deployer-git --save
# Hexo 项目的根目录下，打开 _config.yml
deploy:type: gitrepo: https://github.com/your-username/your-username.github.io.git  # 你的 GitHub 仓库地址branch: main  # 或者 gh-pagesmessage: "Update site"  # 提交信息，可以自定义
#每次更新后generate->deploy即可#手工部署 新版的主题很多不支持这种方法【不推荐】
#使用 hexo generate（或 hexo g）命令生成静态文件，文件会放在 public/ 目录下。
# 把public/ 目录中的文件手动推送到 GitHub 仓库的main 分支。

现成的主题
现成的插件插件基本上都是js实现的，自己也可以试试，自己尝试指南
推荐>>这个github打卡墙插件

• 全站变量
• helpers
  辅助函数帮助您在模板中快速插入内容。 建议您把复杂的代码放在辅助函数而非模板中。辅助函数不能从 source 的文件中访问。自定义 helper 应该放在哪里？请放在 scripts/ 或 themes/< yourtheme>/scripts/ 目录中。

hexo.extend.helper.register(name, function () {// ...
});hexo.extend.helper.register("js", function (path) {return '<script src="' + path + '"></script>';
});#在我的自定义 helper 中使用另外一个已经注册的 helper
#所有的辅助函数都在同一个上下文中执行。 例如，在一个自定义的辅助函数中使用 url_for()
hexo.extend.helper.register("lorem", function (path) {return '<script src="' + this.url_for(path) + '"></script>';
});#在另一个扩展（例如过滤器、注入器）中使用注册的helper
#hexo.extend.helper.get 会返回一个指定名字的 helper，但是你还需要一个 bind(hexo)
const url_for = hexo.extend.helper.get("url_for").bind(hexo);

• 如果我每次的帖子都遵循一个格式->使用scaffolds
  Hexo 提供了 Scaffolds 功能，它允许你为创建新帖子定义一个模板。当你通过 hexo new post 命令创建新文章时，Hexo 会自动应用这个模板。
  设置 Scaffolds：在 Hexo 项目的根目录下，进入 scaffolds/ 文件夹。这里有默认的文件模板（post.md）。
  你可以修改或创建新的模板。
  修改或创建模板文件scaffolds/post.md，如

---
title: {{ title }}
date: {{ date }}
tags:- example-tag
categories:- example-category
draft: true
---## 介绍这里是你的内容。## 其他部分你可以继续在这里添加你文章的其他内容。

{{ title }}：这将是你为文章输入的标题。
{{ date }}：这是文章创建的时间，Hexo 会自动替换成当前日期和时间。
tags 和 categories：你可以预定义一些常用的标签和分类。
draft: true：这个参数让文章处于草稿状态，只有在你发布时它才会显示在博客上。
创建新帖子时，使用命令hexo new post "Post Title"，Hexo 会自动使用这个模板。

#自定义字段 比如如下
summary: {{ summary }}  # 自定义字段：文章摘要
#当你创建新文章时，summary 字段会作为自定义字段自动生成，提示你输入摘要内容
#在 Hexo 的模板文件（如 layout/index.ejs 或 layout/post.ejs）中，使用 EJS 模板语法来引用这些自定义字段。<!-- 显示自定义字段 summary --><p><strong>摘要：</strong> <%= page.summary %></p>

挂载到自己的github主页

创建一个项目，命名为username.github.io（ username是github账号名），上传hexo博客文件，项目->settings->GitHub Pages->选择除了none的branch（不是main就是master 旧版仓库的主分支），这样username.github.io就可以加载网页了。

同时挂载其他仓库代码，设置如下：
编辑_config.yml，将url: 值改成to https://username.github.io/repository仓库名
Settings > Pages > Source到这个仓库里改成 GitHub Actions
提交到主分支，完成部署，访问username.github.io/repository就是这个项目的代码实现

项目->settings->GitHub Pages->source->github actions选择
创建.github/workflows/pages.yml，并将下方代码放入内容，注意将nodejs版本20替换成你的node --version

name: Pageson:push:branches:- main # default branchjobs:build:runs-on: ubuntu-lateststeps:- uses: actions/checkout@v4with:token: ${{ secrets.GITHUB_TOKEN }}# If your repository depends on submodule, please see: https://github.com/actions/checkoutsubmodules: recursive- name: Use Node.js 20uses: actions/setup-node@v4with:# Examples: 20, 18.19, >=16.20.2, lts/Iron, lts/Hydrogen, *, latest, current, node# Ref: https://github.com/actions/setup-node#supported-version-syntaxnode-version: "20"- name: Cache NPM dependenciesuses: actions/cache@v4with:path: node_moduleskey: ${{ runner.OS }}-npm-cacherestore-keys: |${{ runner.OS }}-npm-cache- name: Install Dependenciesrun: npm install- name: Buildrun: npm run build- name: Upload Pages artifactuses: actions/upload-pages-artifact@v3with:path: ./publicdeploy:needs: buildpermissions:pages: writeid-token: writeenvironment:name: github-pagesurl: ${{ steps.deployment.outputs.page_url }}runs-on: ubuntu-lateststeps:- name: Deploy to GitHub Pagesid: deploymentuses: actions/deploy-pages@v4

git push -u origin main #或者是master 总之是主分支

/public/文件夹默认不会被上传，确保.gitignore文件中包括public/行，整个文件结构应该近似于这个repo

设计自己的theme

Hexo 是一个基于 Node.js 的静态博客框架，它允许你自定义主题以便让你的博客看起来独特。设计一个主题需要一些前端开发的基础知识，尤其是 HTML、CSS 和 JavaScript。

theme的文件结构
.
├── _config.yml
├── languages
├── layout
├── scripts
└── source

layout文件夹中放的是主题的模版文件，决定了网站的样式
Templates决定了你网站的每一页的样式，详细了解
Scripts文件夹中hexo自动加载这里所有js文件，这也是plugins的基础
source文件夹放置CSS and JavaScript 等文件，忽略前面带_的文件和文件夹。
Hexo将处理并保存所有可渲染文件到public/文件夹，不可渲染的将直接copy到public/。
最后记得拿theme unit test工具测试一下是否全部都可以正常工作，创作好后可以看一下贡献提交部分

• 创建一个主题文件夹，在 Hexo 的 themes 文件夹下创建一个新的主题文件夹
  设计主题的基本结构，主题文件夹的基本结构大致如下：

mytheme/
├── _config.yml  # 主题的配置文件
├── layout/      # 页面布局模板文件
├── source/      # 静态资源（如图片、字体、CSS、JS）
├── languages/   # 多语言支持
├── package.json # 主题的包管理文件
└── scaffolds/    # Hexo 页面的模板文件

_config.yml：你可以在这里配置主题的参数，比如站点的名称、颜色方案、社交媒体链接等。
layout/：包含页面布局模板（如首页、文章页、404 页面等）。
source/：包含你主题的静态资源（如 CSS、JavaScript、图片等）。
scaffolds/：包含 Hexo 自动生成页面时所用的模板。

• 编辑 _config.yml 文件
  打开 mytheme/_config.yml，你可以设置一些基础的主题参数。

# 主题名称
name: My Theme# 站点标题和描述
title: My Awesome Blog
subtitle: A blog built with Hexo# 配置社交媒体链接
github: https://github.com/yourprofile
twitter: https://twitter.com/yourprofile

• 设计页面布局（HTML + EJS）
  Hexo 使用 EJS（Embedded JavaScript）模板引擎来生成页面，因此你需要在 layout/ 目录下创建 EJS 文件。比如，layout/_partial/ 文件夹通常包含了头部、尾部、导航栏等公共部分。
  示例：layout/index.ejs（首页模板）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title><%= config.title %></title><link rel="stylesheet" href="<%= url_for('/css/style.css') %>">
</head>
<body><header><h1><%= config.title %></h1><nav><ul><li><a href="/">Home</a></li><li><a href="/about">About</a></li></ul></nav></header><main><%= body %></main><footer><p>© 2025 My Awesome Blog</p></footer>
</body>
</html>

<%= config.title %>：会渲染 _config.yml 中定义的站点标题。
<%= body %>：会渲染页面内容（文章、首页列表等）。

• 添加样式和交互功能
  在 source/css/ 中创建你的 CSS 文件（例如 style.css），然后在模板文件中引用它。

/* source/css/style.css */
body {font-family: Arial, sans-serif;line-height: 1.6;background-color: #f4f4f4;color: #333;
}header {background: #333;color: #fff;padding: 10px;
}footer {background: #333;color: #fff;text-align: center;padding: 10px;
}

在 layout 中链接 CSS：

<link rel="stylesheet" href="<%= url_for('/css/style.css') %>">

开发其它页面和功能：除了首页，你可能还需要为不同的页面（如单篇文章、归档、标签等）设计模板。你可以在 layout/ 中添加对应的 EJS 文件，例如：
layout/post.ejs：单篇文章页面模板。
layout/404.ejs：404 错误页面。

• 调试和预览主题
  完成主题设计后，你可以在 Hexo 根目录运行以下命令来启动本地服务器，预览你的博客：hexo server，打开http://localhost:4000
• 部署到线上
  一旦你设计好了主题并测试通过，可以将主题与内容一起发布到你的博客托管平台（例如 GitHub Pages、Netlify、Vercel 等）。
  你可以在 Hexo 配置文件 _config.yml 中设置 deploy 部分：

deploy:type: gitrepo: https://github.com/yourusername/yourblog.gitbranch: gh-pages

hexo deploy

• tips
  模块化设计：尽量将 CSS 和 JavaScript 模块化，这样可以方便后续修改和维护。
  响应式设计：确保你的主题在不同屏幕大小下都能良好显示，使用媒体查询（media queries）来处理不同设备的布局。
  优化性能：尽量压缩 CSS 和 JavaScript，减少图片体积，提升页面加载速度。
  调试工具：你可以使用 Chrome DevTools 或其他调试工具来调试你的主题和页面样式。