Skip to main content

Serving static assets

Intermediate
Tutorial

Overview​

Types of assets​

Assets can come in many forms, such as:

  • CSS.

  • JavaScript.

  • React.

  • HTML.

  • Images, videos, or streaming content.

  • User interfaces that combine CSS, HTML, React, or other frameworks together.

  • Dynamic assets, such as dashboards that frequently update with real-time data.

  • Point of sale interfaces.

This guide will focus on static assets using HTML and CSS. For more information on using other asset types, follow the custom frontend guide or the existing frontend guide.

Creating a static index.html page​

In your project's asset subdirectory, create an index.html file that contains some HTML code, such as:

<!DOCTYPE html> 
<html> 
<head> 
<title>Static BigFile webpage</title> 
<meta charset="UTF-8"> 
<meta name="description" content="This is a static webpage hosted on BIG using a frontend canister."> 
</head> 
<body> 
<h1>Welcome to my BigFile-hosted webpage</h1> 
<p>This showcases how static assets can be hosted within an BIG Smart Contract.</p>
<img src="testpic.jpg" alt="This is a test image" height="420" width="420">
<table> 
<tr> 
<td>Row 1 - Column 1</td> 
<td>Row 1 - Column 2 </td> 
</tr> 
<tr> 
<td>Row 2 - Column 1</td> 
<td>Row 2 - Column 2</td> 
</tr> 
</table> 
</body> 
</html>

This snippet uses an image, testpic.jpg. You can replace this with any image asset stored in your asset subdirectory.

Styling the page with CSS​

To make customize the visualization of HTML webpages, you can use CSS by editing your index.html file to include a style definition:

<style> 
    #nav { 
        background: lightpurple; 
        overflow: auto; 
        } 
    #nav li { 
        float: left; 
        padding: 10px; 
        } 
    #nav li:hover { 
        background: gray;
        } 
</style> 
<ul id="nav"> 
<li><a href="">Home</a></li> 
<li><a href="">Shop</a></li> 
<li><a href="">About Us</a></li> 
<li><a href="">Contact Us</a></li> 
</ul>

Deploy your webpage​

Once your static website is ready to deploy, you can deploy it to the mainnet with the Mainnet command.

Deploying to the mainnet will cost cycles.

Once deployed, your webpage will be served at a URL such as:

Next steps​

Here are some tutorials with example code for developing a frontend further: