天机阁
使用cloudflare部署Hexo站点，并优化速度（CDN）
天机_OUO Lv1
  2024-08-18 22:37:07   2024-09-15 19:35:51    1.6k 字  6 分钟

准备

一个cloudflare账号

一个github账号（可选）

一个可用的CDN（可选）|（关于这个的教程还没写，请等待…）

安装Hexo环境

Node.js

下载并安装Nodejs|官网|只要版本高于14.0.0就行

如果已经安装过了请跳过

Hexo

安装Hexo可以使用以下命令（全局安装）

1
npm install hexo-cli -g

本次安装的是7.3.0版本的Hexo（目前最新版2024.8.18）

Hexo

初始化

选择一个地方创建一个文件夹作为你的Hexo站的根目录，创建完后进入

打开CMD并CD到文件夹里，输入这个命令初始化Hexo

1
hexo init

初始化期间可能会发生错误，例如无法访问Github，提示SSL错误，这时候就需要一些魔法了

简单的配置

初始化完后你就会得到这些文件

image

打开_config.yml文件编辑你的基础站点信息（我对部分进行了注释汉化）（此配置文件为7.3.0版本）

可以到官方网站上去看

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# 站点
title: Hexo      #站点标题
subtitle: ''     #站点副标题
description: ''  #站点描述
keywords:        #站点关键词
author: John Doe #作者名称
language: en     #站点语言
timezone: ''     #站点时区

# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: http://example.com                 #站点URL（域名）改成你的（后面不带/）（例如：url: https://www.funtime-uwu.fun）
permalink: :year/:month/:day/:title/    #文章路径
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks

# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:

# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link:
  enable: true # Open external links in new tab
  field: site # Apply to the whole site
  exclude: ''
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
syntax_highlighter: highlight.js
highlight:          #代码高亮
  line_number: true
  auto_detect: false
  tab_replace: ''
  wrap: true
  hljs: false
prismjs:            #代码高亮
  preprocess: true
  line_number: true
  tab_replace: ''

# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
  path: ''
  per_page: 10
  order_by: -date

# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# Metadata elements
## https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta
meta_generator: true

# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss
## updated_option supports 'mtime', 'date', 'empty'
updated_option: 'mtime'

# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page

# Include / Exclude file(s)
## include:/exclude: options only apply to the 'source/' folder
include:
exclude:
ignore:

# 扩展
## 插件: https://hexo.io/plugins/   #你可以到这里来淘一些插件
## 主题: https://hexo.io/themes/    #这是官方的主题库（也可以网络搜索，只要不是太久远就行）
theme: landscape    #这是的名字（如果你要安装别的主题，请跟改这里）

# 部署（部署到Git库 例如：Github、Gitee等）
## 文档: https://hexo.io/docs/one-command-deployment
deploy:
  type: ''

预览站点（本地）

修改完后（如果你懒，可以不改），使用这个命令来预览你的站点（本地）

1
hexo s

这是hexo server的缩写

运行完后你会看见

image

在浏览器里输入：http://localhost:4000/ 访问站点（本地）

你就能看见你的站点了

创建文章、页面

这个可以去官方的网站上去看，如果看不懂，可以在评论区留言，我会写出来

点我前往

直接使用cloudflare部署

注意⚠️

直接使用cloudflare部署的话站点的总大小最大为25MB，可以使用Github作为存储库来提高总大小

如果你要使用Github作为存储库的话，请跳到“使用Github作为存储库”部分操作完后再返回这里

登录cloudflare

登录cloudflare仪表板
点我前往

在左边的菜单里找到Workers 和 Pages并点击进入

点击创建

image

选择Pages，选择使用直接上传创建，点击上传资产，为项目命名（英文，不知道中文行不行，没试过）

这里我命名为tjg-test

image

生成Hexo静态文件

现在来生成Hexo的静态站点文件

1
hexo cl && hexo g

打包Hexo静态文件

这会在目录里生成一个public文件夹，里面是站点的文件，打包这个文件夹为压缩文件（例如：zip），将压缩包拖进

image

上传文件

这里会扫描一会，扫描完后开始上传

image

部署站点

上传完后点击“部署站点”

image

访问

点击后，等待一会，会提示部署成功

image

虽然显示成功了，但是还要等个1-2分钟，等待结束后可以尝试访问，速度可能会有些慢，可以实战一些魔法来加速

自定义域名

进入到项目里，找到自定义域，点击，点击设置自定义域

image

这里我设置成我的用来演示

image

设置完后点击继续

image

这里会有两种方法，我们选择CNAME方法

image

在DNS添加一条CNAME记录，主机记录填你自己设置的，纪录值填写「项目名.pages.dev」，随后点击确认

我用的是阿里云的DNS，其他的操作都大差不差

image

添加完后等待一些时间（一分钟左右），点击检查DNS记录，会显示

image

返回查看，可能还提示检查中，等待就行，成功后会显示

image

随后便可以通过你自己的域名来访问了

使用Github作为存储库（可选）

创建一个Github仓库

登录你的Github，创建一个Github仓库，建议设置为私有。
可以创建一个描述文件塞到仓库中。

创建cloudflare站点

在Workers 和 Pages页面点击创建，选择Pages，点击连接到Git，登录你的Github账户，选择你创建的Github仓库，点击开始设置，可以设置你的项目名称，也就是你访问的域名，生产分支可以选择默认的，然后点击保存并部署，等待一会，就会显示：成功！您的项目已部署到以下区域：全球 ，然后可以点击继续处理项目，就部署成功了。

部署新内容

此后，只要有文件上传到Github仓库，仓库有变动，cloudflare就会自动拉取仓库最新内容部署

使用CDN优化（可选）

请等待…

还没写呢

使用cloudflare部署Hexo站点，并优化速度（CDN）
post/61f878d46983/
作者
天机_OUO
发布于
2024-08-18 22:37
许可
 打赏作者
 评论
评论插件加载失败
正在加载评论插件
  1. 1. 准备
  2. 2. 安装Hexo环境
    1. 2.1. Node.js
    2. 2.2. Hexo
  3. 3. Hexo
    1. 3.1. 初始化
    2. 3.2. 简单的配置
    3. 3.3. 预览站点（本地）
    4. 3.4. 创建文章、页面
  4. 4. 直接使用cloudflare部署
    1. 4.1. 注意⚠️
    2. 4.2. 登录cloudflare
    3. 4.3. 生成Hexo静态文件
    4. 4.4. 打包Hexo静态文件
    5. 4.5. 上传文件
    6. 4.6. 部署站点
    7. 4.7. 访问
    8. 4.8. 自定义域名
  5. 5. 使用Github作为存储库（可选）
    1. 5.1. 创建一个Github仓库
    2. 5.2. 创建cloudflare站点
    3. 5.3. 部署新内容
  6. 6. 使用CDN优化（可选）
    1. 6.1. 请等待…
  1. 1. 准备
  2. 2. 安装Hexo环境
    1. 2.1. Node.js
    2. 2.2. Hexo
  3. 3. Hexo
    1. 3.1. 初始化
    2. 3.2. 简单的配置
    3. 3.3. 预览站点（本地）
    4. 3.4. 创建文章、页面
  4. 4. 直接使用cloudflare部署
    1. 4.1. 注意⚠️
    2. 4.2. 登录cloudflare
    3. 4.3. 生成Hexo静态文件
    4. 4.4. 打包Hexo静态文件
    5. 4.5. 上传文件
    6. 4.6. 部署站点
    7. 4.7. 访问
    8. 4.8. 自定义域名
  5. 5. 使用Github作为存储库（可选）
    1. 5.1. 创建一个Github仓库
    2. 5.2. 创建cloudflare站点
    3. 5.3. 部署新内容
  6. 6. 使用CDN优化（可选）
    1. 6.1. 请等待…