> For the complete documentation index, see [llms.txt](https://eth-limo.gitbook.io/documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://eth-limo.gitbook.io/documentation/beginner/how-to-use-ipfs-ipns/uploading-to-ipfs/self-hosting-instructions-for-ipfs-and-ipns.md).

# 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://3012111568-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn4PkwKyPvID2082agde0%2Fuploads%2Fgit-blob-b22ff19aab99933a58e66437010b7bf682acff45%2Fipfs-self-hosting-01.png?alt=media)
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://3012111568-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn4PkwKyPvID2082agde0%2Fuploads%2Fgit-blob-aabb4e8b4bb5aaee577eebd9c8d1a564cd9fdfac%2Fipfs-self-hosting-02.png?alt=media)
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://3012111568-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn4PkwKyPvID2082agde0%2Fuploads%2Fgit-blob-248edf7b9b971c3ee3d472afd6c6026ac42059d2%2Fipfs-self-hosting-03.png?alt=media)

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