Documentation
  • INTRODUCTION
    • What is ENS?
    • What is a dWebsite?
    • What is IPFS/IPNS?
    • What is eth.limo?
      • Gateway Basics
        • DNS over HTTPS
  • Beginner
    • How to register an ENS domain/name
    • Setting up a GitHub Repository
    • How To Install IPFS Locally
      • IPFS Desktop (Windows)
      • IPFS Desktop (Linux)
      • IPFS Desktop (Mac)
    • How to use IPFS/IPNS
      • Uploading to IPFS
        • Self-Hosting Instructions for IPFS and IPNS
        • Hosting using a pinning service
    • Setting Up Your ENS Name/Domain
      • Updating Your ENS Content Records
      • Content Hash Overview
        • Understanding Content Hashes, IPNS, and IPFS for ENS
        • Understanding IPFS Content Identifiers (CIDs)
  • IPFS Pinning Providers
    • Filebase
      • Using the Filebase Public IPFS Gateway
      • Filebase IPFS Pinning
  • STATIC SITE BUILDERS/TEMPLATES
    • -
  • Intermediate
    • Using eth.limo with IPFS (Kubo)
    • -
    • -
    • -
  • .ART Resolution
  • .gno Resolution
Powered by GitBook
On this page
  1. Beginner
  2. How to use IPFS/IPNS
  3. Uploading to IPFS

Self-Hosting Instructions for IPFS and IPNS

PreviousUploading to IPFSNextHosting using a pinning service

Last updated 1 year ago

Add your site

The next step is to import your site into IPFS using the IPFS desktop app you just installed. The website we'll be using is incredibly simple. The purpose of it is to display a simple clock as a webpage. This code will display a simple clock that updates every second, showing the current time in hours, minutes, and seconds.

  1. Create a file called index.html and paste in the following code:\

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Simple Clock</title>
        <style>
            body {
                font-family: Arial, sans-serif;
                background-color: #f0f0f0;
                display: flex;
                justify-content: center;
                align-items: center;
                height: 100vh;
                margin: 0;
            }
            #clock {
                font-size: 48px;
            }
        </style>
    </head>
    <body>
        <div id="clock"></div>
        <script>
            function updateClock() {
                const now = new Date();
                const hours = now.getHours().toString().padStart(2, '0');
                const minutes = now.getMinutes().toString().padStart(2, '0');
                const seconds = now.getSeconds().toString().padStart(2, '0');
                document.getElementById('clock').innerText = `${hours}:${minutes}:${seconds}`;
            }
    
            setInterval(updateClock, 1000);
            updateClock(); // Initial call to display the clock immediately
        </script>
    </body>
    </html>
  2. Open IPFS desktop and go to the Files page.

  3. Click Add → File.

  4. Navigate to your index.html file and select Open.

    Choose a file window open in IPFS desktop.
  5. Click the triple dot menu on index.html and select Share link.

  6. Click Copy to copy the file's URL to your clipboard.

    Share files window in IPFS desktop.
  7. Open a browser and paste in the URL you just copied.

Your browser should load the website in a few moments! This can take up to a few minutes the first time. You can move onto the next section while the site is loading.

IPFS nodes treat the data they store like a cache, meaning that there is no guarantee the data will continue to be stored. Pinning a file tells an IPFS node to treat the data as essential and not throw it away. You should pin any content you consider important to ensure that data is retained over the long term. IPFS Desktop allows you to pin files straight from the Files tab.

However, if you want your IPFS data to remain accessible when your local IPFS node goes offline, you might want to use another option like a pinning service.

Pinning files

IPFS Desktop application showing the pinning option.
#