在互联网计算机上存储一个静态网站

在开始之前，请确保您已使用我们的 {sdk-short-name} (DFX) 和燃料费钱包进行设置，可以通过Faucet快速入门 或通过购买 ICP 并点击我们的 网络部署指南。

设置你的项目

让我们创建一个简单的静态网站，然后将其设置为使用 dfx 进行部署。

  1. Create a folder named static-ic-website

  2. In static-ic-website, create a new folder, named assets.

  3. Inside your assets folder, create 4 files

    • index.html

    • page-2.html

    • script.js

    • style.css

添加一些内容

让我们从 index.html 开始。 将以下代码粘贴到您的文件中:

index.html
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Static IC Website</title>
   <link rel="stylesheet" href="style.css">
</head>
<body>
   <h1>My First IC Website</h1>
   <p>Styles are loaded from a stylesheet</p>
   <p id="dynamic-content"></p>
   <a href="page-2.html">Page 2</a>
   <script src="script.js"></script>
</body>
</html>

接下来，打开 page-2.html 并添加此内容。

page-2.html
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Page 2</title>
   <link rel="stylesheet" href="style.css">
</head>
<body>
   <h1>This is page 2</h1>
   <a href="/">Back to index</a>
</body>
</html>

然后，在 script.js 中添加一些简单的逻辑。

script.js
document.querySelector("#dynamic-content").innerText =
 "This paragraph is dynamically rendered using JavaScript";

然后在 +style.css 中添加一些样式。

style.css
body {
   font-family: sans-serif;
   font-size: 1.5rem;
}

p:first-of-type {
   color: #ED1E79;
}

配置 DFX 进行部署

要在 Internet Computer platform 上实时托管和运行此网站，您需要配置 DFX 以将文件上传到经过认证的资产容器。 在项目的根目录 static-ic-website 中，创建一个新文件 dfx.json。 然后，添加以下内容：

dfx.json
{
   "canisters": {
       "website": {
           "type": "assets",
           "source": ["assets"]
       }
   }
}

这告诉 DFX 您要创建一个资产容器，并且它应该上传 asset 文件夹的内容。 如果要上传额外的静态资产，可以将它们添加到 asset 文件夹或将额外的文件夹添加到 source 配置中。

现在，您的目录应该如下所示：

├── assets
│   ├── index.html
│   ├── page-2.html
│   ├── script.js
│   └── style.css
└── dfx.json

部署您的网站

要部署您的网站，请确保您位于项目根目录的终端中，然后运行以下命令：

dfx deploy --network ic

您应该会在控制台中看到一些输出，以及如下所示的成功消息：

...

Uploading assets to asset canister...
Starting batch.
Staging contents of new and changed assets:
  /index.html 1/1 (501 bytes)
  /index.html (gzip) 1/1 (317 bytes)
  /page-2.html 1/1 (373 bytes)
  /page-2.html (gzip) 1/1 (258 bytes)
  /script.js 1/1 (117 bytes)
  /style.css 1/1 (102 bytes)
Committing batch.
Deployed canisters.

查看您的实时网站

通过运行查找新容器的 ID

dfx canister --network ic id website

获取该容器 ID 并访问 https://<canister-id>.ic0.app，在 URL 中插入您自己的容器 ID 作为子域。

您应该看到您的实时多页网站，看起来像这样！

Static Website

下一步

想要构建一个全栈 dapp？ 查看 Full-stack React Tutorial!

访问我们的Developer Forum 寻求 Dfinity 基金会工程师和开发者社区的灵感和支持。