使用Cloudflare Workers搭建静态网页

·
日常 function headers cloudflare 脚本 const workers 代码 html return October 17, 2020

自从上次使用Cloudflare Workers+Backblaze B2搭建了图床之后,看了看自己速度慢得起飞的浏览器主页,最终还是把毒手伸向了它.....

在重写之前,先打开Cloudflare官方的模板库

发现如下内容

也就是说可以在Worker脚本中插入HTML代码
理解一下就是

const html = `HTML代码(可换行,可缩进)`

async function handleRequest(request) {
  return new Response(html, {
    headers: {
      "content-type": "text/html;charset=UTF-8",
    },
  })
}

addEventListener("fetch", event => {
  return event.respondWith(handleRequest(event.request))
})

这就是我们想要的东西了

教程开始

打开Cloudflare,如没有Cloudflare账户可以注册一个
创建一个A记录,随便指向一个IP
A

打开Workers选项
workers

点击管理Workers
mag

点击创建Workers

在编辑器中粘贴如下内容,注意要根据自己实际更改,这是纯静态的

const html = `HTML代码`

async function handleRequest(request) {
  return new Response(html, {
    headers: {
      "content-type": "text/html;charset=UTF-8",
    },
  })
}

addEventListener("fetch", event => {
  return event.respondWith(handleRequest(event.request))
})

点击保存并部署
退出编辑器
点击添加路由

根据自己实际需要填写,Worker选择刚才创建的
打开你设置的网址看看
END

DEMO:https://start.typeboom.club/

  • 利用backblaze B2和Cloudflare Workers搭建自主域名图床
  • 解决移动端浏览器 HTML 音频不能自动播放

已有 9 条评论
  1. sakura

    请问HTML要访问当前目录的文件比如加载图片要怎么办 可以发邮箱告诉我下麻大佬 谢谢啦

    sakura March 30th, 2022 at 01:30 am回复
    1. admin

      Cloudflare Workers我记得是不能放图的,除非IPFS但是这个一段时间无人访问就会丢失数据

      admin March 31st, 2022 at 11:29 pm回复
      1. Samaaaa

        请问其他的呢?例如另一个html或者css

        Samaaaa May 19th, 2022 at 10:59 pm回复
  2. 沐予之枫

    要钱吗?

    沐予之枫 November 1st, 2020 at 07:35 pm回复
    1. admin

      一天之内的请求数低于10w就不要,高了直接返回错误,也不需要担心扣款

      admin November 1st, 2020 at 09:41 pm回复
      1. 千瞬

        我觉得腾讯cos搭建静态网页会比较好

        千瞬 November 3rd, 2020 at 11:20 am回复
        1. admin

          这个免费啊
          而且不需要备案之类的
          并且性质不同,这个是给CDN进行编程

          admin November 3rd, 2020 at 08:01 pm回复
          1. 千瞬

            不懂

            千瞬 November 7th, 2020 at 01:10 pm回复
            1. admin

              会JavaScript就能用,实在不行可以去模板库和GitHub看看

              admin November 8th, 2020 at 10:27 am
取消回复

说点什么?
Title
在重写之前,先打开Cloudflare官方的模板库

© 2023 Type boom
友链&RSS