一文教你把 Hexo 博客搭建在云端

• 作者：约克
• 原文地址：https://yorkyu.cn/build-a-hexo-on-cloud-38169c3edff8.html
• 文章版权归作者所有，转载请注明出处！

一，环境准备

本教程依赖Node.js（不低于 10.13，建议使用 Node.js 12.0 及以上版本），Git，Vscode环境，Coding，腾讯云，Lean Cloud需前置安装或注册账号。

1.1. Node.js 安装

Node.js 为大多数平台提供了官方的安装程序。对于中国大陆地区用户，可以前往 淘宝 Node.js 镜像下载。

其它的安装方法：

• Windows：通过 nvs（推荐）或者 nvm 安装。
• Mac：使用 Homebrew 或 MacPorts 安装。
• Linux（DEB/RPM-based）：从 NodeSource 安装。
• 其它：使用相应的软件包管理器进行安装，可以参考由 Node.js 提供的 指导

1.2. Git 安装

• Windows：下载并安装 git。
• Mac：使用 Homebrew, MacPorts 或者下载 安装程序。
• Linux (Ubuntu, Debian)：sudo apt-get install git-core
• Linux (Fedora, Red Hat, CentOS)：sudo yum install git-core

1.3. Vscode 安装

点击下载 Vscode，Vscode 安装后，启动，并添加下述 Vsocde 插件：

Vim（可选）

tencent-cloud-cos-upload-image

Markdown Image Size

![](https://galenye-1251496585.cos.ap-guangzhou.myqcloud.com/demo.gif =400x)

1.4. Coding 账号

用于博客源码版本管理，DevOps 过程。

1.5. 腾讯云 账号

用于个人域名注册，域名备案，COS 博客静态文件部署/图片存储，CDN加速等。

1.6. LeanCloud 账号

用于博客访问量，访客人数统计。

二，Hexo 搭建

2.1. 什么是 Hexo

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

2.2. Hexo 安装

第一章中的 Node.js 环境安装后，即可使用 npm 安装 Hexo：

$ npm install -g hexo-cli

2.3. Hexo 常用命令

init

$ hexo init [folder]

new

$ hexo new [layout] <title>

generate

$ hexo generate

server

$ hexo server

2.4. 精致主题推荐

• hexo-theme-fluid （“约克编程技术”博客使用的主题）
• hexo-theme-matery
• hexo-theme-icarus

2.5. fluid 主题使用

下载 最新 release 版本，master 分支无法保证稳定。

下载后解压到博客项目的 themes 目录下并重命名为 fluid。

配置指定主题

theme: fluid  # 指定fluid主题

fluid 覆盖默认配置

使用方式（详见hexo-theme-fluid文档）：

文章基本信息

# 标题
title: 一文教你搭建Hexo博客 
# 文章id，用于url路径
id: build-a-hexo-blog
date: 2020-10-04 10:08:42
# 文章摘要，显示在列表中
excerpt: 文章详细记录了作者搭建“约克编程技术”Hexo博客过程。内容包含Hexo，Hexo Fluid Theme，Markdown，博客图片处理，CI/CD使用，部署上线，域名备案，CDN加速，博客SEO优化等
# 文章分类
categories:
    - Hexo
# 文章标签
tags:
    - 腾讯云
    - Hexo

本博客 scaffolds/post.md 内容如下：

Hexo 文章详情路径配置

permalink: :id-:hash.html

2.6. fluid 功能开关

fluid 主题中存在许多 enable 控制的功能开关，有些功能在开发时希望关闭，上线后才开启。可使用 shell 脚本控制环境变量实现。具体如下：

在博客根目录下新建 start.sh

Coding DevOps 过程运行脚本 start.sh

fluid_config.yml 对应开关设置

三，博客统计分析

本博客开启了Lean Cloud 访问量统计 与 百度统计。

3.1. 展示 PV/UV 统计

博客主题 fluid 开启 PV/UV 统计详情配置 见官方文档。

• 本博客 fluid_config.yml 网页统计配置如下

• 开启后，页面底部展示如下

3.1. 百度统计

• 登陆百度统计官网，新增统计站点

• 获取 key

• 配置 fluid_config.yml 百度统计 key

四，博客评论

博客主题 fulid 支持Valine、Disqus、Gitalk、Utterances、畅言、来必力(livere)、Remark42评论平台接入。

4.1. 开启评论

博客主题 fluid 开启 评论 配置 见官方文档。

4.2. 配置说明

本博客 fluid_config.yml 配置内容示列。

4.3. 开启Gitalk效果

五，Markdown 介绍

Markdown 是一种轻量级标记语言，它允许人们使用易读易写的纯文本格式编写文档。由约翰·格鲁伯（John Gruber）在2004年创建。

Markdown 教学不是本文的重点，不做详细的讲解，点击查看 Markdown 基本语法。

六，博客存到云端

本博客使用腾讯云 COS 存储图片和博客静态资源。可能读者会想到产生的费用问题，不用担心，最多也就2个盒饭钱。

6.1. COS 计费调研

首次开通，可享受半年的免费额度，下图为用户享有的免费额度过期后，费用表如下：

从图中可以看到，存储容量费用为100G，请求100万次，CDN回流100G，一个月产生的费用 ¥27.8 ！。点击查看详情。

6.2. 新建 COS 存储桶

进入 COS 控制台，新建两个存储桶，用于存储博客静态资源和博客图片资源。

温馨提示：新建存储桶时，访问权限设置为 公有读私有写

6.3. 开启静态网站

进入博客静态资源存储桶，开启静态网站功能，即可通过 COS 分配的网址访问博客。

6.4. 图片上传COS

见1.3. Vscode 安装所述，安装 tencent-cloud-cos-upload-image 插件，即可在 Vscode 中实现选择或截图上传图片至腾讯云 COS。插件配置如下：

温馨提示：插件中 Secret ID 与 Secret Key 查询地址：点击查看

在 Markdown 文件中，快捷键使用：

• 使用 ctrl+ alt + p (Windows) / cmd + opt + p (Mac)，粘贴板里面的图片会直接上传至 COS。
• 使用 ctrl+ alt + o (Windows) / cmd + opt + o (Mac)，选择本地文件上传至 COS。

七，博客发布到云端

该博客使用 Coding 的 DevOps 能力实现博客的云端发布。

7.1. 新建Git仓库

进入 Coding 工作台，新建项目 -> 新建代码仓库。使用命令行推送已存在的仓库：

git remote add origin https://e.coding.net/xxxxxx/blog/xxx.git
git add . 
git commit -m "init project"
git push -u origin master

7.2. 持续集成

在持续集成模块下，新建构建计划流水线，实现 Git 仓库 Push 后自动启动博客构建任务，并部署到云端 COS。

新建构建计划

配置流水线

运行 start.sh 脚本配置

# 设置脚本可执行权限
chmod +x ./start.sh
# 执行脚本
./start.sh

完成新建

八，云端自定义博客域名

为了方便记忆，使用自定义个人域名 yorkyu.cn。本节将介绍在腾讯云上域名申请，备案，解析，上线配置等步骤。

8.1. 域名申请

支持以个人主体注册域名，注册耗时短，点击开始，腾讯云域名注册。

8.2. 网站备案

使用中国大陆境内的服务器开办网站必须先办理网站备案，备案成功并获取通信管理局下发的 ICP 备案号后才能开通访问。

支持以个人主体备案网站，备案耗时一般10个左右工作日，点击开始，腾讯云网站备案。

• 可备案的域名后缀
• 备案流程 备案的整个流程都在线上操作，无需到线下跑，只需准备材料即可。
• 备案材料清单
• Serverless 备案资源包 整个备案唯一花钱的地方，购买一次性备案资源包 ¥110。每个账号支持购买1个云函数资源包，支持备案2个网站，且不支持生成备案授权码。
• 网站命名要求

8.3. 公安备案流程

您的网站备案申请通过管局审核并获得备案号后，您必须在网站开通后30日内进行公安备案。如果您的网站涉及经营性备案还需申请经营性网站备案许可证。本文档指导您如何在网站开通后30日内进行公安备案。点击查看

8.4. SSL证书申请

可申请免费域名SSL证书，有效期1年，期满后重新申请即可。一般1天左右即可申请下来。点击开始申请。

申请的免费证书支持主域名与www域名：

8.5. 自定义CDN域名

进入腾讯云COS博客静态资源存储桶详情页，找到域名与传输管理/自定义CDN加速域名，添加上述申请的域名。

如上图，添加主域名（yorkyu.cn）与www域名（www.yorkyu.cn）到自定义 CDN 加速域名，源站类型需选择静态网站源站。系统会自动给每个添加的域名分配一个 CDN 加速地址，该地址作为 CNAME 指向地址。

CNAME：真实名称记录（Canonical Name Record），即 CNAME记录，是域名系统（DNS）的一种记录。CNAME记录 用于将一个域名（同名）映射到另一个域名（真实名称），域名解析服务器遇到 CNAME记录 会以映射到的目标重新开始查询。

8.6. 域名解析配置

域名注册后，您只拥有了这个域名的使用权，但无法通过域名直接访问您的网站。“域名解析” 是使用域名访问的必备环节。人们都习惯记忆域名，但机器间互相只认识 IP 地址，域名与 IP 地址之间是一一对应的，它们之间的转换工作称为域名解析，域名解析需要由专门的域名解析服务器来完成，解析过程是自动进行的。域名解析（DNS）是将域名（例如 cloud.tencent.com）转换成为机器可读的 IP 地址（例如10.10.10.10）的服务。

点击进入腾讯云 DNS 解析 DNSPod。

如上图，分别添加主域名（yorkyu.cn）与www域名（www.yorkyu.cn）的 CNAME 记录类型。记录值为 8.5 自定义CDN域名 中的系统自动分配的 CDN 加速地址。

8.7. 域名开启HTTPS

操作了8.5. 自定义CDN域名后，会在腾讯云内容 内容分发网络 中开启 CDN 加速的域名。

左侧导航找到 证书管理 模块，其次点击 配置证书，即可开始配置，为域名开启 HTTPS。

8.8. 开启 CDN 缓存刷新函数

存储于 COS 桶中的静态资源更新时，需及时刷新 CDN 缓存，使博客网站数据及时生效。可使用 COS 提供的云函数功能实现。如下图，简单配置即可：

温馨提示：CDN 缓存策略也可在 内容分发网络 域名管理/域名详情/缓存配置 中配置。

九，博客SEO优化

网站在没有提交搜索引擎收录之前，直接搜索你网站的内容是搜不到的，只有提交搜索引擎之后，搜索引擎才能收录你的站点，通过爬虫抓取你网站的东西。进而提高博客内容的曝光率。

9.1. sitemap

sitemap 可方便网站管理员通知搜索引擎他们网站上有哪些可供抓取的网页。对于 SEO，使用 sitemap 可以带来诸多益处：

Hexo 生成 sitemap

# 搜索引擎通用的 sitemap
npm install hexo-generator-sitemap --save     
# 百度专用的 sitemap
npm install hexo-generator-baidu-sitemap --save

hexo g

本博客 sitemap 文件地址

_config.yml 设置站点域名

_config.yml 添加sitemap

baidusitemap:
  path: baidusitemap.xml
sitemap:
  path: sitemap.xml

9.2. 网站 SEO 配置

点击查看 hexo 网站配置 指引。

9.3. 百度收录

• 添加站点 点击开始添加站点，百度搜索资源平台官网

• 按照步骤填写信息

• 验证网站 yorkyu.cn 网站使用 CNAME 进行验证。

在腾讯云 DNS 解析 DNSPod 添加一条 CNAME 记录，记录值为上图中百度资源分配的：

• 验证网站成功

• 提交 sitemap 操作路径：资源提交 -> 普通收录 -> 资源提交 -> sitemap

9.4. google 收录

点击开始 Google Search Console

• 添加域名

• 获取 TXT 记录 DNS 配置值

• 在腾讯云 DNS 解析 DNSPod 添加域名解析 TXT 记录

• 网站验证成功

• 提交 sitemap 操作路径：站点地图 -> 添加新的站点地图

参考

• [1] Hexo 官网文档
• [2] Hexo Theme Fluid 文档
• [3] 腾讯云文档中心
• [4] Coding 帮助文档
• [5] Hexo 博客提交百度、谷歌搜索引擎收录
• [6] 维基百科