# Self-Hosting Instructions for IPFS and IPNS

#### Add your site <a href="#linux" id="linux"></a>

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.](https://docs.ipfs.tech/assets/img/add-ipfs-desktop-open-file.ae222cb9.png)
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.](https://docs.ipfs.tech/assets/img/add-ipfs-desktop-share-files.d89b6b1d.png)
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.

### [#](https://docs.ipfs.tech/how-to/websites-on-ipfs/single-page-website/#pinning-files)Pinning files <a href="#pinning-files" id="pinning-files"></a>

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.

![IPFS Desktop application showing the pinning option.](https://docs.ipfs.tech/assets/img/ipfs-desktop-showing-pinning.ec877ccb.png)

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*.
