拥有一个属于自己的博客不管是分享知识、展示个人还是发展副业都是绝佳方式。与传统的博客平台相比，静态博客不仅轻量、安全，而且可以完全掌控内容的呈现方式。

通过结合 Hexo 和 Cloudflare，你可以轻松搭建一个免费且性能优异的个人博客，无需担心服务器维护。本文将详细介绍如何通过这两个强大的工具，快速创建一个兼具速度和安全性的博客

准备工作

在开始之前，你需要确保满足以下要求：

安装 Node.js 和 Git 都是可以用安装包安装就不过多介绍。

安装 Hexo

1
2
npm install -g hexo-cli
hexo
Hexo 安装成功
Hexo 安装成功

创建 Hexo 项目

确认安装了 Nodejs、Git、Hexo 后，使用 hexo 创建项目

1
2
3
hexo init my-blog
cd ./my-blog
hexo s
运行成功
运行成功

运行起来后在地址栏输入 http://localhost:4000/ 就能在本地预览网站了

网页预览
网页预览

自定义 Hexo 配置

Hexo 默认生成的配置文件在 my-blog/_config.yml。你可以根据需要修改其中的参数，如博客标题、作者信息等。为了让你的网站符合 SEO 标准，以下几点尤为重要：

  • title: 博客的标题
  • description: 简短的描述，吸引用户点击
  • keywords: 相关关键词，帮助提升搜索引擎的可见度
  • url: 你的博客网址

在 _config.yml 文件中，你可以这样设置：

1
2
3
4
5
6
7
8
title: 我的个人博客
description: 这是一个关于编程、技术分享的博客。
keywords: 编程, 技术博客, Hexo, 静态网站
author: 作者名字
language: zh-CN
timezone: Asia/Shanghai

url: https://你的域名.com

其他设置、主题、插件可以通过 官方文档 查看应该如何设置，可以通过安装主题和插件将你的博客变得美观、实用。

Hexo 部署上线

免费的部署方式有

  • 上传到 GitHub，使用 GitHub Pages 部署上线
  • 上传到 Cloudflare Pages 部署上线

GitHub Pages 部署的网站国内连接不稳定，使用 Cloudflare 加速需要有域名。

因此本文使用 Cloudflare Pages 部署方便简单，连接稳定。本博客使用的就是这种方式部署。

在项目中构建好 public 静态资源文件备用

1
hexo g

Cloudflare 直接上传部署

打开 Cloudflare 后台页面，打开 Workers 和 Pages 页面

Cloudflare Pages 页面
Cloudflare Pages 页面
Cloudflare Pages 上传页面
Cloudflare Pages 上传页面

为项目创建名称后点击 创建项目，将整个 public 文件夹直接拖入上传，并点击 部署项目

Cloudflare Pages 上传资源
Cloudflare Pages 上传资源
Cloudflare Pages 部署成功
Cloudflare Pages 部署成功

部署成功就能直接打开连接访问自己的项目了

使用 Cloudflare CLI 部署项目

C3 (create-Cloudflare-cli) 是一个命令行工具，旨在帮助您尽快设置 Workers和 Pages 应用程序并部署到 Cloudflare。

下面介绍两种方式将自己的项目通过 CLI 部署到 Cloudflare Pages 中

使用命令快速创建一个 Cloudflare cli 项目

Cloudflare Pages CLI 项目创建
Cloudflare Pages CLI 项目创建

将 hexo 网站静态文件放到 CLI 项目中的 public 目录中运行命令部署到 Cloudflare 中。

Cloudflare Pages CLI 项目上传
Cloudflare Pages CLI 项目上传

上传成功后可以使用控制台中的链接访问部署的网页

在现有项目中添加 CLI

在项目中添加开发依赖 wrangler

在项目根目录创建 wrangler.toml 配置文件

wrangler.toml
1
2
3
4
5
6
7
8
9
10
#:schema node_modules/wrangler/config-schema.json
name = "page-name"
compatibility_date = "2024-10-11"
assets = { directory = "./public" }

# Workers Logs
# Docs: https://developers.cloudflare.com/workers/observability/logs/workers-logs/
# Configuration: https://developers.cloudflare.com/workers/observability/logs/workers-logs/#enable-workers-logs
[observability]
enabled = true

在项目的 package.json 中配置 scripts

package.json
1
2
3
4
5
"scripts": {
  "deploy": "wrangler deploy",
  "dev": "wrangler dev",
  "start": "wrangler dev"
},

运行命令就能看到成功部署了

在使用的过程中有什么问题可以发表评论一起讨论交流学习
如果觉得这篇文章对你有帮助，可以回复表情、发表评论、分享给更多的朋友 谢谢

许可协议

本文采用 署名-非商业性使用-相同方式共享 4.0 国际 许可协议，转载请注明出处。

分享文章

快来参与讨论吧~