编程博客

发布日期: 2025-11-15

更新日期: 2026-05-05

文章字数: 5.1k

阅读时长: 24 分

环境部署

Hexo版本：8.1.1，Hexo GitHub

Matery版本：v2.0.0，hexo-theme-matery GitHub

Hexo其他主题：Hexo主题

hexo + GitHub Pages + Matery主题部署

参考了下面两位大佬的博客：

Hexo+Github-搭建个人博客

GitHub+Hexo 搭建个人网站详细教程

Cloudflare Pages部署

参考：几个免费的静态网站托管平台对比，基于Hexo的matery主题搭建博客增强部署篇4

教程可参考：hexo + github + cloudflare，有手就行的个人博客免费部署（文章里的域名非必要）

博客测速工具：站长测速工具，可以知道你的网站在不同地区的不同网络环境下的打开速度。

新版本的UI需要点击下面的“Get sttarted”来创建Pages。

博客功能完善

博客基本功能

如果使用Matery主题，推荐大家先根据Matery主题的文档进行配置：hexo-theme-matery博客基本功能

代码块高亮、行数问题

使用自带代码块功能

使用Hexo本身自带的prismjs即可，相关的文件在如下路径：根目录\node_modules\prismjs。如果安装过hexo-prism-plugin 的插件，那么你需要执行 npm uninstall hexo-prism-plugin 来卸载掉它，否则生成的代码中会有 { 和 } 的转义字符。参考链接，建议还是使用Hexo的。Hexo语法高亮参考链接

~~所支持的语言可在如下路径查看：根目录\node_modules\prismjs\components。绝大部分语言都支持。~~

后来发现好像直接使用自带的生成出来的格式有问题，不知道是主题导致还是怎么回事。后来解决方案就是把syntax_highlighter修改为prismjs，并且在prismjs的选项中增加一个enable选项，因为主题会读取这个字段，如果读到了这个字段为true就会使用主题的prismjs。

Hexo自己的_config.yml中的默认配置如下：

syntax_highlighter: highlight.js
highlight:
  line_number: true
  auto_detect: false
  tab_replace: ''
  wrap: true
  hljs: false
prismjs:
  preprocess: true
  line_number: true
  tab_replace: ''

修改成如下就可以了。

syntax_highlighter: prismjs # or highlight.js
highlight:
  line_number: true
  auto_detect: false
  tab_replace: ''
  wrap: true
  hljs: false
prismjs:
  enable: true
  preprocess: true
  line_number: true
  tab_replace: ''

Matery的代码块部分

介绍一下Matery的代码块部分的逻辑实现，有需要的可以自己动手扩展。

新版本的配置中，在Hexo的配置prismjs下面没有了enable: true/false的选项，而Matery的代码读取不到enable值，所以Matery主题的prismjs将不会生效。具体可见下面代码的第4行判断。

Matery的代码块的具体代码文件在根目录\themes\matery\layout\_partial\codeblock.ejs。

codeblock.ejs代码如下：

<!-- 代码块功能依赖 -->
<script type="text/javascript" src="<%- theme.jsDelivr.url %><%- url_for(theme.libs.js.codeblock) %>"></script>

<% if (config.prismjs && config.prismjs.enable) { %>
  <!-- 是否加载使用自带的 prismjs. -->
  <script type="text/javascript" src="<%- theme.jsDelivr.url %><%- url_for(theme.libs.js.prism) %>"></script>
<% } %>

<!-- 代码语言 -->
<% if (theme.code.lang) { %>
<script type="text/javascript" src="<%- theme.jsDelivr.url %><%- url_for(theme.libs.js.codelang) %>"></script>
<% } %>

<!-- 代码块复制 -->
<% if (theme.code.copy) { %>
<script type="text/javascript" src="<%- theme.jsDelivr.url %><%- url_for(theme.libs.js.codecopy) %>"></script>
<% } %>

<!-- 代码块收缩 -->
<% if (theme.code.shrink) { %>
<script type="text/javascript" src="<%- theme.jsDelivr.url %><%- url_for(theme.libs.js.codeshrink) %>"></script>
<% } %>

Matery的_config.yml的代码块配置如下：

# 代码块相关
code:
  lang: true # 代码块是否显示名称
  copy: true # 代码块是否可复制
  shrink: true # 代码块是否可以收缩
  break: false # 代码是否折行

可以看到上面代码的判断条件正是Matery的_config.yml的代码块配置。当然这些配置依然会生效，因为他们的判断条件能够通过，不依赖Hexo的_config.yml文件。

这几个配置用到的js文件就在根目录\themes\matery\source\libs\codeBlock下面。

所以，如果你想扩展功能插件，那么你可以：

在_config.yml添加配置。
在codeBlock目录中添加需要执行的js文件。
在codeblock.ejs中添加代码。

js文件可以从prism官网下载，你可以在这个网站选择想要的插件和语言。还有一个获取js文件的办法就是复制Hexo本身自带的一些js文件出来，Hexo可能没有留配置关键字，那么可以把js文件复制到Matery中作为插件使用。Hexo的prims的js文件位置是：根目录\node_modules\prismjs。

选中代码高度问题

请参考这个Issue：hexo 7.3 代码块显示问题

“关于”界面中个人介绍支持换行

找到about.ejs文件中如下代码，把<%= 替换成 <%-。<%- %> 是“不转义输出”。

<%= theme.profile.introduction %>

替换后

<%- theme.profile.introduction %>

然后在主题_config的 introduction中需要换行的地方加上<br>标签。

introduction: xxxx。<br> xxxx。<br>xxxx。

使用渐变色半透明标题栏和进度条

打开matery.css文件，修改.bg-color和.progress-bar里面的渐变色，下面是我修改之后的渐变色。可以从配色卡上面找到你喜欢的渐变色方案。

.bg-color {
    background: linear-gradient(
        to right,
        rgba(18, 194, 233, 0.45),
        rgba(196, 113, 237, 0.45),
        rgba(246, 79, 89, 0.45)
    );
}

.progress-bar {
    height: 3px;
    position: fixed;
    bottom: 0;
    z-index: 300;
    background: linear-gradient(
        to right,
        rgba(18, 194, 233, 0.9),
        rgba(196, 113, 237, 0.9),
        rgba(246, 79, 89, 0.9)
    );
    opacity: 0.85;
}

在标题栏中使用模糊效果。在my.css文件夹添加下面的代码。

/* 头部导航栏相关调整 */
/* 顶部（透明/隐藏态）不要渐变、不要模糊、不要阴影 */
#headNav.nav-transparent{
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* 非透明态（滚动后显示）才启用渐变 + 模糊（如果你之前加过 blur 就放这里） */
#headNav.bg-color:not(.nav-transparent){
  background-image: linear-gradient(to right,
    rgba(18, 194, 233, 0.45),
    rgba(196, 113, 237, 0.45),
    rgba(246, 79, 89, 0.45)
  ) !important;

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

找到bg-cover-content.ejs文件，找到下面这段代码，把用到banner图片的地方替换成.webp。建议压缩并使用webp格式的文件，以减小文件体积。免费压缩并转换格式的网站：tinypng

<% if (theme.banner.enable) { %>
<script>
    // 每天切换 banner 图.  Switch banner image every day.
    var bannerUrl = "<%- theme.jsDelivr.url %><%- url_for('/medias/banner/') %>" + new Date().getDay() + '.webp';
    $('.bg-cover').css('background-image', 'url(' + bannerUrl + ')');
</script>
<script>
    <% if (theme.banner.enable && theme.banner.random) { %>
      var bannerUrl = "<%- theme.jsDelivr.url %><%- url_for('/medias/featureimages/') %>" + Math.floor(Math.random() * <%- theme.featureImages.length %>) + '.jpg';
    <% } else { %>
      // 每天切换 banner 图.  Switch banner image every day.
      var bannerUrl = "<%- theme.jsDelivr.url %><%- url_for('/medias/banner/') %>" + new Date().getDay() + '.webp';
    <% } %>
    $('.bg-cover.about-cover').css('background-image', 'url(' + bannerUrl + ')');

</script>
<% } else { %>
<script>
    $('.bg-cover').css('background-image', 'url(<%- theme.jsDelivr.url %><%- url_for('/medias/banner/0.webp') %>)');
</script>
<% } %>

修改音乐播放界面音乐名字字体颜色

找到APlayer.min.css中的 .aplayer-title。

.aplayer-title{font-size:14px}

修改为

.aplayer-title{font-size:14px;color:#666}

修改前：

修改后：

调整主页面滤镜颜色和文字效果

自带的滤镜颜色太重不好看，如果直接去掉的话又会让画面很乱，不能突出中间的字。所以需要调整滤镜的颜色和透明度，以及给文字添加阴影。

在matery.css找到下面的代码并修改成如下：

@-webkit-keyframes rainbow {
    0%, 100% {
        background: rgba(88, 76, 160, 0.55);
        background: linear-gradient(45deg, rgba(88, 76, 160, 0.55) 0%, rgba(88, 76, 160, 0.40) 100%);
        background: -moz-linear-gradient(135deg, rgba(88, 76, 160, 0.55) 0%, rgba(88, 76, 160, 0.40) 100%);
        background: -webkit-linear-gradient(135deg, rgba(88, 76, 160, 0.55) 0%, rgba(88, 76, 160, 0.40) 100%);
    }

    16% {
        background: rgba(63, 81, 181, 0.55);
        background: linear-gradient(45deg, rgba(63, 81, 181, 0.55) 0%, rgba(63, 81, 181, 0.40) 100%);
        background: -moz-linear-gradient(135deg, rgba(63, 81, 181, 0.55) 0%, rgba(63, 81, 181, 0.40) 100%);
        background: -webkit-linear-gradient(135deg, rgba(63, 81, 181, 0.55) 0%, rgba(63, 81, 181, 0.40) 100%);
    }

    32% {
        background: rgba(33, 150, 243, 0.55);
        background: linear-gradient(45deg, rgba(33, 150, 243, 0.55) 0%, rgba(33, 150, 243, 0.40) 100%);
        background: -moz-linear-gradient(135deg, rgba(33, 150, 243, 0.55) 0%, rgba(33, 150, 243, 0.40) 100%);
        background: -webkit-linear-gradient(135deg, rgba(33, 150, 243, 0.55) 0%, rgba(33, 150, 243, 0.40) 100%);
    }

    48% {
        background: rgba(0, 188, 212, 0.55);
        background: linear-gradient(45deg, rgba(0, 188, 212, 0.55) 0%, rgba(0, 188, 212, 0.40) 100%);
        background: -moz-linear-gradient(135deg, rgba(0, 188, 212, 0.55) 0%, rgba(0, 188, 212, 0.40) 100%);
        background: -webkit-linear-gradient(135deg, rgba(0, 188, 212, 0.55) 0%, rgba(0, 188, 212, 0.40) 100%);
    }

    64% {
        background: rgba(3, 169, 244, 0.55);
        background: linear-gradient(45deg, rgba(3, 169, 244, 0.55) 0%, rgba(3, 169, 244, 0.40) 100%);
        background: -moz-linear-gradient(135deg, rgba(3, 169, 244, 0.55) 0%, rgba(3, 169, 244, 0.40) 100%);
        background: -webkit-linear-gradient(135deg, rgba(3, 169, 244, 0.55) 0%, rgba(3, 169, 244, 0.40) 100%);
    }

    80% {
        background: rgba(103, 58, 183, 0.55);
        background: linear-gradient(45deg, rgba(103, 58, 183, 0.55) 0%, rgba(103, 58, 183, 0.40) 100%);
        background: -moz-linear-gradient(135deg, rgba(103, 58, 183, 0.55) 0%, rgba(103, 58, 183, 0.40) 100%);
        background: -webkit-linear-gradient(135deg, rgba(103, 58, 183, 0.55) 0%, rgba(103, 58, 183, 0.40) 100%);
    }
}

@keyframes rainbow {
        0%, 100% {
        background: rgba(88, 76, 160, 0.55);
        background: linear-gradient(45deg, rgba(88, 76, 160, 0.55) 0%, rgba(88, 76, 160, 0.40) 100%);
        background: -moz-linear-gradient(135deg, rgba(88, 76, 160, 0.55) 0%, rgba(88, 76, 160, 0.40) 100%);
        background: -webkit-linear-gradient(135deg, rgba(88, 76, 160, 0.55) 0%, rgba(88, 76, 160, 0.40) 100%);
    }

    16% {
        background: rgba(63, 81, 181, 0.55);
        background: linear-gradient(45deg, rgba(63, 81, 181, 0.55) 0%, rgba(63, 81, 181, 0.40) 100%);
        background: -moz-linear-gradient(135deg, rgba(63, 81, 181, 0.55) 0%, rgba(63, 81, 181, 0.40) 100%);
        background: -webkit-linear-gradient(135deg, rgba(63, 81, 181, 0.55) 0%, rgba(63, 81, 181, 0.40) 100%);
    }

    32% {
        background: rgba(33, 150, 243, 0.55);
        background: linear-gradient(45deg, rgba(33, 150, 243, 0.55) 0%, rgba(33, 150, 243, 0.40) 100%);
        background: -moz-linear-gradient(135deg, rgba(33, 150, 243, 0.55) 0%, rgba(33, 150, 243, 0.40) 100%);
        background: -webkit-linear-gradient(135deg, rgba(33, 150, 243, 0.55) 0%, rgba(33, 150, 243, 0.40) 100%);
    }

    48% {
        background: rgba(0, 188, 212, 0.55);
        background: linear-gradient(45deg, rgba(0, 188, 212, 0.55) 0%, rgba(0, 188, 212, 0.40) 100%);
        background: -moz-linear-gradient(135deg, rgba(0, 188, 212, 0.55) 0%, rgba(0, 188, 212, 0.40) 100%);
        background: -webkit-linear-gradient(135deg, rgba(0, 188, 212, 0.55) 0%, rgba(0, 188, 212, 0.40) 100%);
    }

    64% {
        background: rgba(3, 169, 244, 0.55);
        background: linear-gradient(45deg, rgba(3, 169, 244, 0.55) 0%, rgba(3, 169, 244, 0.40) 100%);
        background: -moz-linear-gradient(135deg, rgba(3, 169, 244, 0.55) 0%, rgba(3, 169, 244, 0.40) 100%);
        background: -webkit-linear-gradient(135deg, rgba(3, 169, 244, 0.55) 0%, rgba(3, 169, 244, 0.40) 100%);
    }

    80% {
        background: rgba(103, 58, 183, 0.55);
        background: linear-gradient(45deg, rgba(103, 58, 183, 0.55) 0%, rgba(103, 58, 183, 0.40) 100%);
        background: -moz-linear-gradient(135deg, rgba(103, 58, 183, 0.55) 0%, rgba(103, 58, 183, 0.40) 100%);
        background: -webkit-linear-gradient(135deg, rgba(103, 58, 183, 0.55) 0%, rgba(103, 58, 183, 0.40) 100%);
    }
}

为了突出文字，需要向中间的标题和副标题添加阴影效果。找到my.css文件，在里面添加下面的代码。

/* 封面大标题 */
.bg-cover .brand .title,
.bg-cover .title {
  text-shadow: 0 3px 14px rgba(0, 0, 0, 0.55);
}

/* 封面副标题/描述 */
.bg-cover .brand .description,
.bg-cover .description,
.bg-cover #subtitle {
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.50);
  opacity: 0.95;
}

/* 封面按钮（如“开始阅读/阅读更多”） */
.bg-cover .cover-btns .btn {
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}

404页面美化

找到404.ejs文件。用下面的代码替换。最终样式如下点击查看404样式。

ps：本地想查看404页面的话，需要通过http://localhost:4000/404访问。

<style>
  /* don't remove. */
  .about-cover { height: 100vh; }

  footer { display: none; }

  /* 404 居中容器 */
  .notfound-wrap{
    height: 100%;
    display: flex;
    align-items: center;
  }

  /* 玻璃卡片 */
  .notfound-card{
    padding: 42px 34px;
    border-radius: 18px;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.22);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 18px 45px rgba(0,0,0,.28);
  }

  /* 大号 404 */
  .notfound-code{
    font-size: 72px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 2px;
    color: rgba(255,255,255,.95);
    text-shadow: 0 10px 28px rgba(0,0,0,.45);
    margin-bottom: 12px;
  }

  .notfound-title{
    font-size: 26px;
    font-weight: 700;
    color: rgba(255,255,255,.92);
    text-shadow: 0 8px 22px rgba(0,0,0,.35);
    margin-bottom: 10px;
  }

  .notfound-sub{
    font-size: 15px;
    color: rgba(255,255,255,.78);
    text-shadow: 0 6px 18px rgba(0,0,0,.30);
    margin-bottom: 22px;
  }

  .notfound-actions{
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 10px;
  }

  /* 按钮统一风格 */
  .notfound-actions .btn,
  .notfound-actions .btn-flat{
    border-radius: 999px;
    height: 38px;
    line-height: 38px;
    padding: 0 18px;
  }

  /* 主按钮：渐变 */
  .notfound-actions .btn-primary{
    color: #fff !important;
    background: linear-gradient(to right,
      rgba(18, 194, 233, 0.85),
      rgba(196, 113, 237, 0.85),
      rgba(246, 79, 89, 0.85)
    ) !important;
    box-shadow: 0 10px 22px rgba(0,0,0,.22);
  }

  /* 次按钮：半透明描边 */
  .notfound-actions .btn-ghost{
    color: rgba(255,255,255,.92) !important;
    background: rgba(255,255,255,.10) !important;
    border: 1px solid rgba(255,255,255,.25);
    box-shadow: 0 10px 22px rgba(0,0,0,.14);
  }

  /* 描述小字 */
  .notfound-desc{
    margin-top: 14px;
    font-size: 12px;
    color: rgba(255,255,255,.60);
  }

  @media (max-width: 600px){
    .notfound-card{ padding: 34px 22px; border-radius: 16px; }
    .notfound-code{ font-size: 56px; }
    .notfound-title{ font-size: 22px; }
  }
</style>

<div class="bg-cover pd-header about-cover">
  <div class="container notfound-wrap">
    <div class="row" style="width:100%; margin:0;">
      <div class="col s12 m10 offset-m1 l8 offset-l2 center-align">
        <div class="notfound-card">
          <div class="notfound-code">404</div>
          <div class="notfound-title">页面走丢了</div>
          <div class="notfound-sub">
            你访问的地址不存在，试试搜索，或者回到首页继续逛～
          </div>

          <div class="notfound-actions">
            <a href="/" class="btn btn-primary waves-effect waves-light" target="_blank">
              <i class="fas fa-home" style="margin-right:6px;"></i>返回首页
            </a>

            <!-- 打开右上角的搜索弹窗（Matery 默认就是 #searchModal） -->
            <a href="#searchModal" class="btn btn-ghost modal-trigger waves-effect waves-light">
              <i class="fas fa-search" style="margin-right:6px;"></i>搜索一下
            </a>

            <a href="javascript:history.back();" class="btn btn-ghost waves-effect waves-light">
              <i class="fas fa-arrow-left" style="margin-right:6px;"></i>返回上一页
            </a>
          </div>

          <div class="notfound-desc">
            <%= page.description %>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<% if (theme.banner.enable) { %>
  <script>
    // 每天切换 banner 图.  Switch banner image every day.
    var bannerUrl = "<%- theme.jsDelivr.url %><%- url_for('/medias/banner/') %>" + new Date().getDay() + '.webp';
    $('.bg-cover').css('background-image', 'url(' + bannerUrl + ')');
  </script>
<% } else { %>
  <script>
    $('.bg-cover').css('background-image', 'url(<%- theme.jsDelivr.url %><%- url_for('/medias/banner/0.webp') %>)');
  </script>
<% } %>

滚动条美化

在my.css中添加下面的代码。

::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(
    to bottom,
    rgba(18, 194, 233, 0.7),
    rgba(196, 113, 237, 0.7),
    rgba(246, 79, 89, 0.7)
  );
  border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(
    to bottom,
    rgba(18, 194, 233, 1),
    rgba(196, 113, 237, 1),
    rgba(246, 79, 89, 1)
  );
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(196, 113, 237, 0.7) transparent;
}

博客优化

测试网站打开速度以及给出建议的网站：https://pagespeed.web.dev/

通过强缓存优化重复访问的速度

关于浏览器缓存可参考：

浏览器有哪几种缓存，各种缓存的优先级是什么样的？

彻底理解浏览器的缓存机制

对于已经打开过的页面，加载过的资源可以缓存下来，避免再次打开的时候重复下载资源。

浏览器请求默认会开启协商缓存，但是请求仍然会消耗时间和流量。而对于静态博客，内容很少变更，所以可以打开强缓存，短期内重复访问直接免去向服务器请求这一步，以增加页面的流畅性。

对于不同的静态博客托管平台有不同的开启方法。

Cloudflare Pages开启强缓存的方法如下：

在你的博客根目录的source文件夹中新建_headers文件，没有后缀，内容参考下方。
在hexo的_config文件中的include下添加_headers，这样就会在执行生成的时候会把_headers文件拷贝到public的目录下。

_config参考：

# Include / Exclude file(s)
## include:/exclude: options only apply to the 'source/' folder
include:
  _headers
exclude:
ignore:

关于_header文件如何配置的文档 Cloudflare Pages Headers

_headers文件内容参考，可以根据自己的目录结构进行调整：

ps:3600=1小时，86400=24小时，2592000=1个月

/*
  Cache-Control: public, max-age=3600

/search.xml
  ! Cache-Control
  Cache-Control: public, max-age=3600

/favicon.*
  ! Cache-Control
  Cache-Control: public, max-age=2592000

/css/*
  ! Cache-Control
  Cache-Control: public, max-age=86400

/js/*
  ! Cache-Control
  Cache-Control: public, max-age=86400

/medias/*
  ! Cache-Control
  Cache-Control: public, max-age=86400

/libs/*
  ! Cache-Control
  Cache-Control: public, max-age=2592000

图片懒加载

根目录执行下面的命令：

npm install hexo-lazyload-image --save
#或者使用yarn
yarn add hexo-lazyload-image

在站点配置文件下添加下面的代码：

lazyload:
  enable: true  # 是否开启图片懒加载
  onlypost: false  # 是否只对文章的图片做懒加载
  loadingImg: # eg ./images/loading.gif
  isSPA: false # optional. For performance considering, isSPA is added. If your theme is a SPA page, please set it as true
  preloadRatio: 3 # optional, default is 1

loading图可以使用svg图片，文件非常小，可能只有几kb，甚至不到1kb。推荐两个svg loading图的网站：svgbackgrounds、samherbert

这个插件和matery主题有冲突，点击预览文章中的图片，放大后显示的是Loading图。

网上的解决方案如下，不过有个问题，就是首页左上角博客名字的链接可能也会被替换成图片地址，导致跳转错误。

查看大图，发现全部为 loading 加载图，原因是因为懒加载插件与 lightgallery 插件冲突，解决办法如下：

修改主题文件下的 matery.js，在 108 行左右添加以下代码：
$(document).find('img[data-original]').each(function(){
        $(this).parent().attr("href", $(this).attr("data-original"));
});

所以应该只替换需要点击放大的图片的链接即可，查看主题matery.js的articleInit方法，可以看出class中带有img-item的才是需要替换图片链接的元素，所以把上面的代码修改成一下：

// 如果是懒加载，并且是可以放大点击的图片，需要替换链接
$(document).find('img[data-original]').each(function(){
    if($(this).parent().hasClass('img-item')){
        $(this).parent().attr("href", $(this).attr("data-original"));
    }
});

SEO优化

使用sitemap方式推送

安装 sitemap 插件生成站点地图文件:

npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save  #百度专用

在博客目录的_config.yml中添加如下代码

# 通用站点地图
sitemap:
  path: sitemap.xml

# 百度站点地图
baidusitemap:
  path: baidusitemap.xml

安装完成后执行hexo g就会在public的目录下生成sitemap文件。

URL路径优化

一般来说，SEO搜索引擎优化认为，网站的最佳结构是 用户从首页点击三次就可以到达任何一个页面，但是我们使用Hexo编译的站点结构的URL是：域名/年/月/日/文章标题四层的结构，这样的URL结构很不利于SEO，爬虫就会经常爬不到我们的文章，于是，我们需要优化一下网站文章的URL

修改Hexo的配置文件中的permalink：

permalink: posts/:title.html

robots.txt文件

robots.txt文件是网站根目录下的一个文本文件，它的主要作用是告诉搜索引擎爬虫（蜘蛛）哪些页面可以抓取，哪些页面不应该抓取，以管理爬虫行为、优化服务器负载、保护隐私信息和避免重复内容，从而更好地控制网站内容的可见性。它通过Disallow（禁止）和Allow（允许）指令来指定规则，是网站SEO（搜索引擎优化）管理的重要工具。

User-agent: *           # 适用于所有爬虫
Disallow: /admin/       # 禁止访问/admin/目录
Disallow: /search?q=  # 禁止访问带?q=的搜索结果
Allow: /images/         # 允许访问/images/目录
Sitemap: https://www.example.com/sitemap.xml # 指向网站地图

比如我的robots.txt如下

User-agent: *
Allow: /
Allow: /posts/
Allow: /archives/
Allow: /categories/
Allow: /tags/
Allow: /about/
Allow: /medias/
Disallow: /js/
Disallow: /css/
Disallow: /libs/
Disallow: /fonts/
Disallow: /contact/
Sitemap: https://替换为你的域名/sitemap.xml
Sitemap: https://替换为你的域名/baidusitemap.xml

通过Google查看

Google Search Console

本地搜索优化

本地搜索的DB文件search.xml会随着文章的增多越来越大，默认设置下，这个文件里面会包含所有的文章内容。如果没有搜索文章内容的必要的话，可以不包含文章内容。

search:
  path: search.xml
  field: post
  content: false

参考

草莓多多

https://caomeiduoduo.pages.dev/posts/hexo-jia-matery-zhu-ti-bu-shu-bo-ke-ji-lu.html

本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源草莓多多 !

Hexo 博客 Matery主题

测试文章

测试文章的简介

2025-11-15 测试

测试临时文章

《代码整洁之道》读书笔记

2024-09-05 编程 C#

C# 笔记

Hexo加Matery主题部署博客记录

环境部署

hexo + GitHub Pages + Matery主题部署

Cloudflare Pages部署

博客功能完善

博客基本功能

代码块高亮、行数问题

使用自带代码块功能

Matery的代码块部分

选中代码高度问题

“关于”界面中个人介绍支持换行

使用渐变色半透明标题栏和进度条

banner图使用webp格式并压缩

修改音乐播放界面音乐名字字体颜色

调整主页面滤镜颜色和文字效果

404页面美化

滚动条美化

博客优化

通过强缓存优化重复访问的速度

图片懒加载

SEO优化

使用sitemap方式推送

URL路径优化

robots.txt文件

通过Google查看

本地搜索优化

参考

Hexo加Matery主题部署博客记录

环境部署

hexo + GitHub Pages + Matery主题 部署

Cloudflare Pages部署

博客功能完善

博客基本功能

代码块高亮、行数问题

使用自带代码块功能

Matery的代码块部分

选中代码高度问题

“关于”界面中个人介绍支持换行

使用渐变色半透明标题栏和进度条

banner图使用webp格式并压缩

修改音乐播放界面音乐名字字体颜色

调整主页面滤镜颜色和文字效果

404页面美化

滚动条美化

博客优化

通过强缓存优化重复访问的速度

图片懒加载

SEO优化

使用sitemap方式推送

URL路径优化

robots.txt文件

通过Google查看

本地搜索优化

参考

hexo + GitHub Pages + Matery主题部署