# GitHub 账号注册
进入 GITHUB 官网
点击登录
创建账户
填写表单信息
输入验证码
登录到 GITHUB
创建一个仓库,命名为 hexo-blog-code
# 安装 nodejs
NodeJs 是一款前端依赖 JS 框架
点击下载
安装到 D 盘 (可以新建一个文件夹叫 project_resource)【项目资源文件夹】,然后一直下一步即可
验证是否安装成功(打开命令提示符(cmd)——> 输入
npm -v
——> 返回版本即可)
# 安装 GIT
GIT:项目代码版本管理工具,点击下载
下载 64 bit Git for Windows Setup
安装到 D 盘 /soft,一路下一步即可
# 安装 hexo
在命令提示符(CMD)——> 设置 npm 镜像源
npm config set registry http://registry.npm.taobao.org/ |
安装 hexo
npm i hexo-cli |
检查是否安装成功
hexo -v |
# 下载主题
ShokaX 主题文档:https://docs.shokax.kaitaku.xyz/getting-started/
下载主题(project)
git clone https://github.com/theme-shoka-x/shokax-can --depth=1 |
进入目录
cd shokax-can |
安装依赖
npm i |
启动博客
hexo s |
无法下载完成的话,开启这个配置(下载完后关闭即可)
# 认识博客文件
目录 | 作用 |
---|---|
.git | git 代码管理文件夹(不用关注) |
lightning-minify | 代码高亮插件?(新更新) |
node_modules | 项目的依赖包 |
public | 存放编译后的文件 |
scaffolds | 生成文章标头的模板 |
shokaxTemp | 博客缓存文件夹(不用关注) |
source | 博客文档存放目录 |
themes | 空文件夹(不用关注) |
.gitignore | 排除上传文件的管理文件 |
_config.shokax.yml | ShokaX 主题配置文件 |
_config.yml | hexo 配置文件 |
db.json | 数据缓存文件(不用关注) |
LICENSE | 开源协议证书 |
package.json | 依赖版本管理 |
db.json、package-lock.json | 项目所需文件(不用关注) |
README.MD | 项目文档文件 |
# 博客配置
主要配置
_config.shokax.yml
和_config.yml
两个配置文件
# _config.yml 配置文件
_config.yml
配置文件,复制到_config.yml
,看注释根据个人喜好修改即可
# Hexo 配置文件 | |
# 用于配置站点的各种参数以及设置 Hexo 的运行方式 | |
# Hexo 配置 | |
## 文档: https://hexo.io/docs/configuration.html | |
## 源码: https://github.com/hexojs/hexo/ | |
# 站点配置 | |
# 这些参数定义了站点的基本信息,如标题、描述和作者 | |
# 站点 | |
title: # 网站标题 | |
subtitle: '' # 网站副标题 | |
description: '' # 网站描述 | |
keywords: # 网站关键词 | |
author: # 作者名称 | |
language: zh-CN # 网站语言 | |
timezone: 'Asia/Shanghai' # 时区设置 | |
# URL 配置 | |
# 这里设置了站点的 URL 和文章的永久链接格式 | |
# URL | |
## 在这里设置你的站点 url。例如,如果你使用 GitHub Pages, 设置 url 为 'https://username.github.io/project' | |
url: 'http://localhost:4000' | |
permalink: :title.html | |
permalink_defaults: | |
pretty_urls: | |
trailing_index: true # 设置为 false 以移除永久链接末尾的 'index.html' | |
trailing_html: true # 设置为 false 以移除永久链接末尾的 '.html' | |
# 目录配置 | |
# 这些参数定义了各种内容在站点文件结构中的位置 | |
# 目录 | |
source_dir: source # 资源文件夹,存放内容 | |
public_dir: public # 公共文件夹,存放生成的站点文件 | |
tag_dir: tags # 标签文件夹 | |
archive_dir: archives # 归档文件夹 | |
category_dir: categories # 分类文件夹 | |
code_dir: downloads/code # 代码文件夹 | |
i18n_dir: :lang # 国际化文件夹 | |
skip_render: # 跳过渲染的文件 | |
# 写作配置 | |
# 这些参数影响新文章的默认设置和内容处理方式 | |
# 写作 | |
new_post_name: :title.md # 新文章的文件名格式 | |
default_layout: post | |
titlecase: false # 是否将标题转换为标题格式 (首字母大写) | |
external_link: | |
enable: true # 是否在新标签页中打开外部链接 | |
field: site # 应用到整个站点 | |
exclude: '' # 排除特定链接 | |
filename_case: 0 # 文件名大小写,1 为小写,2 为大写,0 不变 | |
render_drafts: false # 是否渲染草稿 | |
post_asset_folder: false # 是否启用资源文件夹 | |
relative_link: false # 是否把链接改为与根目录的相对位址 | |
future: true # 是否显示未来的文章 | |
syntax_highlighter: false # 是否启用代码高亮 | |
highlight: # 代码高亮设置 | |
enable: false | |
line_number: false # 是否显示行号 | |
auto_detect: false # 是否自动检测语言 | |
tab_replace: '' # 替换 tab 的内容 | |
wrap: true # 是否自动换行 | |
hljs: false # 是否使用 highlight.js | |
prismjs: # prismjs 代码高亮设置 | |
enable: false | |
preprocess: false # 是否预处理 | |
line_number: true # 是否显示行号 | |
tab_replace: '' # 替换 tab 的内容 | |
# 首页配置 | |
# 这里设置了首页的显示方式,如每页的文章数量和排序顺序 | |
# 主页设置 | |
# path: 博客索引页的根路径 (默认为 '') | |
# per_page: 每页显示的文章数 (0 = 禁用分页) | |
# order_by: 文章排序方式 (默认按日期降序) | |
index_generator: | |
path: '' | |
per_page: 10 | |
order_by: -date | |
# 分类与标签配置 | |
# 这里设置了默认的分类和标签映射 | |
# 分类 & 标签 | |
default_category: uncategorized | |
category_map: | |
tag_map: | |
# 元数据配置 | |
# 这里设置了站点的元数据,如生成器信息 | |
# 元数据元素 | |
## https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta | |
meta_generator: true | |
# 日期 / 时间格式配置 | |
# 这里设置了日期和时间的显示格式 | |
# 日期 / 时间格式 | |
## Hexo 使用 Moment.js 解析和显示日期 | |
## 你可以按照以下链接中定义的格式自定义日期格式 | |
## http://momentjs.com/docs/#/displaying/format/ | |
date_format: YYYY-MM-DD | |
time_format: HH:mm:ss | |
## updated_option 支持 'mtime'、'date'、'empty' | |
updated_option: 'mtime' | |
# 分页配置 | |
# 这里设置了分页的参数,如每页的文章数量 | |
# 分页 | |
## 设置 per_page 为 0 以禁用分页 | |
per_page: 10 | |
pagination_dir: page | |
# 包含 / 排除文件配置 | |
# 这里设置了源目录中要包含或排除的文件 | |
# 包含 / 排除文件 | |
## include/exclude 选项仅适用于'source/' 文件夹 | |
include: | |
exclude: | |
ignore: | |
# 扩展配置 | |
# 这里设置了插件和主题等扩展的使用 | |
# 扩展 | |
## 插件: https://hexo.io/plugins/ | |
## 主题: https://hexo.io/themes/ | |
theme: shokax | |
# 部署配置 | |
# 这里设置了将站点部署到目标服务器的参数 | |
# 部署 | |
## 文档: https://hexo.io/docs/one-command-deployment | |
deploy: | |
type: 'git' | |
repo: '' | |
branch: main | |
# Markdown 配置 | |
# 这里设置了 Markdown 渲染器的参数 | |
markdown: | |
render: # 渲染器设置 | |
html: false # 过滤 HTML 标签 | |
xhtmlOut: true # 使用 '/' 来闭合单标签 (比如 < br/>) | |
breaks: true # 转换段落里的 '\n' 到 < br> | |
linkify: true # 将类似 URL 的文本自动转换为链接 | |
typographer: | |
quotes: "“”‘’" | |
plugins: # markdown-it 插件设置 | |
- plugin: | |
name: markdown-it-toc-and-anchor | |
enable: true | |
options: # 文章目录以及锚点应用的 class 名称,shoka 系主题必须设置成这样 | |
tocClassName: "toc" | |
anchorClassName: "anchor" | |
- plugin: | |
name: markdown-it-multimd-table | |
enable: true | |
options: | |
multiline: true | |
rowspan: true | |
headerless: true | |
- plugin: | |
name: ./markdown-it-furigana | |
enable: true | |
options: | |
fallbackParens: "()" | |
- plugin: | |
name: ./markdown-it-spoiler | |
enable: true | |
options: | |
title: "你知道得太多了" | |
autoprefixer: | |
exclude: | |
- "*.min.css" | |
# Feed 配置 | |
# 这里设置了 RSS 和其他 Feed 的相关参数 | |
feed: | |
limit: 20 | |
order_by: "-date" | |
tag_dir: false | |
category_dir: false | |
rss: | |
enable: true | |
template: "node_modules/hexo-theme-shokax/layout/_alternate/rss.ejs" | |
output: "rss.xml" | |
atom: | |
enable: true | |
template: "node_modules/hexo-theme-shokax/layout/_alternate/atom.ejs" | |
output: "atom.xml" | |
jsonFeed: | |
enable: true | |
template: "node_modules/hexo-theme-shokax/layout/_alternate/json.ejs" | |
output: "feed.json" | |
algolia: | |
appId: "" #你的应用 ID | |
apiKey: "" #你的 API 密钥 | |
adminApiKey: "" #你的管理 API 密钥 | |
chunkSize: 5000 | |
indexName: "" | |
fields: | |
- title #必须配置 | |
- path #必须配置 | |
- categories #推荐配置 | |
- content:strip:truncate,0,2000 | |
- gallery | |
- photos | |
- tags |
地址在这
# _config.shokax.yml 配置文件
_config.shokax.yml
配置文件,看注释根据个人喜好修改即可
alternate: # 站点大标题 | |
statics: "/" # 静态文件根目录 | |
assets: "assets" # 资产目录的路径 | |
css: "css" # CSS 文件的目录 | |
js: "js" # JS 文件的目录 | |
# PWA(渐进式网页应用)配置 | |
open_graph: | |
# 社交网络的 Open Graph 协议 | |
#twitter_id: | |
#google_plus: | |
#fb_admins: | |
#fb_app_id: | |
grayMode: false # 全站黑白滤镜 | |
# 请注意:本主题的 PWA 功能只是一个装载器,需要自备 js 和 manifest | |
# 图片可通过 https://lp-pwa.gitee.io/pwa-genicon/ 生成 | |
pwa: | |
enable: false # 开启 PWA 功能 | |
serviceworker: sw.js # serviceworker 脚本位置,使用以 / 为基准的绝对路径 | |
manifest: manifest.json # manifest 位置,使用以 / 为基准的绝对路径 | |
# 实验性特性 | |
experiments: | |
debug: false # 使用 debug 模式启动 | |
disableThemeComment: false # 禁用主题评论系统 | |
usingRelative: false # _image.yml 使用相对路径 | |
optimizeLongPosts: false # 优化长文章 | |
copyrightLength: infinity # 关闭复制时的作者声明 | |
mobileWidth: 820px # 移动版和桌面版导航栏最短切换长度 | |
coverConfig: | |
enableCover: true | |
enablePreload: true | |
enableNextGradientCover: true | |
homeConfig: | |
gradient: false # 使用 CSS 渐变作为文章封面 | |
# fixedCover 性能比默认的更好,且开启时将启用 LCP 优化和预加载 TODO | |
fixedCover: "" # 主页面 cover (为空则使用 bing 随机图片) | |
# ShokaX 模块化分包引入设置 | |
# 请关闭所有不使用的模块以优化主题 js 体积和性能 | |
modules: | |
player: true # 启用音乐播放器 | |
fireworks: true # 启用鼠标点击烟花特效 | |
unlazyHash: true # 启用 unlazy hash 预览图支持 | |
visibilityListener: true # 启用可见度监听器 | |
tabs: true # 启用选项卡扩展支持,如需开启 summary 功能请一并开启 | |
quiz: true # 启用文章内问题扩展支持 | |
fancybox: true # 启用 fancybox 支持(不建议禁用) | |
# 优化性能区 | |
performance: | |
# 使用 preconnect 预加载的网址 (不建议超过三个) | |
preConnect: | |
- "https://s4.zstatic.net" # 使用 preconnect 预加载的网址 (不建议超过三个) | |
- "https://at.alicdn.com" | |
# 使用 dns-prefetch 预解析的网址 | |
dnsPrefetch: | |
playerAPI: "https://api.injahow.cn" # 结尾不带 /, 只填写域名 | |
# 如果条件允许,请参考 https://github.com/injahow/meting-api 自建 API | |
# 使用 vercel 自行部署,请参考: https://github.com/xizeyoupan/Meting-API | |
icon: | |
favicon: "/favicon.ico" # 网站的 favicon 图标 | |
apple_touch_icon: "/apple-touch-icon.png" # Apple Touch Icon | |
# SEO 配置 | |
seo: | |
bing: | |
google: | |
yandex: | |
baidu: | |
# 访客统计配置 | |
visitor: | |
clarity: false # 是否启用 Clarity | |
baiduAnalytics: false # 是否启用百度统计 | |
googleAnalytics: false # 是否启用 Google Analytics | |
darkmode: true # 是否启用暗黑模式 | |
auto_dark: # 自动亮 / 暗模式 | |
enable: true # 是否开启 | |
start: 20 # 开始时间 | |
end: 7 # 结束时间 | |
auto_scroll: true # 是否启用自动滚动 | |
loader: | |
start: true # 进入页面时显示加载动画 | |
switch: false # 切换页面时显示加载动画 | |
# 使用 polyfill.io 自动处理浏览器兼容问题 | |
polyfill: | |
enable: false | |
features: | |
- default | |
- fetch | |
# 显示的动画 (烟花) | |
# 参阅 https://github.com/D-Sketon/mouse-firework | |
fireworks: | |
enable: true | |
options: | |
excludeElements: ["a"] | |
particles: | |
- shape: circle | |
move: ["emit"] | |
easing: easeOutExpo | |
colors: | |
- "rgba (255,182,185,.9)" | |
- "rgba (250,227,217,.9)" | |
- "rgba (187,222,214,.9)" | |
- "rgba (138,198,209,.9)" | |
number: 30 | |
duration: [1200, 1800] | |
shapeOptions: | |
radius: [16, 32] | |
- shape: circle | |
move: ["diffuse"] | |
easing: easeOutExpo | |
colors: ["#fff"] | |
number: 1 | |
duration: [1200, 1800] | |
shapeOptions: | |
radius: 20 | |
alpha: 0.5 | |
lineWidth: 6 | |
# 字体配置 | |
font: | |
enable: true # 是否启用字体 | |
# 从 google 字体库加载,如果自定义 @font-face 请关闭 | |
loadFromGoogle: true | |
# 字体选项: | |
# `external`: 从 google 字体库加载字体 | |
# `family`: 字体家族名,无需引号 | |
# `size`: x.x 以 `em` 为单位。默认: 1 (16px) | |
# 适用于所有在 body 标签内的文字 | |
global: | |
external: true | |
family: Mulish | |
size: | |
# 大标题字体 | |
logo: | |
external: true | |
family: Fredericka the Great | |
size: 3.5 | |
# 页面标题字体 | |
title: | |
external: true | |
family: Noto Serif JP | |
size: 2.5 | |
# 标题字体 | |
headings: | |
external: true | |
family: Noto Serif SC | |
size: | |
# 文章字体 | |
posts: | |
external: false | |
family: | |
# 代码块的字体 | |
codes: | |
external: true | |
family: Inconsolata | |
# //at.alicdn.com/t/c/font_4415496_59g1326wajd.css => 4415496_59g1326wajd | |
# 自定义 iconfont 图标参见文档教程 | |
iconfont: "4415496_59g1326wajd" # iconfont 图标 ID | |
# 菜单配置 | |
menu: | |
home: / || home # 主页 | |
# about: | |
# default: / || user | |
# aboutsite: /about/ || user | |
# admiration: /admiration/ || coffee | |
文章: # 父级菜单名称 | |
default: /categories/ || coffee # 父级菜单的默认链接和图标 | |
归档: /archives/ || archive # 子菜单项 | |
分类: /categories/ || th # 子菜单项 | |
# 生活: /life/ || heart | |
# about: /about/ || user | |
# 闺房: /password/ || eye | |
# 节点: /node/ || tags | |
# default: / || feather | |
# archives: /archives/ || list-alt | |
# categories: /categories/ || th | |
# tags: /tags/ || tags | |
# friends: /friends/ || heart | |
# https://twikoo.js.org | |
twikoo: | |
enable: false # 是否启用 twikoo | |
link: "https://cdn.staticfile.org/twikoo/1.6.30/twikoo.all.min.js" # twikoo 链接 | |
mode: vercel # vercel 或 tencent | |
envId: "https://example.com" # twikoo 环境 ID,vercel 填地址 | |
region: | |
# https://waline.js.org/ | |
waline: | |
enable: false # 是否启用 waline | |
serverURL: "" # waline 服务器 URL | |
lang: "zh-CN" # 语言 | |
locale: {} # https://waline.js.org/guide/features/i18n.html#% E8%87% AA% E5% AE%9A% E4% B9%89% E8% AF% AD% E8% A8%80 | |
emoji: # 表情包 | |
- https://unpkg.com/@waline/emojis@1.0.1/weibo | |
- https://unpkg.com/@waline/emojis@1.0.1/alus | |
- https://unpkg.com/@waline/emojis@1.0.1/bilibili | |
- https://unpkg.com/@waline/emojis@1.0.1/qq | |
- https://unpkg.com/@waline/emojis@1.0.1/tieba | |
- https://unpkg.com/@waline/emojis@1.0.1/tw-emoji | |
meta: # 可以填写的内容 | |
- nick | |
- link | |
requiredMeta: # 必须填写的内容 | |
- nick | |
wordLimit: 0 # 字数限制,0 为不限制 | |
pageSize: 10 # 每页评论条数 | |
pageview: false # 是否开启浏览量统计,可独立开启 | |
summary: | |
enable: false | |
introduce: "你好" # AI 自我介绍 | |
mode: openai # openai/custom | |
pricing: "trial" # trial 为试用模板 (3 RPM);pay 为即用即付模板 (60 RPM) | |
custom: | |
apikey: "" | |
# 社交链接 | |
# 用法: `键:链接 || 图标 || 颜色` | |
# 键是显示给用户的链接标签 | |
# || 分隔符前的值是目标链接 | |
# 第二个值是字体图标的名称 | |
social: | |
github: https://github.com/yourname || github || "#191717" # github 链接 | |
#gitee: https://gitee.com/yourname || gitee || "#e60026" | |
#google: https://plus.google.com/yourname || google | |
#twitter: https://twitter.com/yourname || twitter || "#00aff0" | |
#zhihu: https://www.zhihu.com/people/yourname || zhihu || "#1e88e5" | |
#music: https://music.163.com/#/user/home?id=yourid || cloud-music || "#e60026" | |
#weibo: https://weibo.com/yourname || weibo || "#ea716e" | |
#about: https://about.me/yourname || address-card || "#3b5998" | |
#email: mailto:foo@xxx.com || envelope || "#55acd5" | |
#facebook: https://www.facebook.com/yourname || facebook | |
#stackoverflow: https://stackoverflow.com/ || stack-overflow | |
#youtube: https://youtube.com/yourname || youtube | |
#instagram: https://instagram.com/yourname || instagram | |
#skype: skype:yourname?call|chat || skype | |
#douban: https://www.douban.com/people/yourname/ || douban | |
sidebar: | |
# 侧边栏位置 | |
position: right # 左侧 | |
# position: right # 右侧 | |
# 替换 <root>/source/_data/assets/ 下的默认头像图片并在此设置 URL | |
avatar: avatar.jpeg # 头像图片 | |
widgets: | |
# 是否显示随机文章 | |
random_posts: false # 随机文章 | |
# 是否显示最近评论 | |
recent_comments: false # 最近评论 | |
footer: | |
# 指定网站建立的年份。如果未定义,将使用当前年份 | |
since: 2024 | |
icon: | |
name: sakura rotate | |
# 使用十六进制代码更改图标颜色 | |
color: "#ffc0cb" | |
# 依赖: https://github.com/theme-next/hexo-symbols-count-time | |
count: true | |
powered: true | |
lantern: | |
enable: true # 是否开启 | |
word1: 中 # 第一个字 | |
word2: 秋 # 第二个字 | |
icp: # ICP 备案 | |
enable: false | |
# 请在登录后从 https://beian.mps.gov.cn/web/business/businessHome/website 下载对应图标 | |
icon: "" # 网安备案图片 | |
icpnumber: "xxx" # ICP 备案号 | |
beian: "xxx" # 网安备案号 | |
recordcode: "xxx" # 网安备案链接中的 recordcode 参数 | |
post: | |
count: true # 是否启用文章浏览量统计 | |
# 文章是否失效 | |
outime: | |
enable: true # 是否启用文章失效 | |
days: 90 # 超过 90 天文章失效 | |
reward: | |
# 如果为 true,默认每篇文章都会显示打赏 | |
enable: false | |
account: | |
wechatpay: /wechatpay.png | |
alipay: /alipay.png | |
# paypal: /paypal.png | |
# 标签页的标签云设置 | |
tagcloud: | |
# 以下所有值都是默认值,可以自行更改 | |
min: 16 # 最小字体大小 (px) | |
max: 22 # 最大字体大小 (px) | |
start: "#72cecf" # 开始颜色 (十六进制、rgba、hsla 或颜色关键字) | |
end: "#ffbac3" # 结束颜色 (十六进制、rgba、hsla 或颜色关键字) | |
amount: 200 # 标签数量,如果标签超过 200 个请修改此值 | |
# --------------------------------------------------------------- | |
# 第三方插件和服务设置 | |
# --------------------------------------------------------------- | |
# 知识共享 4.0 国际许可协议 | |
# 参见: https://creativecommons.org/share-your-work/licensing-types-examples | |
# 可用的许可证值: by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | zero | |
# 如果你想使用 CC 许可证的翻译版本,可以设置语言值,例如 deed.zh | |
# CC 许可证支持 39 种语言,你可以在 https://creativecommons.org 找到你需要的具体缩写 | |
creative_commons: | |
license: by-nc-sa | |
language: deed.zh | |
# 背景音乐 | |
# 不使用请打开 noplayer 功能 | |
audio: | |
# - title: 列表 1 | |
# list: | |
# - https://music.163.com/#/playlist?id=2943811283 | |
# - https://music.163.com/#/playlist?id=2297706586 | |
# - title: 列表 2 | |
# list: | |
# - https://music.163.com/#/playlist?id=2031842656 | |
# 随机图片 API | |
image_server: "https://t.alcy.cc/moez" | |
# Algolia 搜索 | |
# 更多信息: https://www.algolia.com | |
search: | |
hits: | |
per_page: 10 | |
# 依赖: https://github.com/amehime/hexo-renderer-multi-markdown-it | |
pangu: false # 是否启用断句 | |
# Quicklink 支持 | |
# 更多信息: https://github.com/GoogleChromeLabs/quicklink | |
quicklink: | |
# 自定义浏览器必须执行预取的时间 (毫秒) | |
timeout: 3000 | |
# 默认 (true) 将尝试使用 fetch () API (如果支持) 而不是 link [rel=prefetch] | |
priority: true | |
# 为了更大的灵活性,你可以添加一些模式 (正则表达式、函数或数组) 来忽略 | |
# 参见: https://github.com/GoogleChromeLabs/quicklink#custom-ignore-patterns | |
ignores: | |
#! --------------------------------------------------------------- | |
#! 除非你知道自己在做什么 | |
#! 否则不要编辑以下 `vendors` 设置 | |
#! --------------------------------------------------------------- | |
vendors: | |
cdns: | |
cdnjs: https://s4.zstatic.net/ajax/libs # cdnjs CDN 地址 | |
js: | |
pace: | |
source: cdnjs | |
url: pace/1.2.4/pace.min.js | |
sri: "sha384-k6YtvFUEIuEFBdrLKJ3YAUbBki333tj1CSUisai5Cswsg9wcLNaPzsTHDswp4Az8" | |
jquery: | |
source: cdnjs | |
url: jquery/3.5.1/jquery.min.js | |
sri: "sha384-ZvpUoO/+PpLXR1lu4jmpXWu80pZlYUAfxl5NsBMWOEPSjUn/6Z/hRTt8+pR6L4N2" | |
async_js: | |
fancybox: | |
source: cdnjs | |
url: fancybox/3.5.7/jquery.fancybox.min.js | |
sri: "sha384-Zm+UU4tdcfAm29vg+MTbfu//q5B/lInMbMCr4T8c9rQFyOv6PlfQYpB5wItcXWe7" | |
justifiedGallery: | |
source: cdnjs | |
url: justifiedGallery/3.8.1/js/jquery.justifiedGallery.min.js | |
sri: "sha384-TOxsBplaL96/QDWPIUg+ye3v89qSE3s22XNtJMmCeZEep3cVDmXy1zEfZvVv+y2m" | |
copy_tex: | |
source: cdnjs | |
url: KaTeX/0.16.9/contrib/copy-tex.min.js | |
sri: "sha384-ww/583aHhxWkz5DEVn6OKtNiIaLi2iBRNZXfJRiY1Ai7tnJ9UXpEsyvOITVpTl4A" | |
css: | |
katex: | |
source: cdnjs | |
url: KaTeX/0.16.9/katex.min.css | |
sri: "sha384-n8MVd4RsNIU0tAv4ct0nTaAbDJwPJzDEaqSD1odI+WdtXRGWt2kTvGFasHpSy3SV" | |
comment: | |
source: local | |
url: css/comment.css | |
sri: "" | |
fancybox: | |
source: cdnjs | |
url: fancybox/3.5.7/jquery.fancybox.min.css | |
sri: "sha384-Q8BgkilbsFGYNNiDqJm69hvDS7NCJWOodvfK/cwTyQD4VQA0qKzuPpvqNER1UC0F" | |
justifiedGallery: | |
source: cdnjs | |
url: justifiedGallery/3.8.1/css/justifiedGallery.min.css | |
sri: "sha384-V/1Ew9pYm8xpy/L9i078ZXT6HSEOrGC6KNFYLbXOdtqb3+c6brpGqVzZtEPSQOiz" | |
createTime: "2023/07/10 00:00:00" |
在
source
文件夹中新建一个assets
文件夹,找一张自己喜欢的图片,重命名为avatar.jpeg
当前版本的 shokaX 还存在 bug,需要添加几个文件进行修复
- 下载压缩包后解压到博客目录即可:博客补丁
# 博客模板语法
# 生成文章
在终端中输入
hexo new 文件名
,文章会生成在source
——>_post
中
# hexo 属性头
--- | |
title: 文章标题 | |
date: 文章发布的时间 | |
comment: false # true/false 对应开启 / 关闭本文章评论 | |
sticky : true # 置顶文章 | |
tags: | |
- 文章标签 1 | |
- 文章标签 2 | |
categories: | |
- [计算机科学,Linux] | |
cover: cover.png # 文章顶部和文章介绍图(将覆盖文章主页轮播图) | |
audio: | |
- https://music.163.com/song?id=1387098940 | |
--- |
属性 | 描述 | 是否必需 | 示例值 | 是否常用 |
---|---|---|---|---|
title | 文章标题 | 是 | 测试文件 | 是 |
date | 文章发布的时间 | 是 | 2025-04-07 00:17:45 | 是 |
comment | 是否开启评论 | 否 | true /false(开启需要额外配置) | 否 |
password | 设置密码 | 否 | 直接输入密码 | 按需 |
sticky | 文章是否置顶 | 否 | true / false | 按需 |
tags | 文章归类标签 | 否 | 玩具 | 按需 |
categories | 文章分类属性 | 否 | Windows | 是 |
cover | 设置文章图片 | 否 | img/1.jpg | 否 |
audio | 设置背景音乐 | 否 | https://music.163.com/song?id=1387098940 | 否 |
在
scaffolds
文件夹中有一个post.md
,这个文件是生成文章时会用到的模板文件
这是我的模版(可以抄作业)
title: 博客搭建 | |
date: 1748059977000 | |
categories: | |
- | |
sticky: | |
password: |
这是我的生成效果
# 具体在页面都呈现效果
这里只演示常用的参数效果
# 启动密码文章
启动密码页面需要安装一个插件
- 在
shokaX-Can
目录中执行CMD
命令
npm install --save hexo-blog-encrypt |
- 在文章头部设置
password
参数,值为你的密码
- 效果
# 部署到 GitHub page
部署到 Github page,需要安装一个插件
npm install hexo-deployer-git --save |
再打开
_config.yml
文件,配置部署地址
创建一个仓库,取名
账号名称.github.io
创建好后,找到 code,找到 Git 地址,填入配置文件,然后打开控制台 or 打开 CMD 命令行,输入命令
hexo d |
部署成功
到这一步,就可以通过域名访问到你的博客了
浏览器输入:
GitHub名称.github.io
出现这个错误,是因为配置文件中的域名和访问的域名不一致
所以需要修改
_config.yml
文件中的访问域名
重新
hexo d
部署后,即可通过域名访问,就不需要再启动本地服务即可访问博客这里可以暂时不设置,因为后续会通过自己的域名进行访问,如果想及时看到效果,也可以先设置一下
# 报错处理
出现这个错误是因为 GitHub 是国外的网站,国内部分时候不能直接访问,所以需要开启 tun 模式(虚拟网卡模式)这个功能以后会讲到,现在只需要知道出现这个错误,打开这个开关即可
成功通过域名访问到博客
但是,因为 github.io 普通的网络环境不能直接访问到博客,所以需要迁移到其他可以访问的托管平台
# 迁移到 CDN 托管平台
网络上有各种托管静态文件的平台,比如 Cloudflare,Vercel,帽子云,EdgeOne Pages,netlify
# 各平台的区别和限制
平台 | 流量 | 访问次数 |
---|---|---|
Cloudflare | 无限 | 无限 (针对静态资源请求)<br/>Workers: 10 万次请求 |
Vercel | 100 GB | 无限 |
帽子云 | 目前无限 | 目前无限 |
EdgeOne Pages | 10 GB | 100 万次请求数 / 月 |
netlify | 100 GB | 12.5 万次函数调用 / 月 |
# 注册帽子云
注册一个账号
正常注册即可
登录后选择创建静态项目
新建一个应用名称,然后将 Github 仓库授权给帽子云
选择 Github 仓库地址,选择当前分支,创建应用即可
迁移成功,现在可以直接通过域名访问
博客报错的问题这里就不过多赘述,修改配置文件即可
现在这个
XXX.maozi.io
域名也可以发给你的小伙伴去访问了,他们也能看到的哦~(不需要 VPN)
# 注册域名
Q:为什么要注册域名?
T:为了方便记忆,能直接访问到你的项目
域名系列后续还会单独开一期讲,知识点过多这里就不讲太详细,只简单进行注册
域名有免费域名,也有收费域名,为了简单切方便记忆的域名,有的域名会进行出售,像 GLM 大模型的域名就是 https://z.ai,ChatGPT 的域名就是 https://chatgpt.com
我的建议是,如果不是为了商业而选择.com 域名,可以随意一点,免费的域名也可以用,上述的
xxx.maozi.io
也是免费域名,但不方便记忆,就会选择带自我属性的域名,方便记忆
具体的免费域名可以参考:免费、低价付费域名汇总,这里拿低价的
.xyz
后缀进行后续教程(当然,免费毕竟是免费的,质量不能保证,还是付费稳定)
打开 spaceship 国外域名购买:https://www.spaceship.com
进入首页,先注册账号
填写注册信息
这个低价域名,只存在于
六位数字.xyz
,0.67 美元 / 年,换算成人民币就是 4.82 元 / 年
加入购物车,选择支付方式购买即可,支付方式可以选择支付宝
购买完成后,进入
域名管理器
选择该域名,设置
名称服务器和DNS
# 将域名托管到 Cloudflare 提供商
注册 cloudflare,注册方式可选择 qq 邮箱,也可使用 google 邮箱
注册好后登录,填入刚刚购买的域名
选择免费套餐
选择继续
将 DNS 记录复制到域名注册商,将域名托管到 Cloudflare
保存后,cloudflare 点击继续
回到 spaceship,点击高级 DNS
点击检查服务器
DNS 会自动进行传播,等待 DNS 状态为
在线
(大概需要 5-10 分钟),同时邮箱内会收到一条来自 Cloudflare 的域名已在管理的通知邮件,cloudflare 域名的状态显示为活动
,致此托管成功
# 设置自定义域
帮助文档:DNS 账户验证 - Cloudflare,按上述文档操作,得到 API 令牌,回到帽子云,选择
域名证书-DNS账户
—>创建DNS账户
跟上,好了吱一声
打开 cloudflare,点击域名后,选择 DNS 记录
根据文档设置 DNS 记录:自定义域名
新增一条记录,将域名的所有级 CNAME 到
cname.maozi-dns.com
,并且关闭代理状态
名称设置为
wenyu
,即wenyu.127126.xyz
进行CNAME
,自定义域名的时候就只能使用wenyu.126126.xyz
名称设置为 *,即所有
xxx.127126.xyz
都进行CNAME
名称设置为 @,即
127126.xyz
这个根域进行CNAME
回到帽子云,选择新增域名证书
直到状态为正常
为项目设置自定义域名,
应用管理——>选择一个项目——>环境——>域名设置——>添加——>选择刚刚申请的域名
,确认即可
# 结尾处理
中间还有一个小插曲没讲,
hexo-blog-code
这个仓库,是用来存源文件的,可以用pycharm
进行提交,也可以使用 GIT 命令行进行提交,这里我演示 IDEA 进行提交
打开项目文件夹,选择
版本控制
,选择创建Git仓库
选择博客文件夹,确定
点击提交,显示
未进行版本管理的文件
.gitgnore
文件,是用于排除提交的配置文件,之前讲过,配置如下不需要上传的文件(会自动生成的文件不需要上传)
.DS_Store | |
Thumbs.db | |
db.json | |
*.log | |
node_modules/ | |
public/ | |
.deploy*/ | |
_multiconfig.yml | |
shokaxTemp/ | |
package-lock.json | |
.idea | |
db.json | |
pnpm-lock.yaml |
排除后勾选需要上传的文件,填写提交日志(自己随便写,以后在公司可不能随便写,因为同事也能看到你的提交日志),选择提交并推送
名称默认,URL 即为仓库的 Git 链接
验证身份后,点击推送即可
扩展资料:shokaX 相关配置教程,如果想让博客变得更漂亮,可以学习更多语法~
至此,教程完结~撒花🎉