一、博客搭建 ✈️ 二、图床搭建 ✈️ 三、备份与持续集成 ✈️ 四、源码说明与维护指南

# 🌸新建仓库

# 💝更改默认分支

右上角点击头像，来到 Settings -> Repositories，改为 master 分支

# 💝创建仓库

该仓库用来存放博客部署的静态网页文件，如 js、css、html 等等

仓库命名必须是：用户名.github.io
分支：master

# 🌸软件安装

# 💝Git 安装

略

# 💝Nodejs 安装

👉 Nodejs 安装教程

# 💝Hexo 安装

新建目录，不必与 1.2 的仓库名一致，然后进入该目录，在 cmd 命令行窗口中，执行以下命令：

cmd 命令行窗口

npm install hexo-cli -g

# 🌸主题安装

这里使用 shoka 主题

在 hexo 安装目录中，执行以下 git 命令：

git 命令行窗口

git clone https://github.com/amehime/hexo-theme-shoka.git ./themes/shoka

其他更多主题，请看 👉 Hexo 主题

# 🌸应用主题

修改站点配置文件 _config.yml

_config.yml 站点配置文件

theme: shoka

# 🌸站点配置

详情请看 👉 Hexo 官方文档配置

站点配置文件为：_config.yml

# 💝渲染配置

卸载默认的 hexo-renderer-marked，以及其他 markdown 文件渲染器
cmd 命令行窗口
npm un hexo-renderer-marked --save
安装 hexo-renderer-multi-markdown-it，用于 md 文件渲染器，压缩 css/js/html
cmd 命令行窗口
npm i hexo-renderer-multi-markdown-it --save

加入 markdown 配置，用来渲染 md 文件

_config.yml 站点配置文件

	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: "你知道得太多了"

加入 minify 配置，压缩 css/js/html

_config.yml 站点配置文件

	minify:
	html:
	enable: true
	exclude: # 排除 hexo-feed 用到的模板文件
	- '**/json.ejs'
	- '**/atom.ejs'
	- '**/rss.ejs'
	css:
	enable: true
	exclude:
	- '*/.min.css'
	js:
	enable: true
	mangle:
	toplevel: true
	output:
	compress:
	exclude:
	- '*/.min.js'

停用默认代码高亮功能，否则代码块的 mac 样式不能正常显示
hexo -v 查看 hexo 的版本是否在 v7.0.0 及以上，是的话，采用此做法：将 syntax_highlighter 中的属性值 highlight.js 去掉即可，详情请看 Hexo 官方文档 👉 语法高亮
_config.yml站点配置文件
syntax_highlighter: # empty

# 💝翻转配置

安装 hexo-autoprefixer，缺少该插件，首页卡片翻转效果在部分浏览器中将无法正常显示。
加入有关配置：
_config.yml 站点配置文件
autoprefixer:
exclude:
- '*.min.css'

# 💝搜索配置

安装 hexo-algoliasearch，用于站内搜索

加入有关配置：

_config.yml站点配置文件

	algolia:
	appId: #Your appId
	apiKey: #Your apiKey
	adminApiKey: #Your adminApiKey
	chunkSize: 5000
	indexName: #"shoka"
	fields:
	- title #必须配置
	- path #必须配置
	- categories #推荐配置
	- content:strip:truncate,0,2000
	- gallery
	- photos
	- tags

# 💝Feed 配置

安装 hexo-feed，用于生成 Feed 文件

加入有关配置：

_config.yml 站点配置文件

	feed:
	limit: 20
	order_by: "-date"
	tag_dir: false
	category_dir: false
	rss:
	enable: true
	template: "themes/shoka/layout/_alternate/rss.ejs"
	output: "rss.xml"
	atom:
	enable: true
	template: "themes/shoka/layout/_alternate/atom.ejs"
	output: "atom.xml"
	jsonFeed:
	enable: true
	template: "themes/shoka/layout/_alternate/json.ejs"
	output: "feed.json"

# 💝SEO 优化

推荐安装 hexo-filter-nofollow，用于优化 SEO
cmd 命令行窗口
npm install hexo-filter-nofollow --save

加入有关配置：

_config.yml 站点配置文件

	nofollow:
	enable: true #是否启用
	field: site #site 全站，post 仅文章
	exclude:
	- 'slx-world.top' #例外网站
	- 'slx-world.github.io'

# 💝配置部署信息

配置好 1.2 中的仓库信息

_config.yml 站点配置文件

	deploy:
	type: #部署方式
	repo: #仓库地址，记得与 1.2 中的仓库保持一致！！！
	branch: #分支，记得与 1.2 中的仓库保持一致！！！

# 🌸主题配置

详情请看 👉 基本配置 🏳️‍🌈 界面显示 🏳️‍🌈 特殊功能

# 💝统计配置

安装 hexo-symbols-count-time，用于文章或站点字数及阅读时间统计
不需要修改站点配置文件，直接使用插件默认配置就行
但是需要修改主题配置文件，找到两处 count，修改为 true
_config.yml 主题配置文件
# 页尾全站统计
footer:
since: 2010
count: true
# 文章界面统计
post:
count: true

# 💝评论配置

在 GitHub 仓库的 Settings → General → Features 中开启 Discussions。
安装 Giscus GitHub App，并仅授权博客仓库。

在 Giscus 配置页选择仓库、 Announcements 分类和 pathname 映射，然后将生成的仓库 ID 与分类 ID 写入主题配置：

_config.yml 主题配置文件

	giscus:
	enable: true
	repo: 用户名/仓库名
	repo_id: 仓库ID
	category: Announcements
	category_id: 分类ID
	mapping: pathname
	strict: 1
	reactions_enabled: 1
	input_position: bottom
	theme_light: light
	theme_dark: dark
	lang: zh-CN
	loading: lazy