# GitHub 账号注册

进入 GITHUB 官网

image-20250404000841011

点击登录

image-20250404000928734

创建账户

image-20250404001005543

填写表单信息

image-20250404001111545

输入验证码

image-20250404002320191

登录到 GITHUB

image-20250404002454651

创建一个仓库,命名为 hexo-blog-code

image-20250404002603332

image-20250404002730398

# 安装 nodejs

NodeJs 是一款前端依赖 JS 框架

image-20250404002909361

点击下载

image-20250404002935320

安装到 D 盘 (可以新建一个文件夹叫 project_resource)【项目资源文件夹】,然后一直下一步即可

image-20250404003156520

验证是否安装成功(打开命令提示符(cmd)——> 输入 npm -v ——> 返回版本即可)

image-20250404003428053

# 安装 GIT

GIT:项目代码版本管理工具,点击下载

image-20250404004027829

下载 64 bit Git for Windows Setup

image-20250404004150723

安装到 D 盘 /soft,一路下一步即可

image-20250404004302496

# 安装 hexo

在命令提示符(CMD)——> 设置 npm 镜像源

npm config set registry http://registry.npm.taobao.org/

安装 hexo

npm i hexo-cli

检查是否安装成功

hexo -v

image-20250404005030144

# 下载主题

ShokaX 主题文档:https://docs.shokax.kaitaku.xyz/getting-started/

下载主题(project)

git clone https://github.com/theme-shoka-x/shokax-can --depth=1

image-20250404234752866

进入目录

cd shokax-can

安装依赖

npm i

image-20250404235819763

启动博客

hexo s

image-20250405001530449

无法下载完成的话,开启这个配置(下载完后关闭即可)

image-20250405003017935

# 认识博客文件

目录 作用
.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 项目文档文件

image-20250405003828067

# 博客配置

主要配置 _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

image-20250405004610100

image-20250405004721389

image-20250405004820500

地址在这

image-20250405005004460

image-20250405004847301

文档中有:https://docs.shokax.kaitaku.xyz/features/search/

# _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
    - mail
    - link
  requiredMeta: # 必须填写的内容
    - nick
    - mail
  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"

image-20250405005521896

image-20250405005934938

source 文件夹中新建一个 assets 文件夹,找一张自己喜欢的图片,重命名为 avatar.jpeg

image-20250405005627679

image-20250405005701864

image-20250405005817284

当前版本的 shokaX 还存在 bug,需要添加几个文件进行修复

  • 下载压缩包后解压到博客目录即可:博客补丁

image-20250407000643351

# 博客模板语法

# 生成文章

在终端中输入 hexo new 文件名 ,文章会生成在 source ——> _post

image-20250407001356455

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

这是我的生成效果

image-20250413013114242

# 具体在页面都呈现效果

这里只演示常用的参数效果

image-20250413005235564

image-20250413005424884

image-20250413005528648

image-20250413013148652

# 启动密码文章

启动密码页面需要安装一个插件

  • shokaX-Can 目录中执行 CMD 命令
npm install --save hexo-blog-encrypt

image-20250413005959916

  • 在文章头部设置 password 参数,值为你的密码

image-20250413013018250

  • 效果

image-20250413013006136

# 部署到 GitHub page

部署到 Github page,需要安装一个插件

npm install hexo-deployer-git --save

image-20250416230602134

再打开 _config.yml 文件,配置部署地址

image-20250416230805155

创建一个仓库,取名 账号名称.github.io

image-20250416230950104

创建好后,找到 code,找到 Git 地址,填入配置文件,然后打开控制台 or 打开 CMD 命令行,输入命令

image-20250416232750087

image-20250416232822182

hexo d

部署成功

image-20250416232555234

到这一步,就可以通过域名访问到你的博客了

浏览器输入: GitHub名称.github.io

image-20250417002221170

出现这个错误,是因为配置文件中的域名和访问的域名不一致

所以需要修改 _config.yml 文件中的访问域名

image-20250417002334142

重新 hexo d 部署后,即可通过域名访问,就不需要再启动本地服务即可访问博客

这里可以暂时不设置,因为后续会通过自己的域名进行访问,如果想及时看到效果,也可以先设置一下

# 报错处理

2126e2c9494171d10a079a616719fe8

出现这个错误是因为 GitHub 是国外的网站,国内部分时候不能直接访问,所以需要开启 tun 模式(虚拟网卡模式)这个功能以后会讲到,现在只需要知道出现这个错误,打开这个开关即可

image-20250417010401384

成功通过域名访问到博客

image-20250417010558633

但是,因为 github.io 普通的网络环境不能直接访问到博客,所以需要迁移到其他可以访问的托管平台

# 迁移到 CDN 托管平台

网络上有各种托管静态文件的平台,比如 CloudflareVercel帽子云EdgeOne Pagesnetlify

# 各平台的区别和限制

平台 流量 访问次数
Cloudflare 无限 无限 (针对静态资源请求)<br/>Workers: 10 万次请求
Vercel 100 GB 无限
帽子云 目前无限 目前无限
EdgeOne Pages 10 GB 100 万次请求数 / 月
netlify 100 GB 12.5 万次函数调用 / 月

# 注册帽子云

注册一个账号

image-20250420235449750

正常注册即可

image-20250420235700555

登录后选择创建静态项目

image-20250420235912201

新建一个应用名称,然后将 Github 仓库授权给帽子云

image-20250421000152199

选择 Github 仓库地址,选择当前分支,创建应用即可

image-20250421000329448

迁移成功,现在可以直接通过域名访问

image-20250421000451615

博客报错的问题这里就不过多赘述,修改配置文件即可

现在这个 XXX.maozi.io 域名也可以发给你的小伙伴去访问了,他们也能看到的哦~(不需要 VPN)

image-20250421004020427

# 注册域名

Q:为什么要注册域名?

T:为了方便记忆,能直接访问到你的项目

域名系列后续还会单独开一期讲,知识点过多这里就不讲太详细,只简单进行注册

域名有免费域名,也有收费域名,为了简单切方便记忆的域名,有的域名会进行出售,像 GLM 大模型的域名就是 https://z.ai,ChatGPT 的域名就是 https://chatgpt.com

image-20250421001233258

我的建议是,如果不是为了商业而选择.com 域名,可以随意一点,免费的域名也可以用,上述的 xxx.maozi.io 也是免费域名,但不方便记忆,就会选择带自我属性的域名,方便记忆

具体的免费域名可以参考:免费、低价付费域名汇总,这里拿低价的 .xyz 后缀进行后续教程(当然,免费毕竟是免费的,质量不能保证,还是付费稳定)

image-20250421001551221

打开 spaceship 国外域名购买:https://www.spaceship.com

进入首页,先注册账号

image-20250421001851356

填写注册信息

image-20250421002001002

这个低价域名,只存在于 六位数字.xyz ,0.67 美元 / 年,换算成人民币就是 4.82 元 / 年

image-20250421002334657

加入购物车,选择支付方式购买即可,支付方式可以选择支付宝

image-20250421002824641

image-20250421002951303

购买完成后,进入 域名管理器

image-20250421234237073

选择该域名,设置 名称服务器和DNS

image-20250421234414546

# 将域名托管到 Cloudflare 提供商

注册 cloudflare,注册方式可选择 qq 邮箱,也可使用 google 邮箱

image-20250421235000659

注册好后登录,填入刚刚购买的域名

image-20250421235424120

选择免费套餐

image-20250421235506290

选择继续

image-20250421235616704

将 DNS 记录复制到域名注册商,将域名托管到 Cloudflare

image-20250421235726977

image-20250421235803289

保存后,cloudflare 点击继续

image-20250422000225934

回到 spaceship,点击高级 DNS

image-20250422000207453

点击检查服务器

image-20250422000310075

DNS 会自动进行传播,等待 DNS 状态为 在线大概需要 5-10 分钟),同时邮箱内会收到一条来自 Cloudflare 的域名已在管理的通知邮件,cloudflare 域名的状态显示为 活动 ,致此托管成功

image-20250422000421260

image-20250422000841428

# 设置自定义域

帮助文档:DNS 账户验证 - Cloudflare,按上述文档操作,得到 API 令牌,回到帽子云,选择 域名证书-DNS账户 —> 创建DNS账户

跟上,好了吱一声

image-20250422002538638

image-20250422002940465

打开 cloudflare,点击域名后,选择 DNS 记录

image-20250422004639548

根据文档设置 DNS 记录:自定义域名

新增一条记录,将域名的所有级 CNAME 到 cname.maozi-dns.com ,并且关闭代理状态

image-20250422005057757

image-20250422004916404

名称设置为 wenyu ,即 wenyu.127126.xyz 进行 CNAME ,自定义域名的时候就只能使用 wenyu.126126.xyz

名称设置为 *,即所有 xxx.127126.xyz 都进行 CNAME

名称设置为 @,即 127126.xyz 这个根域进行 CNAME

image-20250422004716738

回到帽子云,选择新增域名证书

image-20250422005456314

image-20250422005813170

直到状态为正常

image-20250422005932107

为项目设置自定义域名, 应用管理——>选择一个项目——>环境——>域名设置——>添加——>选择刚刚申请的域名 ,确认即可

image-20250422010154895

image-20250422010302084

# 结尾处理

中间还有一个小插曲没讲, hexo-blog-code 这个仓库,是用来存源文件的,可以用 pycharm 进行提交,也可以使用 GIT 命令行进行提交,这里我演示 IDEA 进行提交

打开项目文件夹,选择 版本控制 ,选择 创建Git仓库

image-20250422013102853

选择博客文件夹,确定

image-20250422013146532

点击提交,显示 未进行版本管理的文件

image-20250422013315925

.gitgnore 文件,是用于排除提交的配置文件,之前讲过,配置如下不需要上传的文件(会自动生成的文件不需要上传)

.DS_Store
Thumbs.db
db.json
*.log
node_modules/
public/
.deploy*/
_multiconfig.yml
shokaxTemp/
package-lock.json
.idea
db.json
pnpm-lock.yaml

排除后勾选需要上传的文件,填写提交日志(自己随便写,以后在公司可不能随便写,因为同事也能看到你的提交日志),选择提交并推送

image-20250422013711993

名称默认,URL 即为仓库的 Git 链接

image-20250422013922186

验证身份后,点击推送即可

image-20250422020502623

扩展资料:shokaX 相关配置教程,如果想让博客变得更漂亮,可以学习更多语法~

至此,教程完结~撒花🎉