Hexo 博客性能优化与 SEO 提升全攻略

Hexo 博客性能优化

1. 减少静态资源体积

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# _config.yml 配置优化
minify:
  html:
    enable: true
  css:
    enable: true
    exclude:
      - '*.min.css'
  js:
    enable: true
    exclude:
      - '*.min.js'
  image:
    enable: true

2. 图片优化策略

1
2
3
4
5
6
7
8
# 使用图片懒加载
lazyload:
  enable: true
  field: site

# 配置图片 CDN
cdn:
  image: https://your-cdn-domain.com/

3. 代码压缩与合并

安装相关插件：

1
npm install hexo-filter-optimize --save

配置 hexo-filter-optimize：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# _config.yml
filter_optimize:
  enable: true
  css:
    exclude:
      - '*.min.css'
  js:
    exclude:
      - '*.min.js'
  html:
    enable: true
    exclude:
  image:
    enable: true
    interlaced: false
    multipass: false
    optimizationLevel: 2
    pngquant: false
    progressive: false

SEO 优化技巧

1. 基础 SEO 配置

1
2
3
4
5
6
7
8
9
10
# _config.yml
url: https://woi-blog.com
permalink: :year/:month/:day/:title/
permalink_defaults:
pretty_urls:
  trailing_index: true
  trailing_html: true

# 网站元信息
meta_generator: true

2. 站点地图生成

1
2
npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save
1
2
3
4
5
6
# _config.yml
sitemap:
  path: sitemap.xml

baidusitemap:
  path: baidusitemap.xml

3. 结构化数据配置

在主题配置中添加 JSON-LD：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!-- 文章页结构化数据 -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "headline": "{{ page.title }}",
  "datePublished": "{{ page.date }}",
  "dateModified": "{{ page.updated }}",
  "author": {
    "@type": "Person",
    "name": "woI"
  },
  "description": "{{ page.description }}"
}
</script>

用户体验优化

1. PWA 支持

1
npm install hexo-pwa --save
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
# _config.yml
pwa:
  enable: true
  manifest:
    name: woI's Blog
    short_name: woiBlog
    theme_color: '#425AEF'
    background_color: '#ffffff'
    display: 'standalone'
    scope: '/'
    start_url: '/'
    icons:
      - src: '/img/icons/icon-72x72.png'
        sizes: '72x72'
        type: 'image/png'
      - src: '/img/icons/icon-96x96.png'
        sizes: '96x96'
        type: 'image/png'
      - src: '/img/icons/icon-128x128.png'
        sizes: '128x128'
        type: 'image/png'
      - src: '/img/icons/icon-144x144.png'
        sizes: '144x144'
        type: 'image/png'
      - src: '/img/icons/icon-152x152.png'
        sizes: '152x152'
        type: 'image/png'
      - src: '/img/icons/icon-192x192.png'
        sizes: '192x192'
        type: 'image/png'
      - src: '/img/icons/icon-384x384.png'
        sizes: '384x384'
        type: 'image/png'
      - src: '/img/icons/icon-512x512.png'
        sizes: '512x512'
        type: 'image/png'

2. 评论系统集成

1
2
3
4
5
6
7
8
9
10
11
# _config.anzhiyu.yml
comments:
  use: Twikoo
  text: true
  lazyload: false
  count: false

twikoo:
  envId: your-env-id
  region: ap-shanghai
  visitor: true

部署优化

1. GitHub Actions 自动部署

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
# .github/workflows/deploy.yml
name: Deploy to GitHub Pages

on:
  push:
    branches: [ main ]
  workflow_dispatch:

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    
    steps:
    - name: Checkout
      uses: actions/checkout@v3
      
    - name: Setup Node.js
      uses: actions/setup-node@v3
      with:
        node-version: '18'
        
    - name: Install dependencies
      run: |
        npm install
        
    - name: Build
      run: |
        npm run build
        
    - name: Deploy
      uses: peaceiris/actions-gh-pages@v3
      with:
        github_token: ${{ secrets.GITHUB_TOKEN }}
        publish_dir: ./public

2. CDN 加速配置

1
2
3
4
# _config.yml
cdn:
  third_party_provider: jsdelivr
  version: true

监控与分析

1. 网站分析工具

1
2
3
4
5
6
7
8
9
# _config.anzhiyu.yml
# Google Analytics
google_analytics: G-XXXXXXXXXX

# Baidu Analytics
baidu_analytics: xxxxxxxxxxxxxxxxxxxx

# Cloudflare Analytics
cloudflare_analytics: xxxxxxxxxxxxxxxxxxxx

2. 性能监控

1
2
3
4
5
6
7
8
<!-- 添加性能监控脚本 -->
<script>
  window.addEventListener('load', function() {
    const perfData = window.performance.timing;
    const pageLoadTime = perfData.loadEventEnd - perfData.navigationStart;
    console.log('页面加载时间：' + pageLoadTime + 'ms');
  });
</script>

总结

通过以上优化措施，你的 Hexo 博客将获得：

  • 更快的加载速度
  • 更好的 SEO 排名
  • 更佳的用户体验
  • 更稳定的部署流程

持续监控和优化是保持博客竞争力的关键。

相关工具推荐：