薅到了cloudflare的靜態頁面和存儲桶

ejsoon · 帖子由 **ejsoon** » 2026年 7月 2日 11:47

近期一位網友的網站被封了，他新建的部落格轉向了靜態，於是我想起來也要去薅一個。

之前之所以沒有去薅，是因為不太懂，然後就被其它事情填滿就忘了。這次一邊做一邊問AI，就薅到了。

首先我更喜歡在dynadot買域名而不是在cf，而cf要為pages和r2綁定域名又需要用到在cf托管的域名，而我又不想動舊的域名ejsoon.vip，所以只好去買個新的。

買到ejsoon.download，我覺得這個域名很好，首先它很便宜，買時4美金，續時5.5美金。其次download正好是我買這個域名的原因，我準備把它當成網盤。

r2填完信用卡還要填賬單地址，我填的是台灣的台北忠孝東路。

試玩：

https://ejplane.ejsoon.download

ejsoon · 帖子由 **ejsoon** » 2026年 7月 2日 12:16

可能有人會認為靜態博客是一個趨勢，我並不這樣認為。現在php仍然是一種非常方便的發文改文的方式，但是如果是弄成了靜態，在手機端就沒那麼好改了。並且每次靜態博客只要改一點，就要全部打包上傳，其實是效率很低的。

因此對於那些幾個月一年都不發幾篇文章的博主而言，靜態確實是他最好的選擇，但是對於我這種每日都要改要發新的東西上去的情況，靜態就不太適合了。

BobMaster · 帖子由 **BobMaster** » 2026年 7月 2日 12:32

目前我大部分域名解析也是在cloudflare上纳管的，很好用，从18年用到现在了。存量域名快到期后，也会迁移到cloudflare续费。

BobMaster · 帖子由 **BobMaster** » 2026年 7月 2日 12:35

ejsoon 写了： 2026年 7月 2日 12:16 可能有人會認為靜態博客是一個趨勢，我並不這樣認為。現在php仍然是一種非常方便的發文改文的方式，但是如果是弄成了靜態，在手機端就沒那麼好改了。並且每次靜態博客只要改一點，就要全部打包上傳，其實是效率很低的。

因此對於那些幾個月一年都不發幾篇文章的博主而言，靜態確實是他最好的選擇，但是對於我這種每日都要改要發新的東西上去的情況，靜態就不太適合了。

静态网页通常快，安全性也好，打包也很快的(比如hugo)。

你想在手机上改改，无非是得自己设计一个发布工具，这在ai很好用的现在，不算太麻烦。

ejsoon · 帖子由 **ejsoon** » 2026年 7月 2日 12:36

BobMaster 写了： 2026年 7月 2日 12:32 目前我大部分域名解析也是在cloudflare上纳管的，很好用，从18年用到现在了。存量域名快到期后，也会迁移到cloudflare续费。

我之所以要在dynadot買域名而不是cf，主要還是dynadot可以用人民幣和支某寶，否則全部都買在cf也挺好的。

ejsoon · 帖子由 **ejsoon** » 2026年 7月 2日 12:41

BobMaster 写了： 2026年 7月 2日 12:35 静态网页通常快，安全性也好，打包也很快的(比如hugo)。

你想在手机上改改，无非是得自己设计一个发布工具，这在ai很好用的现在，不算太麻烦。

確實如此，但是如果我就為了修改一兩個字而打包整個網站再上傳，感覺還是太重了。假設網站加圖片和各種文件有200M，為了微調某個字詞而傳200M就稍顯麻煩，有時我經常還會為一點小小的問題改來改去。感覺php後臺更快速方便一些。目前為止是這樣。當然php本身要跑起來，服務器可能也會有點壓力，而且不如靜態反應快。所以未來我可能會兩個都上，對比下看看哪個更好用。

ejsoon · 帖子由 **ejsoon** » 2026年 7月 2日 15:30

我未來如果要轉向靜態化，也只能是把wordpress導出static 頁面，因為我已經習慣了wp，並且為其定製了很多功能，比如[ ejcees] [ chaosclock]等，這些應該都是沒法遷移到現今的各種純前端平臺的。

甚至現在加個前端加速插件都不太行，因為有不少頁面都用到了sneppie，要把這些頁面逐個取消才行。

ejsoon · 帖子由 **ejsoon** » 2026年 7月 3日 19:27

worker密碼保護

代码：全选

export default {
  async fetch(request, env) {
    const authHeader = request.headers.get('Authorization');
    
    // 預設帳號為 admin，密碼從環境變數 AUTH_PASSWORD 讀取
    const expectedAuth = 'Basic ' + btoa('admin:' + env.AUTH_PASSWORD);

    // 如果沒有密碼或密碼錯誤，要求瀏覽器彈出輸入框
    if (!authHeader || authHeader !== expectedAuth) {
      return new Response('需要密碼訪問', {
        status: 401,
        headers: {
          'WWW-Authenticate': 'Basic realm="Protected R2"',
        },
      });
    }

    // 驗證成功，從 R2 儲存桶取得檔案
    const url = new URL(request.url);
    const key = url.pathname.slice(1); // 取得網址路徑作為 R2 的 Key

    if (!key) {
      return new Response('請指定檔案路徑', { status: 400 });
    }

    const object = await env.MY_BUCKET.get(key);

    if (object === null) {
      return new Response('檔案不存在', { status: 404 });
    }

    // 回傳檔案
    const headers = new Headers();
    object.writeHttpMetadata(headers);
    headers.set('etag', object.httpEtag);

    return new Response(object.body, {
      headers,
    });
  },
};

ejsoon · 帖子由 **ejsoon** » 2026年 7月 3日 20:18

列出r2所有文件

代码：全选

export default {
  async fetch(request, env) {
    const url = new URL(request.url);
    const key = url.pathname.slice(1); // 取得檔案路徑

    // 1. 如果訪問的是首頁（根目錄），列出所有檔案
    if (!key || key === '') {
      // 呼叫 R2 的 list 功能撈取所有物件
      const listed = await env.MY_BUCKET.list();
      
      // 生成簡單的 HTML 列表
      let fileListHtml = listed.objects.map(obj => {
        return `<li><a href="/${encodeURIComponent(obj.key)}">${obj.key}</a> (${(obj.size / 1024).toFixed(2)} KB)</li>`;
      }).join('');

      if (listed.objects.length === 0) {
        fileListHtml = '<li>儲存桶內目前沒有檔案</li>';
      }

      const html = `
        <!DOCTYPE html>
        <html>
        <head>
          <meta charset="utf-8">
          <title>R2 公開檔案列表</title>
          <style>
            body { font-family: sans-serif; margin: 40px; line-height: 1.6; }
            h1 { color: #333; }
            ul { padding-left: 20px; }
            li { margin-bottom: 8px; }
            a { color: #0066cc; text-decoration: none; }
            a:hover { text-decoration: underline; }
          </style>
        </head>
        <body>
          <h1>📁 公開檔案庫</h1>
          <hr>
          <ul>
            ${fileListHtml}
          </ul>
        </body>
        </html>
      `;

      return new Response(html, {
        headers: { 'Content-Type': 'text/html; charset=utf-8' },
      });
    }

    // 2. 如果訪問的是具體檔案路徑，去 R2 撈取該檔案
    const object = await env.MY_BUCKET.get(key);

    if (object === null) {
      return new Response('檔案不存在', { status: 404 });
    }

    // 回傳檔案給使用者下載
    const headers = new Headers();
    object.writeHttpMetadata(headers);
    headers.set('etag', object.httpEtag);

    return new Response(object.body, { headers });
  },
};

ejsoon · 帖子由 **ejsoon** » 2026年 7月 3日 20:47

輸完密碼列出所有文件

代码：全选

export default {
  async fetch(request, env) {
    const authHeader = request.headers.get('Authorization');
    
    // 1. 驗證帳密（預設帳號 admin，密碼讀取環境變數 AUTH_PASSWORD）
    const expectedAuth = 'Basic ' + btoa('admin:' + env.AUTH_PASSWORD);

    if (!authHeader || authHeader !== expectedAuth) {
      return new Response('需要密碼訪問', {
        status: 401,
        headers: { 'WWW-Authenticate': 'Basic realm="Protected R2"' },
      });
    }

    const url = new URL(request.url);
    const key = url.pathname.slice(1); // 取得檔案路徑

    // 2. 如果訪問的是首頁（根目錄），列出所有檔案
    if (!key || key === '') {
      // 呼叫 R2 的 list 功能撈取所有物件
      const listed = await env.MY_BUCKET.list();
      
      // 生成簡單的 HTML 列表
      let fileListHtml = listed.objects.map(obj => {
        return `<li><a href="/${encodeURIComponent(obj.key)}">${obj.key}</a> (${(obj.size / 1024).toFixed(2)} KB)</li>`;
      }).join('');

      if (listed.objects.length === 0) {
        fileListHtml = '<li>儲存桶內目前沒有檔案</li>';
      }

      const html = `
        <!DOCTYPE html>
        <html>
        <head>
          <meta charset="utf-8">
          <title>R2 檔案列表</title>
          <style>
            body { font-family: sans-serif; margin: 40px; line-height: 1.6; }
            h1 { color: #333; }
            ul { padding-left: 20px; }
            li { margin-bottom: 8px; }
            a { color: #0066cc; text-decoration: none; }
            a:hover { text-decoration: underline; }
          </style>
        </head>
        <body>
          <h1>📁 雲端檔案庫</h1>
          <hr>
          <ul>
            ${fileListHtml}
          </ul>
        </body>
        </html>
      `;

      return new Response(html, {
        headers: { 'Content-Type': 'text/html; charset=utf-8' },
      });
    }

    // 3. 如果訪問的是具體檔案路徑，去 R2 撈取該檔案
    const object = await env.MY_BUCKET.get(key);

    if (object === null) {
      return new Response('檔案不存在', { status: 404 });
    }

    // 回傳檔案給使用者下載
    const headers = new Headers();
    object.writeHttpMetadata(headers);
    headers.set('etag', object.httpEtag);

    return new Response(object.body, { headers });
  },
};

圈圈之地

薅到了cloudflare的靜態頁面和存儲桶

薅到了cloudflare的靜態頁面和存儲桶

Re: 薅到了cloudflare的靜態頁面和存儲桶

Re: 薅到了cloudflare的靜態頁面和存儲桶

Re: 薅到了cloudflare的靜態頁面和存儲桶

Re: 薅到了cloudflare的靜態頁面和存儲桶

Re: 薅到了cloudflare的靜態頁面和存儲桶

Re: 薅到了cloudflare的靜態頁面和存儲桶

Re: 薅到了cloudflare的靜態頁面和存儲桶

Re: 薅到了cloudflare的靜態頁面和存儲桶

Re: 薅到了cloudflare的靜態頁面和存儲桶

在线用户