一文教你把 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 对应开关设置

blog/20201005234834_aa806ccfd8ecec27e4b5f5c75c311cb6.png

三，博客统计分析

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

3.1. 展示 PV/UV 统计

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

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

blog/20201005101858_f34af6baebe84e80258f733a5851ade9.png

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

blog/20201005101606_3c8c98a55829d62a8b39f570741eaf50.png

3.1. 百度统计

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

blog/20201005102456_692fb12d4d7c8b2df7f55f220bc56878.png

• 获取 key

blog/20201005102604_5832388b929d13521c02c495173b0099.png

• 配置 fluid_config.yml 百度统计 key

blog/20201005102815_e597ec2ac11d12b3f440d8dbcfe90aae.png

四，博客评论

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

4.1. 开启评论

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

4.2. 配置说明

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

blog/20201005105932_df2065d151adeffc64870ffa63e36b0f.png

blog/20201005220733_bdef952da281949912c7c711ccc7cf70.png

4.3. 开启Gitalk效果

blog/20201005105731_a11d39b20d1e8242ce378d0741a4d362.png

五，Markdown 介绍

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

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

六，博客存到云端

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

6.1. COS 计费调研

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

blog/20201004155744_ddd97c596b65b34d9c6a899c9303889f.png

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

6.2. 新建 COS 存储桶

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

blog/20201004162342_0ba5e167d1405d8c309c514d1373e860.png

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

6.3. 开启静态网站

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

blog/20201004163030_fcfaaaa1515d194b12f366adbf34b248.png

6.4. 图片上传COS

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

blog/20201004164523_750ea235a52614f7bb51b6d2659c2fe9.png

温馨提示：插件中 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

blog/20201004170609_350cd118d45b7c9842664f2b05548036.png

7.2. 持续集成

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

新建构建计划

blog/20201004172746_f55dd139d99d5420245c06609c2921b1.png

配置流水线

blog/20201004173134_22cc0d4fc1e14beb19117eb6028c656a.png

运行 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天左右即可申请下来。点击开始申请。

blog/20201005091924_ca3ca1427b8f7e1047f16d4d84f4367b.png

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

blog/20201005092017_8de89d7fe9d907b02dfa2badd662cb71.png

8.5. 自定义CDN域名

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

blog/20201005092818_8b02aa1421bfe7c277f3381e32e0a89f.png

如上图，添加主域名（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。

blog/20201005094439_fde4886e02335cb2977bc6d905a0cf86.png

blog/20201005094600_e8997f7e1abca2a4a5750aa3dff04165.png

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

8.7. 域名开启HTTPS

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

blog/20201005095436_de921bba4c97e138d1f4fa59176bed47.png

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

blog/20201005095808_cb32e11fd8893b65dc7c21e67a35e352.png

8.8. 开启 CDN 缓存刷新函数

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

blog/20201005233824_9e12af0eee051b2728a255b2cc47c79f.png

温馨提示：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 网站配置 指引。

blog/20201005172024_58bdee24da08f1a55d44c88ec0c2ab50.png

9.3. 百度收录

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

blog/20201005113751_9731d31a83e3491827841e59fc854a88.png

• 按照步骤填写信息

blog/20201005120224_d4d26f08d7300c7bc1a33a77f73dd720.png

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

blog/20201005124132_f8b809b556888f0eaaf4a4cfcbce7ecf.png

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

blog/20201005124457_10433258c307aed8e7e224a69653e5ea.png

• 验证网站成功

blog/20201005124529_be76eb0dcf63e70719ef608729d3f657.png

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

blog/20201005222354_b9a27a0fc88e6710888ff1fce2525ad5.png

9.4. google 收录

点击开始 Google Search Console

• 添加域名

blog/20201005124953_de6ddd9df15607ba5fedce841224aee9.png

• 获取 TXT 记录 DNS 配置值

blog/20201005125135_ad97034d0a831db34cf41e1c3f4370bf.png

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

blog/20201005125411_ff7c292fabd0a866c6f00207c04dbd8c.png

• 网站验证成功

blog/20201005125720_4753597f8ad68afef41a20d55af1408c.png

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

blog/20201005222514_233099f6b6273979790b13cb9c24ce24.png

参考

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