基于 Hexo 的 GitHub Pages 配置 CloudFlare CDN

最新推荐文章于 2024-08-18 08:31:32 发布
最新推荐文章于 2024-08-18 08:31:32 发布
阅读量4.7k 收藏 4
点赞数 4
分类专栏： Hexo 文章标签： Hexo GitHub Pages CDN CloudFlare
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qianghaohao/article/details/83714575
版权

基于 Hexo 的 GitHub Pages 配置 CloudFlare CDN

概述

由于 GitHub Pages 在国外，静态博客页面在国内访问速度可能会非常慢，我们可以用 CDN 来加速，对比了下 CloudFlare CDN 和 腾讯云 CDN，发现 CloudFlare 免费版没有流量限制（腾讯云 CDN 每月由流量限制），而且配置起来非常简单，所以在此选用 CloudFlare CDN 来加速页面访问。

准备工作

  • 个人域名
  • CloudFlare 账号
  • 基于 hexo 的 github_username.github.io 静态博客

配置流程

  1. 在 Hexo 博客 source 文件夹新建名为 CNAME 的文件，内容为个人域名；
  2. hexo g && hexo d 部署生产的静态页面到 GitHub；
  3. 进入 CloudFlare 控制台，点击添加站点，输入个人域名，根据向导进行操作；
  4. 在 CloudFlare DNS 配置页面配置两个 CNAME 均指向 github_username.github.io 地址：
    根域名(@) CNAME 到 github_username.github.io
    子域名(www) CNAME 到 github_username.github.io

⚠️注意：其实一般的域名提供商是不支持根域名 CNA

最低0.47元/天 解锁文章
qhh0205
关注
专栏目录
hexo-image-cloudflare:使用Cloudflare在Hexo中缓存图像
05-12
一个使用Cloudflare缓存图像的hexo插件，由。 安装 npm i hexo-image-cloudflare 用法 安装插件后，所有图像网址将自动转换为CDN网址。 例如，原产地降价文件是 ![Work/Life Balance]...
Hexo博客技巧：利用JsDeliver加速文件
Amnesia-Fu的博客
05-13 997
前言 众所周知，GItHub的服务器是在国外的，曾经还被墙过，那么利用GitHub Pages搭建好的博客后本身就已经够慢了，再加上博客里的图片、css、js等这类文件就更慢了。 那么可能有人会说，我把图片放图床上，css这类文件少写点不就行了。那你又可曾想过万一图床跑路了，你的博客里全是失效图片了呢。 下面就讲一种方法，令你的文件访问不仅速度快，还不用担心它失效。 JsDeliver的优势 免费 稳定 速度快 你不用担心它会跑路，因为你的文件是存储在GitHub上的。 且这是免费的，无上限。 文末会有
在Cloudflare中自动化部署hexo博客
WongSSH的博客
06-27 1752
CloudFlare Pages是一个免费且使用简单的CI/CD工具，可用来编译并部署大部分知名前端框架。此篇博客介绍如何优雅的在cloudflare pages中自动化部署hexo博客。
【保姆级教程】白嫖 Cloudflare 之 5 分钟搭建个人静态网站
最新发布
u010522887的专栏
08-18 1757
利用 Cloudflare Pages 搭建个人静态网站，真香
Cloudflare Pages 搭建hexo
一曲横笛的博客
08-27 1536
Cloudflare Pages 搭建hexo
使用Cloudflare Pages搭建静态网站
Yetta Daisy的博客
11-15 8139
本文同步发布于个人博客 前言 Cloudflare Pages是一个JAMstack平台，供前端开发人员协作和部署网站。使用 Cloudflare Pages 部署您的动态前端应用程序。页面速度超快，始终保持最新状态，并直接从您的 GitHub 帐户部署。支持常见JS框架，包括React，Vue，Gatsby和Hugo。 操作步骤 登录Cloudflare Pages 首先是登录，前往 pages.cloudflare.com 按照操作。 创建项目 点击创建项目，连接 GitHub 。 选择存储库 .
安装Hexo博客并部署到GitHub或云服务器（细节教程，越过各种坑）
qq_43187818的博客
02-23 3699
本文将介绍如何在个人PC上搭建Hexo博客框架并将博客部署到GitHub上或者部署到个人云服务器上，这是我自己在搭建博客时的一个汇总。
用「Github」和「Cloudflare」自建博客
阿不的博客
01-16 1890
到此为止，基本能满足我的需求了。最后放一张平时写文章时的图：我通常使用VSCode编写文章，实时预览Markdown格式非常方便。为了让图片在VSCode和网页上都能正常显示，我在项目的根目录下创建了一个名为imgs的软链接，指向。这是因为Hugo在编译时会自动将static目录下的文件复制到网站的根目录下，所以使用绝对路径/imgs/可以在不同预览方式下找到文件。我还创建了一个名为public的软链接，指向我的仓库。当我完成文章的编写并使用Hugo进行编译时，它会自动将输出文件复制到public。
xiyoung.github.io:我的博客网站由Hexo和Next开发，部署在Github Pages中
04-30
如果要将博客部署到本地进行预览或编辑，用户需要安装Git，克隆仓库，然后在本地环境中配置Hexo和Next，运行构建命令，最后通过Git将更改推送到Github Pages。 【标签】：“blog github-pages hexo next JavaScript...
hexo-github-calendar:基于hexo的github calendar贡献插件
05-04
hexo-github-calendar教程：链接： : 一键部署： npm i hexo-githubcalendar --save网站根目录_config配置项（不是主题的）：例如butterfly配置为# Ice Kano Plus_in# Hexo Github Canlendar# Author: Ice Kano# ...
windows10下Hexo与GitHub绑定自定义域名的配置方法
09-29
- 登录GitHub，进入你刚刚创建的仓库，在设置（Settings）页面下拉找到“GitHub Pages”部分。 - 在“Custom domain”字段中输入你的自定义域名，例如`xxx.cn`或`xxx.com`。 6. **设置CNAME文件**： - 在Hexo的`...
continuous-integration-blog:通过Github Action实现CI部署的hexo博客,现阶段部署在Cloudflare Workers上
05-04
Mexii's Continuous Integration Blog Mexii部署在Cloudflare Workers的Hexo博客,这里放的是博客源码,通过Github Action编译后推送到Workers
【Github】cloudflare+gitPages+解析域名定制自己的网站
天。朝程序猿的专栏
05-05 4766
Github Pages是通过我们网站托管和发布的公开网页 本文就以简单图文描述介绍部署自己的Github Pages 步骤一：Github网站注册自己的账号 网站：https://github.com 步骤二：新建repository 步骤三：clone这个项目到本地 这里不详细描述，clone到本地用idea编辑器或者其他制作你的网站，包含index.html文件 ...
使用 Netlify，cloudflare pages，GitHub pages , Vercel , Render部署你的 Hexo
m0_73731989的博客
04-18 1533
Hexo 博客，在我从一开始的 GitHub pages 转到 Netlify，如今又搭建了 cloudflare，但万变不离其宗，我们没有服务器，没有经济实力支持服务器，于是选择静态部署平台，pages 给我们提供了很好的平台途径，我也是踩了不少的坑，下面将从 Netlify，cloudflare 讲解如何部署。等待部署完毕即可，这里可以看日志，部署完毕之后就会自动跳转，一般日志里出现绿色的。点进去看一下，如果你的博客资源比较多的话，首次加载可能比较慢，此处可以挂个科学上网。完成之后点击绿色的按钮。
github 镜像站及下载加速网址
热门推荐
weixin_46591962的博客
08-12 3万+
利用 Cloudflare Workers 对 github release 、archive 以及项目文件进行加速，部署无需服务器且自带CDN.只需复制当前 GitHub 地址粘贴到输入框中就可以代理加速下载！
使用cloudflare-pages托管网站
Web3Stack的博客
07-06 1368
Cloudfalre Pages服务在2021年就可用了，参见。可以通过链接你的github或者gitlab，当push到远端时，cf pages将自动构建部署。使用 Cloudflare Pages 开发的每个站点都部署到位于 100 多个国家/地区的 Cloudflare 数据中心网络。，通过，只需单击一下即可启用分析，并开始跟踪网站的进度和性能，包括有关流量和网络核心生命体征的指标。，通过将_redirects文件添加到项目的构建输出目录，您可以轻松地将用户重定向到正确的 URL。格式如。
Cloudflare配置网站免费CDN加速使用教程
云计算
03-29 2万+
前言： 如果是云服务器配置CDN，可以参考下面的教程： 网站如何配置CDN加速？网站域名接入CDN加速的步骤 说到免费的CDN加速，很多人都知道Cloudflare，它可以免费CDN加速，同时也可以隐藏我们服务器的真实ip地址，还能免费开启攻击防御。 如何使用Cloudflare给网站免费CDN加速呢？步骤如下： 首先，进入cloudflare官网，点击进入 没有账号的话，点击网站页面右上角注册 ​ 登录之后，选择菜单“定价”下的“免费” ​ 接着，选择Free的选型，点击“添加..
十个你可能不知道的CloudFlare免费CDN加速技巧
胡西风的博客
03-24 8986
CloudFlare Page Rules，是 CloudFlare 一个非常有用的工具。很多朋友之所以不想上 CDN，主要就是自己的网站或者服务还有不少的动态内容，而一旦上了 CDN 上容易造成网页出错或者数据请求出错。CloudFlare Page Rules 允许你自定义页面规则，例如你可以自定义不同的页面采用不同的策略，包括强制 Https、301 重定向、安全等级、缓存等级、浏览器缓存时间、永久在线等。这样你可以手动将自己的网站实现 “动静分离” 了。
hexo github
08-23
在使用Hexo部署到GitHub上时，需要进行以下步骤： 1. 首先，在GitHub上创建一个与你的用户名相同的仓库，并在仓库名后面加上.github.io，例如http://xxxx.github.io，其中xxxx是你的GitHub用户名。这样，当你将来要部署到GitHub Page时，才会被识别。 2. 其次，生成SSH并添加到GitHub。这可以通过在终端中运行相应的命令来完成。 3. 接下来，你需要在GitHub上克隆Hexo的主题仓库。可以参考其他版本的建议，例如https://github.com/dotnetcore/FastGithub。 4. 最后，你需要设置你的GitHub用户名和邮箱，这样GitHub才能知道你对应的账户是哪一个。你可以在终端中运行以下命令进行配置，其中yourname是你的GitHub用户名，youremail是你的GitHub邮箱。例如：git config --global user.name "yourname" git config --global user.email "youremail"。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [Hexo+Github博客搭建教程](https://blog.csdn.net/qq_58608526/article/details/124652412)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* [猿创征文｜Hexo+Github搭建完全免费个人博客详细教程](https://blog.csdn.net/weixin_43159315/article/details/126556350)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值