Cloudflare パブリックなR2に設置した静的HTMLから同じR2の別ディレクトリのCSSを参照してスタイルを当てる

Posted at 2024-07-20

概要

パブリックなR2に設置した静的HTMLから同じR2の別ディレクトリにCSSを設置して参照し、スタイルを当てる方法を簡単にまとめる。

前提

下記の方法でカスタムなドメインでR2のバケットをパブリックに設定した。

方法

ローカルでstaticというディレクトリを作成し、その中にindex.htmlとassetsディレクトリとassets/css/index.cssを追加
```
mkdir -p static/pages
touch static/pages/index.html
mkdir -p static/assets/css/
touch static/assets/css/index.css
```

上記のコマンドを実行すると下記のような構造になる。

static/
├── assets
│   └── css
│       └── index.css
└── pages
    └── index.html

static/pages/index.htmlを開き下記のように記載

static/pages/index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../assets/css/index.css">
    <title>Document</title>
</head>
<body>
  <h1>Hello Cloudflare R2(Other directory style)</h1>
</body>
</html>

static/assets/css/index.cssを開き下記のように記載

static/assets/css/index.css

h1 {
    font-size: 2em;
    color: #333;
    text-align: center;
    margin-top: 20px;
}

static/pages/index.htmlをブラウザで開き、下記のようにセンターに文字が出ることを確認
assetsディレクトリとpagesディレクトリをR2のバケットルートにアップロード、アップロード後は下記のようになった

https://R2のパブリックカスタムドメイン/pages/index.html にアクセスし、ローカルで開いたものと同じ画面が開けばスタイルが当たっている

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up