Docs
Use static hosting

Use static.run for static hosting

What is Static Hosting?

Static hosting is a straightforward way to serve websites to visitors - your files are delivered exactly as they're stored, with no server processing needed.

This approach is incredibly fast since there's no waiting for content to be generated, and it's typically very cost-effective since you're just serving files.

The main trade-off is that you can't process data on the server - everything needs to be pre-built. But for many sites like portfolios, blogs, and landing pages, that's perfect! When you do need dynamic features, you can always add them through APIs and client-side code.

Creating a static website

A static website consists of HTML, CSS, and JavaScript files that are served directly to users without server-side processing. To create a basic static website, follow these steps:

  1. Initial Setup:
  • Create a new folder for your project.
  • Add an index.html file at the root of the project with the following content. This file will act as the entry point of your website.
<!DOCTYPE html>
 <html>
 <head>
   <title>My Static Website</title>
   <link rel="stylesheet" href="./styles.css">
 </head>
 <body>
   <h1>Hello World!</h1>
   <p>This is a simple static site.</p>
   <button id="counter">Clicks: 0</button>
   
   <script src="./script.js"></script>
 </body>
 </html>
  1. Add Styles and Interactivity
  • Create a styles.css file for styling and add the following content:
 body {
   max-width: 40rem;
   margin: 10rem auto;
   text-align: center;
 }
 
 h1 {
   background-color: black;
   color: white;
 }
  • For interactivity include a script.js file
 const button = document.querySelector('#counter');
 let clicks = 0;
 
 button.addEventListener('click', () => {
     clicks++;
     button.textContent = `Clicks: ${clicks}`;
 });
  1. Finally, open the index.html file in your browser and test your site locally. You should see something like this, where clicking on the button updates it’s own label to show how many times it has been clicked.

hello world

Once you’re done making changes to your site, proceed to the next section to learn how to deploy it using static.run (opens in a new tab)

QuickstartStatic Website hosting