Self-Hosting Instructions for IPFS and IPNS

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.

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>

Open IPFS desktop and go to the Files page.
Click Add → File.
Navigate to your index.html file and select Open.
Choose a file window open in IPFS desktop.
Click the triple dot menu on index.html and select Share link.
Click Copy to copy the file's URL to your clipboard.
Share files window in IPFS desktop.
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.

#Pinning files

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.

PreviousUploading to IPFS NextHosting using a pinning service

Last updated 8 months ago

<!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>