Esse artigo foi escrito no site do Internet Computer e traduzido por Dimitris Calixto, artigo original disponível aqui
Antes de começar, certifique-se de estar preparado com nosso SDK (DFX) e uma Carteira de Cycles, seja a partir do Faucet Quickstart ou comprando ICP e seguindo nosso guia de implantação de rede.
Monte seu projeto
Vamos criar um website estático simples, e depois configurá-lo para ser implantado com o dfx.
- Crie uma pasta chamada static-ic-website
- Em static-ic-website, crie uma nova pasta, denominada assets.
- Dentro de sua pasta assets, crie 4 arquivos
- index.html
- page-2.html
- script.js
- style.css
Adicione algum conteúdo
Vamos começar com index.html. Cole o seguinte código em seu arquivo:
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>StaticICWebsite</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>My FirstICWebsite</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>
Em seguida, abra a page-2.html e adicione este conteúdo.
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>Página 2</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Esta é a página 2</h1>
<a href="/">Voltar o índice</a>
</body>
</html>
Então, acrescente um pouco de lógica simples ao script.js.
script.js
document.querySelector("#dynamic-content").innerText =
"Este parágrafo é dinamicamente renderizado usando JavaScript";
E depois acrescente alguns estilos ao style.css.
style.css
body {
font-family: sans-serif;
font-size: 1.5rem;
}
p:first-of-type {
color: #ED1E79;
}
Configure o DFX para implantar
Para hospedar e executar este site ao vivo na IC, você precisará configurar o DFX para carregar seus arquivos em um cânister de ativos certificado. No diretório raiz de seu projeto, static-ic-website, crie um novo arquivo, chamado dfx.json. Em seguida, adicione o seguinte conteúdo:
dfx.json
{
"canisters": {
"website": {
"type": "assets",
"source": ["assets"]
}
}
}
Isto diz ao DFX que você deseja criar um cânister de ativos, e que ele deve carregar o conteúdo da pasta assets. Se você quiser carregar ativos estáticos adicionais, você pode adicioná-los à pasta assets ou adicionar pastas adicionais à configuração raiz.
Agora, seu diretório deve apresentar algo parecido com isto:
├── assets
│ ├── index.html
│ ├── page-2.html
│ ├── script.js
│ └── style.css
└── dfx.json
Implante seu site
Para implantar seu website, certifique-se de estar em seu terminal na raiz do projeto, e execute este comando:
dfx deploy --network ic
Você deve ver alguma saída em seu console, e uma mensagem de sucesso parecida com esta:
...
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.
Veja seu site ativo
Encontre o ID do seu novo cânister executando:
dfx canister --network ic id website
Pegue esse ID do cânister e visite https://<canister-id>.ic0.app, inserindo o ID do seu próprio cânister como o subdomínio no URL.
Você deve ver seu website ativo, de várias páginas, com este aspecto!
Próximos passos
Procurando construir um dapp full-stack? Confira o tutorial full-stack em React!
Visite nosso fórum de desenvolvedores para inspiração e apoio dos engenheiros da Dfinity Foundation e da comunidade de desenvolvedores.