全网最详细Hexo+next博客搭建+语雀+github图床+elog全自动化上传+SEO优化+各种优化+leancloud+Waline评论系统

发表于 2024-12-12 更新于 2024-12-13 分类于超详细博客搭建阅读次数： Waline：本文字数： 4.4k 阅读时长 ≈ 16 分钟

博客部署：Hexo+next8 部署到 github 并设置自购域名解析个性化配置：超级完整的个性化配置评论系统：leancloud+waline+versel 图床：PicGo+Github 同步问题：elog（自动化批量上传） SEO 优化导航栏配置......参考文档...

博客部署：Hexo+next8 部署到 github 并设置自购域名解析
个性化配置：超级完整的个性化配置
评论系统：leancloud+waline+versel
图床：PicGo+Github 同步问题：elog（自动化批量上传） SEO 优化导航栏配置……

参考文档如下：

GitHub Pages + Hexo + NexT + 自定义域名搭建永久有效的个人博客网站并进行SEO

github+hexo+域名解析

博客布置（next5）

后期上传注意

elog sync -e .elog.env 用规则代理即可，不用全局（注意clash开启tun）
hexo g -d 直接取消代理，用直连
（具体上传顺序见文末）
（每次上传后，过一段时间才会生效，可以直接hexo server本地看是否生效）

github 配置

创建 github 项目

ssh 免密登录：发送本地公钥到 github

生成密钥：
ssh-keygen -t rsa -b 4096
一路回车生成到了c/Users/Administrator/.ssh/id_rsa
去复制id_rsa.pub到github：
https://github.com/settings/ssh
改变密钥认证方式：
ssh-keyscan -t ed25519 github.com >> C:\Users\Administrator\.ssh\known_hosts
测试是否成功：
ssh -T git@github.com

设置你的账号信息:

`plain git config --global user.name "yourname"`

github邮箱

`plain git config --global user.email "xxx@xxx.com"`

本地搭建 Hexo

下载Hexo

一路下一步

切换阿里云镜像源npm config set registry https://registry.npmmirror.com

安装 cnpmnpm install -g cnpm --registry=[https://registry.npmmirror.com](https://registry.npmmirror.com)

用 cnpm 安装 hexocnpm install -g hexo-cli

检查是否安装成功hexo -v

本地创建 Hexo 博客文件

下载 nodejs

nodejs官网，直接下载，一路回车即可

需要把 nodejs 加入系统环境变量npm.cmd 和 node.exe（就在文件夹的主目录）

选择一个文件夹，进入后hexo init，会生成如下文件

node_modules: 依赖包
public：存放生成的页面
scaffolds：生成文章的一些模板
source：用来存放你的文章
themes：放下下载的主题
_config.yml: 博客的核心配置文件（设置主体、标题等属性）

启动cnpm install

启动 hexohexo s -g

直接访问127.0.0.1:4000

Hexo 托管至 github

打开文件

文件最下面

安装部署命令cnpm install hexo-deployer-git --save

本地hexo/source中创建一个名为CNAME文件，不要前缀。写上你的域名godice.top

编译本地文件提交到 github

1
2
3

hexo clean
hexo generate
hexo deploy

如果之前在github添加好了ssh，部署时是不会要求输入密码的，如果不想添加ssh，也可以把_config.yml文件中的repo设置成如下格式，也可以免密部署

1	repo: https://github用户名:密码@github.com/github用户名/github用户名.github.io.git

踩坑

注意：在配置文件中的分支，需要和 github 项目中的默认分支一致

如图

修改如下

deploy:
  type: git
  repo: git@github.com:godicee/godicee.github.io.git
  branch: main

重新编译上传

1
2
3

hexo clean
hexo generate
hexo deploy

hexo 文件解析

编译后会生成如下两个文件

静态页面文件就放在 public 下

设置域名 dns 解析

（域名记得备案，top 结尾的不需要备案）

进入购买域名的网站，进入域名解析设置。我这里是 aliyun——云解析 DNS

还需要设置 github 解析到域名

next 主题

next主题添加访客人数

next主题添加网站运行时间

安装 swipnpm i hexo-renderer-swig

hexo 中有两种名为_config.yml 的配置文件

网站配置文件在主路径下主题配置文件：在某个主题的内部

next主题个性化配置

修改主题

修改网站配置文件中theme: next

修改后：hexo clean然后hexo g -d

设置文章置顶

添加 Waline 评论系统(带后端)

参考文档

leancloud数据库账号注册

这里无论无何都无法显示，发现是自己的 next 版本太低了，waline 只支持 next8.xxx 版本

next 升级

直接去github官网即可

next8 个性化配置

leancloud网站：数据库管理

vercel网站：评论区管理

个人觉得默认的主题 1 最好看（234 主题都差不多）

分享功能

next个性化设置（有些老版本，不一定适配）

博客参考搭建链接（参考这个博客的样式）

next8个性化配置（新版本）

添加近期文章

导航栏配置

导航栏架构

导航栏：位于左侧，做文档分类的作用

三级菜单：用日常为例
- 第一级：日常
- 第二级：读书、艺术、脑洞、待办事项
- 第二级：书单、读书笔记
注意：
- 每个菜单的子页面必须有一个 default 页（在单击菜单时会显示）
- 顶级页面必须携程/xxx.html，不然顶上菜单会消失

代码如下：

menu:
  home: / || fa fa-home
  #（中略）
  日常:
    default: /essay/ || fa fa-icons
    读书: 
      default: /books/ || fa fa-book
      书单: /list.html || fa fa-lines-leaning
      读书笔记: /notes.html || fa fa-feather-pointed
    艺术: /arts.html || fa fa-icons
    脑洞: /xmind.html || fa fa-lightbulb
    待办事项: /todo.html || fa fa-list-check
  about: /about/ || fa fa-user
  #（后略）

在/hexo/source/下手动创建页面：（文件名&文件结构必须和menu中 || 前的目录一致）

hexo\source
└─essay
  │  index.md
  │  arts.md
  │  xmind.md
  │  todo.md
  │
  └─books
        index.md
        list.md
        notes.md

访问人数&站点运行时间踩坑

注意，这里因为我改了不少次，踩到一个坑

在/blog/themes/next/layout/_partials/footer.njk 文件中添加代码设置访问人数和站点运行时间时：

特别注意：运行时间的代码必须放在最下面，不然访问人数显示不出来

访问人数代码：

1
2
3

{% if theme.footer.counter %}
    <script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>
{% endif %}

运行时间代码

<!-- 
 -->
<!-- 网站运行时间的设置 -->
<span id="timeDate">载入天数...</span>
<!-- <span id="times">载入时分秒...</span> -->
<script>
    var now = new Date();
    function createtime() {
        var grt= new Date("12/10/2024 00:00:00");//此处修改你的建站时间或者网站上线时间
        now.setTime(now.getTime()+250);
        days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days);
        hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours);
        if(String(hnum).length ==1 ){hnum = "0" + hnum;} minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum);
        mnum = Math.floor(minutes); if(String(mnum).length ==1 ){mnum = "0" + mnum;}
        seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
        snum = Math.round(seconds); 
        if(String(snum).length ==1 ){snum = "0" + snum;}
        // var times = document.getElementById("times").innerHTML = hnum + " 小时 " + mnum + " 分 " + snum + " 秒";
        document.getElementById("timeDate").innerHTML = "本站已安全运行 "+dnum+" 天 "+hnum + " 小时 " + mnum + " 分 " + snum + " 秒";
    }
setInterval("createtime()",250);
</script>

PicGo+Github搭建图床

图床搭建参考1

图床搭建参考2

PicGo下载链接

使用 GitHub 作为图床的优势在于免费、稳定且具有版本控制功能，特别适合个人博客、小型项目等。PicGo作为一个开源的图床上传工具，提供了丰富的功能，使得管理图床变得更加便捷。

然而，对于有大量图片请求或对加载速度要求很高的项目，以及对存储空间需求较大的项目，可能需要考虑使用专门的图片存储服务。这些服务通常会提供更快的访问速度和更大的存储空间，但可能会涉及一些费用。

在选择图床方案时，需要根据具体需求权衡利弊，选择最适合项目的方案。

成功上传

Elog 解决写作同步

Elog的github官网

在遇到Elog之前，你的博客可能是：

本地编辑器书写 + Hexo/Hugo/Vitepress部署
语雀记录
Notion记录和发布
WordPress在线书写和发布
GHost在线书写和发布
Github记录
掘金/知乎等在线平台记录

可以发现，大部分博客平台要么自己提供在线编辑器，要么就让用户本地书写再进行进行部署。可惜目前好用的编辑器大都都不是博客平台自己提供的，而是一些第三方编辑器，代表产品：

Notion：出色的数据库设计，灵活度非常高
FlowUs：仿Notion的国内文档产品，用了下还不错
飞书云文档：也是一个很出色的在线协同文档工具，主打工作/团队场景，也有个人版
语雀：阿里出品，笔者觉得很不错的一款在线编辑器，涵盖日常个人、工作所需要的各种场景，够用
Typora：一款出色的本地编辑器，支持实时预览和流程书写，可惜新版本收费了

而博客平台一般分为两类，一种是轻量化的，只负责渲染文档不提供编辑器，代表产品：

Hexo
Vitepress
HuGo

一种是内容管理系统软件，相对上面这些比较重，初期涉及到数据库和手动部署，拥有自己的编辑器，代表产品：

WordPress
GHost

和很多在线平台一样，Notion和语雀也同样存在图片防盗链的问题，直接将写作平台的图片链接放到其他站点的话，会加载不出来。为了解决这个问题，Elog支持了在生成MD文件之前，将扫描到的图片上传到图床上，并对文档中的图片链接进行替换。 当前支持的图床有：

本地
腾讯云COS
阿里云OSS
Github图床
七牛云
又拍云

elog 相关配置

elog配置（语雀版）

首先安装 cli

# 使用 npm 安装 CLI
npm install @elog/cli -g

# 使用 yarn 安装 CLI
yarn global add @elog/cli

# 使用 pnpm 安装 CLI
pnpm install @elog/cli -g

成功会在目录下生成两个文件

elog.config.js配置文件和本地调试用
.elog.env环境变量配置文件

接下来需要修改一些配置

修改配置方法

本地调试：修改.elog.env 中的值elog sync -e .elog.env

这里需要特别注意，需要的三种信息

login：用户名（不是很长的地址，是最后的用户名）
repo：知识库（不是很长的地址，只是最后的知乎库名）
token：登录 token（需要高级会员）
- 也可以用账户&密码登录，但是可能存在 github 解析了大量美国 ip 到语雀
  - 可能引发安全问题

GitHub 图床配置

需要在 elog.config.js 文件中修改 image 部分为 github，且写好正确的 branch

然后需要去.elog.env 中设置 github 的信息，上面文章给出了不再赘述

这里有时候上传图片会失败，因为是传到 github，可以设置一个终端代理即可

Elog 操作

同步文章elog sync -e .elog.env

清理文章、上次同步缓存、上次同步时间elog clean

elog 上传目录设置

elog.config.js 文件中修改 deploy

deploy: {
    platform: 'local',
    local: {
      outputDir: './source/_posts',
      filename: 'title',
      format: 'markdown',
      frontMatter: {
        enable: true,
        include: [], // 只输出include包含的属性
        exclude: [], // 不输出exclude包含的属性
        default:{
          title: 'test',
          categories: '安全基础',
          author: 'godice'
        }
      }

elog 默认路径设置

elog 默认生成的文件是在./docs 中，去 config 中改到你想要的位置

我这里改为了./source/_posts就会自动上传到博客主页中

Next 目录组织和相关配置

目录设置

需求：
- 1 在侧面导航栏的分类页面下设置多个种类
- 2 点击某个种类进去使用时间轴记录上传的文档
操作：
- 1 在主题 config 中取消categories 的注释
- 2 在hexo new page categories（创建 hexo/source/categories 目录）
- 3 修改hexo/source/categories 下的 index.md 文件
- 4 在hexo/source/_post/中上传文件：修改其 yaml font matter 即可自动分类
  - yaml font matter 可以理解为为 md 开头最顶上的一个注释内容
  - 在标题 2.7 中我们已经默认设置上传路径为 post 了，所以只需要进去分类即可
    - 注意：这里不需要做额外设置，在 md 中添加的新分类，会自动添加到分类下的 index.md 中
      - 且会自动生成超链接

1 取消注释

2 创建目录hexo new page categories

3 修改 index.md 文件为如下：

---
title: categories
date: 2024-12-12 22:59:52
type: categories
---

4 上传文件 test.md 到hexo/source/_post/中

---
title: 个性化设置Hexo博客的NexT主题
tags:
  - Hexo
  - NexT
categories:
  - - Hexo搭建与使用
abbrlink: 61230
date: 2024-02-01 10:51:56
---

将这个文件放入hexo/source/_post/中，会自动完成以下事项：
1在目录中自动生成"Hexo搭建与使用"这个分类
2点击这个分类进去，会显示所有分类为"Hexo搭建与使用"分类的文章
（且展示方式为时间轴方式）
3本文章在分类"Hexo搭建与使用"中的名字会被命名为"个性化设置Hexo博客的NexT主题"

效果如下

点击进入 Hexo 搭建与使用分类

总结

因此，以后上传文件就只需要做两个操作
- 1 用 elog 命令elog sync -e .elog.env会上传改动了的文件到hexo/source/_post
- 2 去 _post自行修改文章分类
达到的效果：
- 1 文章会自动归档
- 2 会在分类下自动生成新的分类
- 3 点击每个分类进去都是用时间轴展示的

注意：我发现配置了站点目录以后，站点会自动生成目录，就不需要在语雀再手打了

（不然会生成双重目录）

杂项修改

命令行全局代理

问题：在用 elog 上传文件时偶尔会出现，上传失败的问题，因为用的 github 作图床

需要给命令行配置一个全局代理

我这里提供一个最简单的方法：

1 在 clash 代理——全局模式

（注意，这里尽量选香港节点，不然访问语雀的 api 也会有问题）

2clash——主页——TUN 模式（开启）

显示摘要

如果要只显示摘要，就在博文的md文件中想要隐藏的内容上方，添加<!–more–>

SEO 优化

建议这三个参考文档的优化都做一下

SEO优化参考（初级）

超详细SEO（建议看这个）

详细SEO（包含高级SEO优化）

**特别注意：**写文章题目的时候不要用符号&会被识别为 html 实体编码，导致 sitemap 解析错误

（下面写了百度的登记，google、必应、搜狗也是类似的，不再赘述）

在详细SEO（包含高级SEO优化）这个参考文档中有，遇到问题可以查看

百度验证踩坑

在向百度站长网站，登记自己的网站的时候，需要验证网站是自己的
有两种验证方式：都是上传一个文件到网站根目录下
由于 hexo 会自动编译其中的文件，所以会验证失败
- 1：把百度给的文件放在 public 文件下
- 2：去网站配置文件中，设置跳过编译的文件名

1 2	skip_render: - baidu_verify_codeva-xxxxx.html

（我后续选择的 token 提交）

百度通过 api 主动提交链接

（首先你需要提交网站，然后验证网站是自己的）

百度站长平台：

然后

安装插件
npm install hexo-baidu-url-submit --save
在站点配置文件种增加
baidu_url_submit:
  count: 1 ## 提交最新的一个链接
  host: godice.top ## 在百度站长平台中注册的域名
  token: your_token ## 请注意这是您的秘钥，所以请不要把博客源代码发布在公众仓库里!
  path: baidu_urls.txt ## 文本文档的地址， 新链接会保存在此文本文档里

需要设置url值为包含是百度站长平台注册的域名
url: https://godice.top
permalink: :layout/:title.html

加入新的deployer:
deploy:
- type: git ## 这一条是原来有的，但在前面加了个 -, 不然会报错的
  repo: git@github.com:duheweb/duheweb.github.io.git
  branch: master
- type: baidu_url_submitter   ## 这一条是新加的  注意前面有个 -, 不然会报错的

然后执行 hexo generate 的时候，就会自动推送

给出站链接添加nofollo标签

网络爬虫可能在搜索当前页面的所有链接时，跳到别的网站回不来了。因此，需要nofollow标签发挥作用。
nofollow标签是由谷歌领头创新的一个“反垃圾链接”的标签，并被百度、yahoo等各大搜索引擎广泛支持，引用nofollow标签的目的是：用于指示搜索引擎不要追踪（即抓取）网页上带有nofollow属性的任何出站链接，以减少垃圾链接的分散网站权重。

安装nofollow插件npm install hexo-autonofollow --save

该插件会将博客中的出站链接自动加上nofollow属性，例外请在站点配置文件_config.xml中添加如下字段

nofollow:
  enable: true
  exclude:
  - www.zhihu.com

然后可以过一天再去 google、bing、baidu 搜索自己的网站site:godice.top

todo

1 现在国内访问 github 还是偶尔有问题，需要魔法
- 可以做一个 cdn 加速

上传总结

1 直接用 elog 同步修改后的文章

1	elog sync -e .elog.env

2 将上传后 elog 自动生成的 font master 复制到语对应文章中，添加分类

（时间、categories、description 都可以自定义——如果不自定义的话，下次修改后上传又会被覆盖）

---
title: 全网最详细Hexo+next博客搭建&语雀+github图床+elog全自动化上传&SEO优化&各种优化&leancloud+Waline评论系统
urlname: rvzym5p0106de7qi
date: '2024-12-12 11:24:01'
updated: '2024-12-13 10:30:24'
author: godice
categories: 个人博客搭建
cover: >-
  https://cdn.nlark.com/yuque/0/2024/png/47779600/1733815405874-df3274f4-5621-4c0c-b606-98ba126dad93.png
description: "博客部署：Hexo+next8 部署到 github 并设置自购域名解析个性化配置：超级完整的个性化配置评论系统：leancloud+waline+versel 图床：PicGo+Github\t同步问题：elog（自动化批量上传） SEO 优化\t导航栏配置......参考文档..."
abbrlink: 61389
---

注意：每次重新 hexo g -d 后需要去 github 重设一下域名解析。