实现单文件cloudflare部署docsipy

老柴杂货铺 2025-01-18

昨晚搭建了一个文档网站，这类网站挺多，大多都是先用npm将markdown渲染转换为html后上传静态页面，当然这种不需要在网上再次解析，速度会比较快，缺点就是需要本地准备支持环境，每次都要进行本地的解析渲染

测试用的是docsipy，这个网站的原理上直接在线获取markdown文件内容进行渲染后再放回content窗口，可以直接在线查看渲染后的结果

查看目录结构，除了一个index.html外，其他的都是md文件（见上图）通过加载md内容实现一些相关的配置，大多数文件第一次配置后之后都不需要改，_sidebar.md这个需要每次上传新的md文件后进行修改，格式如下：

一般情况下，到这儿就可以结束了，把整个目录随便找个虚拟空间一扔，以后更新时用ftp/sftp连上去传文件就可以了

但是呢，我这人比较懒，想的是托管到github上用pages做个固定页面，以后直接在本地用vscode/cursor啥的写好后，用自带的git工具同步就可以了，嗯，这个也好实现，我就不多写了，有兴趣的可以看下演示站（https://itlaborer.github.io）

但是呢，嗯，我又要说但是了，github在国内访问实在是够呛，刚好有cloudflare，就想着能不能在cloudflare部署一个页面，其他文件都用github的，这样只用同步一次，两边网站就可以同步更新了，而且在github打不开的时候，cloudflare还可以帮它缓存

啥都不说，直接上代码，如果可以参考（http://book.00101010.cn）

刚才复制代码时不小心给remoteMD的值前边多打了个空格，然后搞了半天404问题

addEventListener('fetch', event => {
    event.respondWith(handleRequest(event.request))
  })
  
  async function handleRequest(request) {
    const url = new URL(request.url)
    
    / 如果是根路径，返回包含 Docsify 和远程 .md 文件的 HTML 页面
    if (url.pathname === "/") {
      return new Response(await generateDocsifyPage(), {
        headers: { 'Content-Type': 'text/html' }
      })
    }
    
    // 如果请求是远程 Markdown 文件，重定向到相应的文件
    if (url.pathname.endsWith('.md')) {
      const basepath = '你的实际路径';
      const remoteMD = `${basepath}${url.pathname}`;
      const response = await fetch(remoteMD)
      const mdContent = await response.text()
      return new Response(mdContent, { headers: { 'Content-Type': 'text/markdown' } })
    }
  
    return new Response(`Not Found：${remoteMD}`, { status: 404 })
  }
  
  // 生成 Docsify 页面并嵌入远程 Markdown 文件
  async function generateDocsifyPage() {
    return `
      <!DOCTYPE html>
      <html lang="zh_CN">
      <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Docsify on Cloudflare Worker</title>
        <script src="https://cdn.jsdelivr.net/npm/docsify@4.12.0/lib/docsify.min.js"></script>
  
        <!-- 默认主题 -->
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsify-themeable@0/dist/css/theme-simple-dark.css">
      </head>
      <body>
        <div id="app"></div>
        <script>
          window.$docsify = {
            name: '网站名称',
            repo: 'https://test.github.io/',  // 如果有 GitHub 仓库可以提供链接
            basePath:'你的实际路径',
  
            loadSidebar: true,  // 启用侧边栏
            loadNavbar: true,
            // 封面支持，默认加载的是项目根目录下的_coverpage.md文件
            coverpage: true,
            // 最大支持渲染的标题层级
            subMaxLevel: 4,  // 子目录最大显示层级
            alias: {
              '/*/README.md': '你的实际路径',
            },
          }
        </script>
        <!-- docsify的js依赖 -->
        <script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
        <!-- emoji表情支持 -->
        <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/emoji.min.js"></script>
        <!-- 图片放大缩小支持 -->
        <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/zoom-image.min.js"></script>
        <!-- 搜索功能支持 -->
        <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>
      </body>
      </html>
    `
  }

cloudflare 脚本

文章转载自老柴杂货铺，如果涉嫌侵权，请发送邮件至：contact@modb.pro进行举报，并提供相关证据，一经查实，墨天轮将立刻删除相关内容。

实现单文件cloudflare部署docsipy

评论