通过 Github Page 和 Hexo 搭建静态博客

环境准备

这是一个简洁而快速的教程，将跳过 Node.js​ npm​ Git​ Markdown​ 等基础知识，使用本教程需要有一定的 Web 开发基础

  1. 使用 Github Page 提供的方法创建一个名为 <github用户名>.github.io​ 的公开仓库，<github用户名>.github.io​ 将会展示仓库中的静态页面
  2. Hexo是一个简洁且高效的博客框架，通过它部署博客到 GitHub Page 上
  3. 新建一个文件夹，作为 Hexo 的工作目录，此文件夹并非直接作为 <github用户名>.github.io​ 仓库的内容，稍后通过 Hexo 将生成的项目推送到仓库
  4. 以下操作均在 Hexo 的工作目录下进行

安装 Hexo

  1. 全局安装 hexo-cli​​

    1
    2
    npm install -g hexo-cli
    hexo -v # 查看版本

  2. 初始化一个 Hexo 项目

    1
    2
    hexo init
    npm install

配置 Fluid 主题

安装主题，Hexo 官方收集了很多主题，前往 https://hexo.io/themes/ 挑选，这里以 Fluid 为例，主题仓库地址为 https://github.com/fluid-dev/hexo-theme-fluid，官方提供了详细的教程

  1. Hexo 5.0.0 版本以上，推荐通过 npm 直接安装

    1
    npm install --save hexo-theme-fluid

  2. 复制 fluid 的 _config.yml 内容复制到根目录下的 _config.fluid.yml​，注意不是根目录下的 ​_config.yml​

  3. 修改 Hexo 的配置文件 _config.yml​​​ 开启主题

    1
    2
    theme: fluid  # 指定主题
    language: zh-CN  # 指定语言，会影响主题显示的语言，按需修改

  4. 创建“关于页”

    1
    hexo new page about

  5. 创建成功后，编辑 Hexo 目录下 /source/about/index.md​​，添加 layout​​ 属性，这一步必须完成，并且 layout​​ 的值只能为 about​​

    1
    2
    3
    4
    5
    6
    ---
    title: about
    layout: about
    ---

    这里写关于页的正文，支持 Markdown, HTML

  6. 配置页面 title，通过修改 _config.yml​ 实现，fluid 主题默认使用 _config.yml​ 中的 title​ ，如果希望导航栏标题和页面标题不同，可以修改 _config.fluid.yml​

    1
    2
    3
    4
    5
    6
    7
    # _config.yml
    title: "博客标题"
    author: "署名"

    # _config.fluid.yml
    navbar:
      blog_title: "导航栏中的标题"

配置插件

图片压缩

  1. 利用 hexo-all-minifier 压缩所有图片

    1
    npm install hexo-all-minifier --save

  2. 配置 _config.fluid.yml​

    1
    all_minifier: true

SEO 优化（Google + Bing）

安装插件

参考教程：hexo-seo优化技巧

  1. 安装 sitemap 生成插件

    1
    npm install hexo-generator-sitemap --save

  2. 在 _config.fluid.yml​ 中添加

    1
    2
    sitemap:
     path: sitemap.xml

配置站长工具

  1. 先前往 Google Search Console 提交页面
  2. 到 Bing Webmaster Tool 导入 Google Search Console 的配置（也可以单独配置 Bing Webmaster Tool）

Google Search Console

  1. 由于作者没有自己的域名/服务器，所以选择网址前缀，请按自己的情况选择
  2. 将 Google 提供的文件放在 Hexo 的 source 目录下，重新部署即可

​image​

Bing Webmaster Tool

  1. 从 GSC 导入
  2. 如果没有配置 GSC，则单独配置 Bing Webmaster Tool

​image

本地启动

生成项目，启动本地服务器，访问 localhost:4000 查看效果

1
2
hexo generate # 生成页面 此命令可以简写为 hexo g
hexo server # 本地启动 可简写为 hexo s

部署到 Github Page

  1. 安装 hexo-deployer-git​

    1
    npm install hexo-deployer-git --save

  2. 修改 _config.yml​，添加部署平台、部署仓库、分支，main​ 表示推送到主分支，Hexo 默认会推送到 master​ 分支，Github 现在新创建的项目主分支为 main​

    1
    2
    3
    4
    5
    # Deployment
    deploy:
      type: git
      repo:
        github: https://github.com/username/username.github.io.git,main

  3. 生成站点并推送到 Github 仓库

    1
    2
    3
    hexo clean # 部署前或者配置未生效时建议执行此操作
    hexo generate
    hexo deploy

  4. 稍等片刻即可，访问 https://username.github.io/ 查看效果

创建文章

具体请参考官方教程中的写作部分，以下是两个推荐的配置项

  1. 官方提供了全局资源文件夹和文章资源文件夹，为了使用其他软件导出的 Markdown 文件夹，这里选择开启文章资源文件夹，修改 _config.yml​

    1
    post_asset_folder: true

  2. 为了方便的通过日期来管理文章，可编辑 new_post_name​ 参数来改变默认的文件名称，例如 年-月-日-标题.md​，修改 _config.yml​

    1
    new_post_name: :year-:month-:day-:title.md

总结

本教程能够让有基础的朋友快速搭建一个静态博客，具体的使用请参考官方教程

Hexo 文档：https://hexo.io/zh-cn/docs/

Fluid 文档：https://hexo.fluid-dev.com/docs/

‍

信息技术
#教程 #环境配置
通过 Github Page 和 Hexo 搭建静态博客
https://1doublehelix.github.io/blog-power-by-hexo
作者
Feizhong
发布于
2023年8月2日
许可协议