使用 Cloudflare + Hexo 搭建免费静态博客

LinWhite
780 阅读3分钟

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

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

准备工作

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

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

安装 Hexo

npm install -g hexo-cli
hexo

Hexo 安装成功

创建 Hexo 项目

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

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 文件中，你可以这样设置：

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 静态资源文件备用

hexo g

Cloudflare 直接上传部署

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

Cloudflare Pages 页面

Cloudflare Pages 上传页面

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

Cloudflare Pages 上传资源

Cloudflare Pages 部署成功

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

使用 Cloudflare CLI 部署项目

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

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

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

yarn create cloudflare --experimental

Cloudflare Pages CLI 项目创建

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

yarn run deploy

Cloudflare Pages CLI 项目上传

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

在现有项目中添加 CLI

在项目中添加开发依赖 wrangler

yarn add -D wrangler

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

#: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

"scripts": {
  "deploy": "wrangler deploy",
  "dev": "wrangler dev",
  "start": "wrangler dev"
},

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

在使用的过程中有什么问题可以发表评论一起讨论交流学习 

如果觉得这篇文章对你有帮助，可以回复表情、发表评论、分享给更多的朋友谢谢

avatar
文章
阅读
粉丝