如何在IPFS桌面上托管网站

时空云
更新于 2020-12-02 11:49
阅读 2119

如何在IPFS桌面上托管网站。

如何在[IPFS](http://ipfs.cn)桌面上托管网站。

![10.png](https://img.learnblockchain.cn/attachments/2020/12/kFGjIiEi5fc70dee32b4f.png)

我们将要托管的这个网站叫做随机星球事实（Random Planet Facts），为什么要叫做“随机”呢？因为每刷新一次，就会有新的一句话出现，因此具有“随机性”。

首先，我们先构建一个名为“index.html”的文档，构建这个文件就跟构建word文档一样简单，我们可以先创建一个txt文档（又称为文本文档），然后，我们将下面的内容复制到txt文档中，选择将文档另存为，另存为的文件名为“index.html”。

<pre style="margin: 0.85rem 0px; padding: 1.25rem 1.5rem; max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: 0.544px; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); color: rgb(204, 204, 204); background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; font-family: Consolas, Monaco, &#34;Andale Mono&#34;, &#34;Ubuntu Mono&#34;, monospace; font-size: 16px; text-align: left; word-break: normal; overflow-wrap: normal; line-height: 1.4; tab-size: 4; overflow: auto; border-radius: 6px; z-index: 1;"><section style="margin: 0px 16px; padding: 0px; max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;"><code style="margin: 0px; padding: 0px; max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important; font-family: source-code-pro, Menlo, Monaco, Consolas, &#34;Courier New&#34;, monospace; color: rgb(255, 255, 255); font-size: 0.85em; border-radius: 0px;">&lt;!DOCTYPE html&gt; &lt;html lang=&#34;en&#34;&gt; &lt;head&gt; &lt;meta charset=&#34;utf-8&#34; /&gt; &lt;title&gt;Random Planet Facts&lt;/title&gt; &lt;meta name=&#34;description&#34; content=&#34;Get a random fact about a planet in our solar system.&#34; /&gt; &lt;meta name=&#34;author&#34; content=&#34;The IPFS Docs team.&#34; /&gt; &lt;style&gt; body { margin: 15px auto; max-width: 650px; line-height: 1.2; font-family: sans-serif; font-size: 2em; color: #fff; background: #444; } &lt;/style&gt; &lt;/head&gt; &lt;body onload=&#34;main()&#34;&gt; &lt;h1&gt;Random Planet Facts&lt;/h1&gt; &lt;p id=&#34;output_p&#34;&gt;&lt;/p&gt; &lt;script&gt; function main() { const facts = [ &#39;Mars is home to the tallest mountain in our solar system.&#39;, &#39;Only 18 out of 40 missions to Mars have been successful.&#39;, &#39;Pieces of Mars have fallen to Earth.&#39;, &#39;One year on Mars is 687 Earth days.&#39;, &#39;The temperature on Mars ranges from -153 to 20 °C.&#39;, &#39;One year on Mercury is about 88 Earth days.&#39;, &#39;The surface temperature of Mercury ranges from -173 to 427°C.&#39;, &#39;Mercury was first discovered in 14th century by Assyrian astronomers.&#39;, &#39;Your weight on Mercury would be 38% of your weight on Earth.&#39;, &#39;A day on the surface of Mercury lasts 176 Earth days.&#39;, &#39;The surface temperature of Venus is about 462 °C.&#39;, &#39;It takes Venus 225 days to orbit the sun.&#39;, &#39;Venus was first discovered by 17th century Babylonian astronomers.&#39;, &#39;Venus is nearly as big as the Earth with a diameter of 12,104 km.&#39;, &#39;The Earth\&#39;s rotation is gradually slowing.&#39;, &#39;There is only one natural satellite of the planet Earth, the moon.&#39;, &#39;Earth is the only planet in our solar system not named after a god.&#39;, &#39;The Earth is the densest planet in the solar system.&#39;, &#39;A year on Jupiter lasts around 4333 earth days.&#39;, &#39;The surface temperature of Jupiter is around -108°C.&#39;, &#39;Jupiter was first discovered by 7th or 8th century Babylonian astronomers.&#39;, &#39;Jupiter has 4 rings.&#39;, &#39;A day on Jupiter lasts 9 hours and 55 minutes.&#39;, &#39;Saturn was first discovered by 8th century Assyrians.&#39;, &#39;Saturn takes 10756 days to orbit the Sun.&#39;, &#39;Saturn can be seen with the naked eye.&#39;, &#39;Saturn is the flattest planet.&#39;, &#39;Saturn is made mostly of hydrogen.&#39;, &#39;Four spacecraft have visited Saturn.&#39;, &#39;Uranus was discovered by William Herschel in 1781.&#39;, &#39;A year on Uranus takes 30687 earth days.&#39;, &#39;Uranus turns on its axis once every 17 hours, 14 minutes.&#39;, &#39;With minimum atmospheric temperature of -224°C Uranus is nearly coldest planet in the solar system.&#39;, &#39;Only one spacecraft has flown by Uranus, the Voyager 2.&#39;, &#39;Neptune was discovered in 1846 by Urbain Le Verrier and Johann Galle.&#39;, &#39;Neptune has 14 moons.&#39;, &#39;The average temperatue of Neptune is about -201 °C.&#39;, &#39;There is a 1:20 million scale model of the solar system in Sweden.&#39;, &#39;The gap between the Earth and our moon is bigger than the diameters of all the planets combined.&#39;, &#39;The first accurate calculation of the speed of light was using Jupiter\&#39;s moons&#39;, &#39;Jupiter\&#39;s magnetic field is believed to be a result of rapidly spinning metallic hydrogen at the core, and is ~10x stronger than the Earth\&#39;s.&#39;, &#39;Venus spins backwards.&#39;, &#39;Uranus spins sideways, relative to the ecliptic plane of the solar system.&#39;, &#39;It is easier to reach Pluto or escape the solar system from Earth than being able to &lt;i&gt;land&lt;/i&gt; on the Sun.&#39; ] document.querySelector(&#39;#output_p&#39;).innerHTML = facts[Math.floor(Math.random() * facts.length)] } &lt;/script&gt; &lt;/body&gt; &lt;/html&gt;</code></section></pre>

将上述内容复制并且存储为“index.html”文档之后，我们可以看到，原本的文本文档变成了一个网页索引文件。

![11.png](https://img.learnblockchain.cn/attachments/2020/12/mcbKqnEM5fc70e319813e.png)

接下来，我们将index.html文件添加到IPFS桌面中。

![12.png](https://img.learnblockchain.cn/attachments/2020/12/q8GNUZo85fc70e3d4f86c.png)

文件添加成功后，点击index.html旁边的“三点”，单击复制将文件的URL复制到剪贴板。

![13.png](https://img.learnblockchain.cn/attachments/2020/12/YVjyc0NP5fc70e4607078.png)

最后，我们只需要将链接复制到浏览器上， 然后以"ipfs.io”为开头的网站就展现在我们眼前啦!

![14.png](https://img.learnblockchain.cn/attachments/2020/12/WxPiVlFP5fc70e5336df4.png)

如何在IPFS桌面上托管网站。

<pre style="margin: 0.85rem 0px; padding: 1.25rem 1.5rem; max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: 0.544px; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); color: rgb(204, 204, 204); background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; font-size: 16px; text-align: left; word-break: normal; overflow-wrap: normal; line-height: 1.4; tab-size: 4; overflow: auto; border-radius: 6px; z-index: 1;"><section style="margin: 0px 16px; padding: 0px; max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;"><code style="margin: 0px; padding: 0px; max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important; font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(255, 255, 255); font-size: 0.85em; border-radius: 0px;"><!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Random Planet Facts</title> <meta name="description" content="Get a random fact about a planet in our solar system." /> <meta name="author" content="The IPFS Docs team." /> <style> body { margin: 15px auto; max-width: 650px; line-height: 1.2; font-family: sans-serif; font-size: 2em; color: #fff; background: #444; } </style> </head> <body onload="main()"> <h1>Random Planet Facts</h1> <p id="output_p"></p> <script> function main() { const facts = [ 'Mars is home to the tallest mountain in our solar system.', 'Only 18 out of 40 missions to Mars have been successful.', 'Pieces of Mars have fallen to Earth.', 'One year on Mars is 687 Earth days.', 'The temperature on Mars ranges from -153 to 20 °C.', 'One year on Mercury is about 88 Earth days.', 'The surface temperature of Mercury ranges from -173 to 427°C.', 'Mercury was first discovered in 14th century by Assyrian astronomers.', 'Your weight on Mercury would be 38% of your weight on Earth.', 'A day on the surface of Mercury lasts 176 Earth days.', 'The surface temperature of Venus is about 462 °C.', 'It takes Venus 225 days to orbit the sun.', 'Venus was first discovered by 17th century Babylonian astronomers.', 'Venus is nearly as big as the Earth with a diameter of 12,104 km.', 'The Earth\'s rotation is gradually slowing.', 'There is only one natural satellite of the planet Earth, the moon.', 'Earth is the only planet in our solar system not named after a god.', 'The Earth is the densest planet in the solar system.', 'A year on Jupiter lasts around 4333 earth days.', 'The surface temperature of Jupiter is around -108°C.', 'Jupiter was first discovered by 7th or 8th century Babylonian astronomers.', 'Jupiter has 4 rings.', 'A day on Jupiter lasts 9 hours and 55 minutes.', 'Saturn was first discovered by 8th century Assyrians.', 'Saturn takes 10756 days to orbit the Sun.', 'Saturn can be seen with the naked eye.', 'Saturn is the flattest planet.', 'Saturn is made mostly of hydrogen.', 'Four spacecraft have visited Saturn.', 'Uranus was discovered by William Herschel in 1781.', 'A year on Uranus takes 30687 earth days.', 'Uranus turns on its axis once every 17 hours, 14 minutes.', 'With minimum atmospheric temperature of -224°C Uranus is nearly coldest planet in the solar system.', 'Only one spacecraft has flown by Uranus, the Voyager 2.', 'Neptune was discovered in 1846 by Urbain Le Verrier and Johann Galle.', 'Neptune has 14 moons.', 'The average temperatue of Neptune is about -201 °C.', 'There is a 1:20 million scale model of the solar system in Sweden.', 'The gap between the Earth and our moon is bigger than the diameters of all the planets combined.', 'The first accurate calculation of the speed of light was using Jupiter\'s moons', 'Jupiter\'s magnetic field is believed to be a result of rapidly spinning metallic hydrogen at the core, and is ~10x stronger than the Earth\'s.', 'Venus spins backwards.', 'Uranus spins sideways, relative to the ecliptic plane of the solar system.', 'It is easier to reach Pluto or escape the solar system from Earth than being able to land on the Sun.' ] document.querySelector('#output_p').innerHTML = facts[Math.floor(Math.random() * facts.length)] } </script> </body> </html></code></section></pre>

将上述内容复制并且存储为“index.html”文档之后，我们可以看到，原本的文本文档变成了一个网页索引文件。

接下来，我们将index.html文件添加到IPFS桌面中。

文件添加成功后，点击index.html旁边的“三点”，单击复制将文件的URL复制到剪贴板。

最后，我们只需要将链接复制到浏览器上，然后以"ipfs.io”为开头的网站就展现在我们眼前啦!

学分: 1
分类: IPFS
标签: IPFS IPFS挖矿 FileCoin Filecoin 挖矿

如何在IPFS桌面上托管网站

0 条评论

文章目录