利用Cloudflare page和GitHub免费资源搭建个人博客网站

利用Cloudflare page和GitHub免费资源搭建个人博客网站

𝓓𝓸𝓷 Lv6
一、搭建步骤

1.注册Github

2.将网站代码内容上传至Github仓库

3.注册Cloudflare

4.搭建Cloudflare page,导入Github仓库到Cloudflare page

5.绑定域名,使用域名访问(可选)

二、注册并配置GitHub
1.注册GitHUB

https://github.com/,打开官网,点击右上角Sign up,填写邮箱、密码、用户名点击Continue进行注册,注册邮件会收到验证码,填入验证码注册即可

image-20240702171123515

image-20240702172535995

image-20240702172841609

image-20240702173217651

image-20240702174752090

image-20240702173449542

image-20240702180412508

image-20240702180136568

2.创建Repository仓库

点击Create repository创建github仓库,或者点击右侧头像,在下拉菜单选择your repositories, 在弹出的页面点击New按钮创建repository仓库

image-20240702180859461

image-20240702181456851

image-20240702181311994

image-20240705141258762

  • Repository name:仓库名字可以随便填写,如果后继想使用Github Pages,则需要按username.github.io格式填写
  • 仓库私密可以设为Private,Cloudflare page后面会导入Github仓库内容,最终访问Cloudflare内容,如果后续想使用Github Pages,以后可以改成Public

image-20240702182401701

三、配置ssh免密验证

本地创建ssh公钥,添加到远程github ,方便本地通过ssh免密上传代码到github

1.本地创建ssh密钥
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
(1)Windows添加OpenSSH服务器
Windows11安装OpenSSH服务器:
设置---添加可选功能---OpenSSH服务器

(2)创建密钥
C:\Users\admin>ssh-keygen -t rsa -C 123456@msn.com

Generating public/private rsa key pair.
Enter file in which to save the key (C:\Users\admin/.ssh/id_rsa):
Enter passphrase (empty for no passphrase):
Enter same passphrase again:
Your identification has been saved in C:\Users\admin/.ssh/id_rsa
Your public key has been saved in C:\Users\admin/.ssh/id_rsa.pub
The key fingerprint is:
SHA256:MwQ8HrLBd4hnXtpeFPmiqcvVAR7YWqWwg0Z3K98ynrg admin@DESKTOP-JJN2EOG
The key's randomart image is:
+---[RSA 3072]----+
| ..o+.. oo |
| .=oOBo+o |
| oX=BO. . |
| .. +O.+o . |
| ..S+o. |
| o+B . |
| ..+ . |
| ..o |
| E. |
+----[SHA256]-----+

C:\Users\admin>cd .ssh

C:\Users\admin\.ssh>dir
Volume in drive C has no label.
Volume Serial Number is 70E6-2E1B

Directory of C:\Users\admin\.ssh

2024-07-02 19:06 <DIR> .
2024-07-02 19:06 <DIR> ..
2024-07-02 19:06 2,610 id_rsa
2024-07-02 19:06 576 id_rsa.pub
2024-01-31 16:21 1,021 known_hosts
2024-01-30 09:43 187 known_hosts.old
4 File(s) 4,394 bytes
2 Dir(s) 7,510,503,424 bytes free

(3)查看并复制公有密钥内容
C:\Users\admin\.ssh>more id_rsa.pub
ssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAABgQCv0XhN5bQ9bIbPvy72FUzbg6BWMQr/tlmffqEBKS/fcapi4yNVQVnt1oJVL1/ULuOgVuIhI5JFtwvspai9kbMyEb1XFpyVkz8dgt0gsase60vt20N/D9sobnLJyDBisP6kQXCLUFppvFPSki2L4pRIvU87IfDHY8XXgA1rtamiC3LcpRtS0RRUwfwIb4m7qU7ohnVu307qZMAcW6M/j746CY2gDwjtUiPh11Tt+nxEj4D9oz6r3jYuv362VIFG9BB9T6RMdUhaYblvf7yHjR5PT8467vWVveo/0suIhtgQeBmpWQ+e/1NUHHEv8XmhB+ox1QUIPmgMDUh9j2SGwpEAC3Ois5Rd9t1HEuktYS0oVzUhslhiTkID/OBNh12Pto2fXE7YmpJdl1c3km8hOL/Wgl6AslX3s5zmi3hW3aHkeAuL/dq5bdSnY1CsOZFOJ94vBW5OfnXW7IKiXOSOTjzaxHBlhw0sjVFpEJjyUZVjYVRFV1K8BatgYviiECk7LI8= 123456@msn.com
2.GitHub配置key

右上角点击头像,选择设置,点击左侧导航菜单SSH and GPG keys.

image-20240702191452096

image-20240702191744855

填写标题,将第1步中本地创建的密钥粘贴进key方框中,点击Add SSH key按钮,生成key

image-20240702192002610

image-20240702192627211

3.验证SSH是否成功
1
$ ssh -T git@github.com

image-20240702194008304

四、上传代码至GitHub

本次使用hexo代码,通过命令上传至github main仓库

  • 可以直接上传文件或代码,也可以使用命令行上传

image-20240705153611316

  • 命令行上传

本站使用hexo框架主题,执行hexo clean && hexo g && hexo d上传

image-20240706043607923

image-20240706043523467

image-20240706043759456

五、Cloudflare配置page服务
1.创建Page

image-20240705214747395

image-20240705215158631

image-20240705215300217

image-20240705215340569

image-20240706034023330

image-20240705220044604

image-20240706032424144

image-20240706043000877

image-20240706043146493

image-20240706044246487

访问域名即可打开网站: https://hexohub-github-io.pages.dev/

image-20240706044641823

2.自定义域名

如果不喜欢官方提供的域名,可以使用自己注册的域名绑定网站,域名注册商很多: 国外: namechap, namesilo, domain 国内: 阿里云

image-20240706051941360

image-20240706053527960

在添加域名之前,需要先传输DNS管理,即从域名注册商将DNS管理传入Cloudflare

  • 传输DNS管理

image-20240706052450705

image-20240706051007778

上面步骤也可以从左侧导航栏Websites—Get started—输入域名—Continue进入

image-20240706061601647

image-20240706084901169

image-20240706085341793

image-20240706085551775

image-20240706091154085

复制两条DNS,去域名注册商修改nameserver,本域名使用的namecheap注册,需要去namecheap修改nameserver

image-20240706053803787

image-20240706092312698

image-20240706092619451

image-20240706092832532

image-20240706092751543

image-20240706092932060

image-20240706093039043

  • 绑定saobar.com域名

回到自定义域名界面绑定域名

image-20240706094306809

image-20240706094449979

至此,浏览器打开saobar.com可以看到网页了,下面接着绑定www.saobar.com,如果不绑定,打开www.saobao.com,网站会显示连接超时错误522

image-20240706094712122

image-20240706095318868

image-20240706095724645

image-20240706095847961

image-20240706100043128

自定义域名绑定成功,浏览器输入saobar.com或www.saobar.com都可以进入网站

3.配置301重定向

https://developers.cloudflare.com/rules/page-rules/how-to/url-forwarding/

image-20240706102957287

image-20240706112745095

image-20240706114624968

image-20240706114401317

重定向配置完成,在浏览器中输入saobar.com或www.saobar.com,都会跳转至https://www.saobar.com

  • Title: 利用Cloudflare page和GitHub免费资源搭建个人博客网站
  • Author: 𝓓𝓸𝓷
  • Created at : 2024-06-02 19:21:55
  • Updated at : 2024-07-20 05:15:41
  • Link: https://www.zhangdong.me/cloudflare-page-github.html
  • License: This work is licensed under CC BY-NC-SA 4.0.
评论