[draft]測試將靜態 web 放上 IPFS

這是本文件的舊版！

將網頁檔案放入 staging 目錄內 Exp.

$ ls -lR staging/ipfs-web/
staging/ipfs-web/:
total 200
-rw-r--r--    1 jonathan root           199 Sep  6 11:56 index.html
-rw-r--r--    1 jonathan root        199261 Sep  6 11:58 test.png

將網頁檔案上傳至 ipfs

$ docker exec ipfs_host ipfs add -r /export/ipfs-web
added QmUUiF7Q7VTSxxP3fCj9eujb8iCjxQ7xsCa3fu9gP8aN5b ipfs-web/index.html
added QmXjMZ2w2dXrimcSsY6gfLmdZVTZKsF9UrZRzeijYyd2a2 ipfs-web/test.png
added QmNgePP9fbtEjNarsjMMER4wapB6qHnraJe6JfinCK7cnM ipfs-web
 194.79 KiB / 194.79 KiB  100.00%

使用 ipfsbrowser 驗證

$ curl https://api.ipfsbrowser.com/ipfs/get.php?hash=QmNgePP9fbtEjNarsjMMER4wapB6qHnraJe6JfinCK7cnM
<!DOCTYPE html>
<html>
<head>
<title>IPFS 網頁測試</title>
</head>
<body>

<h1>這是 IPFS 網頁測試</h1>
<p>This is a paragraph.</p>

<img src="test.png" alt="測試圖片">

</body>
</html>
$ curl https://api.ipfsbrowser.com/ipfs/get.php?hash=QmXjMZ2w2dXrimcSsY6gfLmdZVTZKsF9UrZRzeijYyd2a2
Warning: Binary output can mess up your terminal. Use "--output -" to tell
Warning: curl to output it to your terminal anyway, or consider "--output
Warning: <FILE>" to save to a file.
$ curl https://api.ipfsbrowser.com/ipfs/get.php?hash=QmUUiF7Q7VTSxxP3fCj9eujb8iCjxQ7xsCa3fu9gP8aN5b
<!DOCTYPE html>
<html>
<head>
<title>IPFS 網頁測試</title>
</head>
<body>

<h1>這是 IPFS 網頁測試</h1>
<p>This is a paragraph.</p>

<img src="test.png" alt="測試圖片">

</body>
</html>

因為 QmXjMZ2w2dXrimcSsY6gfLmdZVTZKsF9UrZRzeijYyd2a2 是 png 圖檔, 所以會出現 Warning 的訊息

Warning: Binary output can mess up your terminal. Use "--output -" to tell
Warning: curl to output it to your terminal anyway, or consider "--output
Warning: <FILE>" to save to a file.

有時因為 ipfsbrowser 無法即時找到 ipfs hash 就會出現類似以下的結果, 需要多執行幾次就可以正常

$ curl https://api.ipfsbrowser.com/ipfs/get.php?hash=QmXjMZ2w2dXrimcSsY6gfLmdZVTZKsF9UrZRzeijYyd2a2
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
:
    <div class="main">

        <!--404 section start-->
        <section class="ptb-100 bg-image full-height" data-overlay="8">
:
    <script src="https://vanwa.tech/assets/js/vendors/hs.megamenu.js"></script>
    <script src="https://vanwa.tech/assets/js/app.js"></script>
    <!--endbuild-->
</body>

</html>

設定 TXT 紀錄
設定 DNS CNAME 紀錄

將更新的網頁檔案上傳至 staging 目錄內

再次執行上傳至 IPFS 網路 Exp. 只改動 index.html

$ docker exec ipfs_host ipfs add -r /export/ipfs-web
added QmcC6sfd39mzWjZtQnqoDZjgTWx8ZKjqw56FZkcaHTVvG1 ipfs-web/index.html
added QmXjMZ2w2dXrimcSsY6gfLmdZVTZKsF9UrZRzeijYyd2a2 ipfs-web/test.png
added QmcgrXvMuUikpiEJAtQM2xMswToGi4KDFNe93yyZURjYBm ipfs-web
 194.81 KiB / 194.81 KiB  100.00%

ipfs, web3

[draft]測試將靜態 web 放上 IPFS

上傳靜態 web 檔案上傳至 IPFS

設定 Cloudflare 的 IPFS Public Gateway

設定 DNS

更新網頁內容

參考網址