准备工作
博客基于 Hexo 搭建，使用主题为 Next， 为保证过程顺利，需要先做一些准备，包括需要使用的依赖及账号，搭建环境为 Windows。
依赖
Node.js
Node.js 是一个开源、跨平台的 JavaScript 运行时环境，基于 Google 的 V8 引擎；我们在接下来的操作中处处离不开 Node 与 NPM(Node Package Manager)，安装请看：Node.js官方网站，NPM 会与 Node.js 一起安装，安装后在 cmd 窗口键入以下命令验证
出现版本号则说明安装成功。
Git
Git 是一种分布式开源版本控制系统(VCS)，可以理解为仓库，管理项目代码，可以管理本地仓库与远程仓库，我们主要用来推送博客至 Github 远程仓库更新个人博客网站。Git 官网，关于 Git 的安装较为复杂，推荐一篇详细讲解的文章：Git 详细安装教程。
相关账号注册
Github
说到 Github，相信大家都不会陌生，它是全球最大的同性交友网站:smirk:，提供了一系列的免费服务。前往 Github 官网 注册账号。
阿里云
主要用于自定义域名，若无需求可无视，阿里云官网，直接使用支付宝账号注册登录即可。
LeanCloud
用于存放评论数据，若无需求可无视，LeanCloud 官网，也可以暂时放置，后面介绍评论系统时一并注册。
博客搭建
本地搭建
Hexo 是基于 Node 的博客框架，能够帮助我们快速生成静态站点，使用需要先安装，输入以下命令
npm install hexo-cli -g # g 表示 global, 全局安装
复制代码
如果长时间下载不下来可以切换 npm 源为淘宝镜像
npm config set registry https://registry.npmmirror.com
npm config get registry # 验证是否成功
复制代码
安装后就可以通过 hexo init 博客存放目录 命令初始化博客雏形
hexo init blog
cd ./blog # 进入目录
复制代码
初始化的文件目录大概如下
|-- blog |-- .gitignore # git 忽略文件 |-- package-lock.json |-- package.json # 项目信息与配置 |-- _config.landscape.yml # landscape 主题配置 |-- _config.yml # 站点配置 |-- .github | |-- dependabot.yml |-- scaffolds # 模板目录 | |-- draft.md # 草稿模板 | |-- page.md # 页面模板 | |-- post.md # 文章模板 |-- source # 资源目录 | |-- _posts # 文章目录 | |-- hello-world.md # 初始化自带文章 |-- themes # 所有主题存放目录 |-- .gitkeep
复制代码
依次键入命令
hexo new title # 创建一篇名为 title 的文章，在 _posts 目录下
hexo g # g 表示 generate，生成静态文件
hexo s # s 表示 server，开启一个本地服务器，默认为 http://localhost:4000
复制代码
访问 http://localhost:4000，即可看到网站雏形
默认主题为 landscape，我们将其更换为 Next，先卸载 landscape
npm un hexo-theme-landscape
复制代码
安装 Next
git clone https://github.com/next-theme/hexo-theme-next themes/next
复制代码
注意，git 配置了 ssh 要使用以下命令
git clone git@github.com:next-theme/hexo-theme-next.git themes/next
复制代码
此时 themes 目录下会多出一个 next 目录，然后修改根目录站点配置 _config.yml 文件
# _config.yml
#theme: landscapetheme: next
复制代码
可以看到主题已经改变了
链接 Github Pages
新建 Github 仓库，仓库名应为 Github 用户名.github.io，复制仓库链接（配置了 ssh 应复制 ssh 链接），修改站点配置
# _config.yml
deploy: type: git repo: 上一步复制的链接 branch: master
复制代码
安装 git 部署插件
npm install hexo-deployer-git --save
复制代码
键入以下命令
hexo clean # 清除缓存
hexo g
hexo d # d表示deploy，部署至 Github
复制代码
然后访问 Github 用户名.github.io 即可
自定义域名
首先你需要有一个域名，我用的是阿里云，所以演示也是基于阿里云官网操作，先登录阿里云，找到域名解析，点添加设置，添加如下
其中第一项记录值需要替换为 Github 用户名.github.io，第二项纪录值可以在 cmd 窗口中输入以下命令得知
第三项记录值是 Github 官方的 IP，有被更换的可能，可以前往 Github 官方文档 处查看
设置解析后前往 仓库设置为自己的域名：Settings -> Pages
在 source 目录下新建 CNAME 文件，输入自己的域名（不要带 www）后保存，再次输入以下命令
如果每次执行嫌麻烦，可以在项目根目录新建 run.bat 文件，写入 hexo clean && hexo g && hexo d，保存即可，以后需要发布双击此文件就会自动执行命令，想要在本地运行可以将 d 换成 s。
Hexo 配置
网站标题、关键字等
站点配置，修改根目录 _config.yml。
#_config.yml
# Sitetitle: yuanyxh - 学习与沉淀 # 站点标题subtitle: 学以致用 # 站点二级标题description: 读万卷书，行万里路 # 站点描述keywords: 博客, web, 前端, JavaScript, React, Vue, Node, Java, C/C++, Frida, Xposed # 站点关键词author: yuanyxh # 作者language: zh-CN # 语言timezone: Asia/Shanghai # 时区
复制代码
以上内容建议认真填写，会影响 SEO。
添加黑暗模式
Next 默认支持黑暗模式，但无法手动切换，使用 drakmode.js 手动添加支持，主题配置
# _config.next.yml
vendors: # cdn 引用插件 darkmode_js: https://cdn.jsdelivr.net/npm/darkmode-js@1.5.7/lib/darkmode-js.min.js
darkmode_js: enable: true # 启用插件
复制代码
在 /themes/next/layout/_scripts/vendors.njk 中添加内容
# vendors.njk
{# Customize darkmode.js - Declaration #}{%- if theme.darkmode_js.enable %} <script src="{{ theme.vendors.darkmode_js }}"></script>{%- endif %}
{# Customize darkmode.js - Invokation #}{%- if theme.darkmode_js.enable %}<script>var options = { bottom: '64px', // default: '32px' right: 'unset', // default: '32px' left: '32px', // default: 'unset' time: '0.5s', // default: '0.3s' mixColor: 'transparent', // default: '#fff' backgroundColor: 'transparent', // default: '#fff' buttonColorDark: '#100f2c', // default: '#100f2c' buttonColorLight: '#fff', // default: '#fff' saveInCookies: true, // default: true, label: '🌓', // default: '' autoMatchOsTheme: true // default: true}const darkmode = new Darkmode(options);darkmode.showWidget();</script>{%- endif %}
复制代码
此时可以手动切换模式，但样式部分还需要更改，当切换到黑暗模式时，drakmode.js 会在 body 元素中添加 darkmode--activated 类，我们新建 themes/next/source/css/_custom/drakmode.styl 样式文件，写入以下内容
# drakmode.styl
.darkmode--activated { --body-bg-color: $body-bg-color-dark; --content-bg-color: $content-bg-color-dark; --card-bg-color: $card-bg-color-dark; --text-color: $text-color-dark; --blockquote-color: $blockquote-color-dark; --link-color: $link-color-dark; --link-hover-color: $link-hover-color-dark; --brand-color: $brand-color-dark; --brand-hover-color: $brand-hover-color-dark; --table-row-odd-bg-color: $table-row-odd-bg-color-dark; --table-row-hover-bg-color: $table-row-hover-bg-color-dark; --menu-item-bg-color: $menu-item-bg-color-dark;
--btn-default-bg: $btn-default-bg-dark; --btn-default-color: $btn-default-color-dark; --btn-default-border-color: $btn-default-border-color-dark; --btn-default-hover-bg: $btn-default-hover-bg-dark; --btn-default-hover-color: $btn-default-hover-color-dark; --btn-default-hover-border-color: $btn-default-hover-border-color-dark;
--highlight-background: $highlight-background-dark; --highlight-foreground: $highlight-foreground-dark; --highlight-gutter-background: $highlight-gutter-background-dark; --highlight-gutter-foreground: $highlight-gutter-foreground-dark;
img { opacity: .75; &:hover { opacity: .9; } }
code { color: #69dbdc; background: transparent; }}
复制代码
然后在 themes/next/source/css/main.styl 中添加引用
# main.styl
@import '_custom/darkmode.styl';
复制代码
替换 Markdown 渲染引擎
Hexo 默认的渲染引擎缺少了很多功能，我们对他进行替换，先卸载默认渲染引擎
npm un hexo-renderer-marked --save
复制代码
安装 hexo-renderer-markdown-it 插件
npm i hexo-renderer-markdown-it --save
复制代码
站点配置添加内容
# _config.yml
markdown: preset: 'default' render: html: true xhtmlOut: false langPrefix: 'language-' breaks: true linkify: true typographer: true quotes: '“”‘’' enable_rules: disable_rules: plugins: - markdown-it-abbr - markdown-it-cjk-breaks - markdown-it-deflist - markdown-it-emoji - markdown-it-footnote - markdown-it-ins - markdown-it-mark - markdown-it-sub - markdown-it-sup - markdown-it-checkbox - markdown-it-imsize - markdown-it-expandable - name: markdown-it-container options: success - name: markdown-it-container options: tips - name: markdown-it-container options: warning - name: markdown-it-container options: danger anchors: level: 2 collisionSuffix: '' permalink: false permalinkClass: 'header-anchor' permalinkSide: 'left' permalinkSymbol: '¶' case: 0 separator: '-'
复制代码
安装以下插件
npm i markdown-it-checkbox
npm i markdown-it-imsize
npm i markdown-it-expandable
复制代码
Next 配置
默认提供的 Next 只提供了部分功能，我们可以修改默认配置来进行扩展，在项目根目录新建 _config.next.yml 主题配置文件，这个文件中的配置优先于 next 主题中的 _config.yml。
替换布局
next 默认使用的布局为 Muse，这里我使用的是 Mist，# 代表注释。将内容复制粘贴至 _config.next.yml。
# _config.next.yml
# Schemes#scheme: Musescheme: Mist#scheme: Pisces#scheme: Gemini
复制代码
菜单项
可以按需添加修改，不需要显示的菜单项注释即可。
#_config.next.yml
menu: home: / || fa fa-home # 首页 tags: /tags/ || fa fa-tags # 标签 categories: /categories/ || fa fa-th # 分类 archives: /archives/ || fa fa-archive # 归档 schedule: /schedule/ || fa fa-calendar # 日程表 sitemap: /sitemap.xml || fa fa-sitemap # 站点地图 about: /about/ || fa fa-user # 关于 commonweal: /404/ || fa fa-heartbeat # 404
# Enable / Disable menu icons / item badges.menu_settings: icons: true # 是否显示图标 badges: false # 是否显示右上角文章数量
复制代码
此时我们点击菜单项会发现除首页和归档外其他菜单项都会丢失页面，因为我们还没创建对应的页面，使用 hexo new page 页面名
hexo new page tags # 创建标签页
hexo new page categories # 创建分类页
hexo new page about # 创建关于页
复制代码
此时 source 会多出几个文件夹与之对应。
既然有标签和分类，那我们要怎么将文章标记和归类呢，以分类为例，我们找到 source/categories/ 下的 index.md，修改内容为
# source/categories/index.md---type: categoriestitle: 文章分类date: 2022-10-19 13:30:10---
复制代码
可以看到就是加了一个 type 字段指明这个 Markdown 文件用来分类，这样我们的文章想要分类时可以这样
# source/_posts/个人博客搭建 - 基于Hexo + Next + Github.md---title: 个人博客搭建 - 基于Hexo + Next + Githubcategories: - 站点建设 # 指明分类date: 2022-10-21 09:21:00description: 基于 Hexo 框架，搭配 Next 主题搭建自己的第一个博客，并配合 Github Pages 免费服务，让别人也能访问你的博客！ # 添加文章描述---
复制代码
添加本地搜索
安装搜索插件
npm install hexo-generator-search
复制代码
在站点配置文件中添加内容
# _config.yml
search: path: search.xml # 查找路径，search.xml 是插件默认生成的检索文件 field: post # 查找类型 content: true # 是否开启查找文章内容 template: ./search.xml
复制代码
开启主题的本地搜索，添加内容
# _config.next.yml
local_search: enable: true # If auto, trigger search by changing input. # If manual, trigger search by pressing enter key or search button. trigger: auto # Show top n results per article, show all results by setting to -1 top_n_per_article: 1 # Unescape html strings to the readable one. unescape: false # Preload the search data when the page loads. preload: false
复制代码
修改网站图标
以下配置不用添加，在 theme/next/source/images 目录下，将你想要使用的图标复制进去并重命名为 favicon-16x16-next.png 和 favicon-32x32-next.png
favicon: small: /images/favicon-16x16-next.png medium: /images/favicon-32x32-next.png apple_touch_icon: /images/apple-touch-icon-next.png safari_pinned_tab: /images/logo.svg #android_manifest: /manifest.json
复制代码
添加版权
# _config.next.yml
creative_commons: license: by-nc-sa # 使用的协议 # Available values: big | small size: small # 大小 sidebar: false # 侧边栏是否显示 post: true # 文章是否显示 language: zh-CN # 语言
复制代码
配置后如下所示
配置侧边栏
# _config.next.yml
sidebar: position: right # 侧边栏位置 display: hide # 侧边栏默认隐藏 padding: 18 offset: 12
avatar: url: /images/Only_Me_Edit.png # 头像路径 rounded: true # 是否显示圆形头像 rotated: false # 鼠标移入是否旋转
site_state: true # 是否显示日志、分类等
# 设置社交链接，可添加删除social: GitHub: https://github.com/yuanyxh || fab fa-github QQ: http://wpa.qq.com/msgrd?v=3&uin=725441272&site=qq&menu=yes || fa-brands fa-qq 掘金: https://juejin.cn/user/2881148117060749 || fa-solid fa-layer-group #E-Mail: mailto:yourname@gmail.com || fa fa-envelope #Weibo: https://weibo.com/yourname || fab fa-weibo #Google: https://plus.google.com/yourname || fab fa-google #Twitter: https://twitter.com/yourname || fab fa-twitter #FB Page: https://www.facebook.com/yourname || fab fa-facebook #StackOverflow: https://stackoverflow.com/yourname || fab fa-stack-overflow #YouTube: https://youtube.com/yourname || fab fa-youtube #Instagram: https://instagram.com/yourname || fab fa-instagram #Skype: skype:yourname?call|chat || fab fa-skype
social_icons: enable: true # 是否启用社交链接对应图标 icons_only: false # 是否只显示图标 transition: false
复制代码
显示文章字数与阅读时长
安装 hexo-symbols-count-time 插件
npm install hexo-symbols-count-time
复制代码
站点配置
# _config.yml
symbols_count_time: symbols: true # 启用字数统计 time: true # 启用阅读时长估计 total_symbols: true # 字符总数 total_time: true # 总时长 exclude_codeblock: false # 是否包含代码块 awl: 4 wpm: 275 suffix: 'mins.'
复制代码
主题配置
# _config.next.yml
symbols_count_time: separated_meta: true item_text_total: false
复制代码
文章添加时效性提示
根目录新建 /scripts/injector.js 文件，写入以下内容
//注入文章过期提示hexo.extend.injector.register( 'body_end', `<script src="/js/outdate.js"></script>`, 'post');
复制代码
新建 /source/js/outdate.js 文件，写入内容
(function () { //不同的日期显示不同的样式，200 天为黄色提示，400天为红色提示，可以自己定义。 let warningDay = 200; let errorDay = 400; // 确保能够获取到文章时间以及在文章详情页 let times = document.getElementsByTagName('time'); if (times.length === 0) { return; } let posts = document.getElementsByClassName('post-body'); if (posts.length === 0) { return; }
// 获取系统当前的时间 let pubTime = new Date(times[0].dateTime); /* 文章发布时间戳 */ let now = Date.now(); /* 当前时间戳 */ let interval = parseInt(now - pubTime); let days = parseInt(interval / 86400000); /* 发布时间超过指定时间（毫秒） */ //note warning 以及 note danger 是 Next 主题的自定义模板语法，如果使用其他主题，请自行更改样式以达到最佳显示效果 if ( interval > warningDay * 3600 * 24 * 1000 && interval < errorDay * 3600 * 24 * 1000 ) { posts[0].innerHTML = '<div class="note warning">' + '<h5>文章时效性提示</h5><p>这是一篇发布于 ' + days + ' 天前的文章，部分信息可能已发生改变，请注意甄别。</p>' + '</div>' + posts[0].innerHTML; } else if (interval >= errorDay * 3600 * 24 * 1000) { posts[0].innerHTML = '<div class="note danger">' + '<h5>文章时效性提示</h5><p>这是一篇发布于 ' + days + ' 天前的文章，部分信息可能已发生改变，请注意甄别。</p>' + '</div>' + posts[0].innerHTML; }})();
复制代码
文章超过 200 天则显示过时提示
代码块添加复制功能
主题配置添加
# _config.next.yml
codeblock: copy_button: enable: true # Available values: default | flat | mac style: mac
复制代码
添加评论系统
Hexo博客进阶：为 Next 主题添加 Waline 评论系统Waline 官方文档
根据 LeanCloud 官方描述，目前国际版已不支持国内访问，具体看 LeanCloud 国际版共享域名不再向中国大陆提供服务
这意味着国内网络无法获取并发布评论数据，本站后续可能会替换评论系统，如需要其他评论系统可看 Next 文档 - 评论系统
网站 SEO 优化
SEO，即搜索引擎优化，这里的 SEO 优化主要针对项目的体积，加速站点首屏加载时间，实际还要看站点内容是否优质，有效用户访问量等。
压缩代码
安装插件
npm install hexo-neat --save
复制代码
站点配置添加
# _config.yml
# 开启压缩neat_enable: trueneat_html: enable: true exclude:neat_css: enable: true exclude: - '**/*.min.css'neat_js: enable: true mangle: true output: compress: exclude: - '**/*.min.js' - '**/index.js'
复制代码
站点收录
如何让搜索引擎收录我的站点Next SEO
网站性能测试
一个好的网站，性能是必须要好的，如果用户访问你的网站要等很久，或者网站页面卡顿，就会降低用户的满意度，从而流失大量用户，这里推荐一个性能测试网站，专门用于测试网站性能，并生成统计报告
PageSpeed Insights
参考文章
评论