En el anterior post de cómo usar IPFS como una nube personal, aprendimos un poco que era el protocolo IPFS y como guardar nuestros archivos y carpetas en la red descentralizada, esta vez aprenderemos a usarlo como nuestro servidor para alojar nuestro sitio web.
Instalando IPFS
Vamos a repasar un poco la instalación de IPFS en el navegador, si tienes el navegador brave, contaras con una ventaja extra de seguridad.
1. Ve a la tienda de chrome y descarga el plugin IPFS Compañía
2. Instala el plugin.
3. Si usas brave browser activa el nodo de brave para contar con mayor seguridad.
4. Activa el nodo local desde el plugin IPFS companion.
Si algo no te queda claro de la instalación puedes repasar como hacerlo en el post anterior.
Publicando una web en IPFS.
1. Cree una página web html. A continuación, un ejemplo:
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Random Planet Facts - Multipagina</title>
<link href="https://unpkg.com/nes.css@2.2.0/css/nes.min.css" rel="stylesheet" />
<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: Press Start 2P;
font-size: 2em;
color: #fff;
background: #444;
}
</style>
</head>
<body onload="main()">
<h1>Random Planet Facts</h1>
<img src="moon-logo.png" />
<p id="output_p"></p>
<h4><a href="about.html">Acerca de esta web</a></h2>
<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 <i>land</i> on the Sun.'
]
document.querySelector('#output_p').innerHTML =
facts[Math.floor(Math.random() * facts.length)]
}
</script>
</body>
</html>
2. Haga clic en el botón importar del plugin IPFS
3. Arrastre el archivo dentro del area de importación. Esto creará una carpeta con la fecha actual y dentro estará el archivo.
4. Dentro del apartado de archivos, seleccione el archivo Html y haga clic en las opciones [...]
5. Seleccione la opción de compartir enlace: https://ipfs.io/ipfs/QmfXVJKnw1Ds5XnAAJaLij955WhGbypsBqPy1xspG18inx?filename=index.html
6. Pegue el enlace en el navegador, después de un rato verá cargado su página web.
7. Su archivo html podría borrarse en poco tiempo, así que es necesario pinearla para mantenerla en el caché de IPFS por largo tiempo.
haga clic en opciones [...]/Set Pinning
Hasta aquí ya has logrado publicar tu página web, el problema es que esta estará visible siempre y cuando tu PC esté encendido, no es necesario que el plugin esté activo para poder ser visualizado.
Quizás quieras que tu web siempre esté activo, puedes optar por un servicio que permita que tus archivos siempre estén en línea hasta un peso máximo de 1GB para eso podrás usar un pinning service como pinata cloud.
Publicando paginas multi-enlace.
Ya hemos publicado una sola página tomando directamente el link al archivo HTML, pero lo normal es que un sitio web se conforme de varias páginas que se enlazan entre ellas.
1. Cree una carpeta que tenga dos páginas #html que se enlacen una a otra y que al menos una página tenga una imagen. A continuación, un ejemplo de lo que sería la segunda página:
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Random Planet Facts</title>
<link href="https://unpkg.com/nes.css@2.2.0/css/nes.min.css" rel="stylesheet" />
<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: Press Start 2P;
font-size: 2em;
color: #fff;
background: #444;
}
</style>
</head>
<body onload="main()">
<h1>Random Planet Facts</h1>
<p>
Este sitio web entrega hechos aleatorios acerca de
los <i>planetas</i> de nuestro sistema solar
! ¡Refresque la página principal para obtener un nuevo hecho!
</p>
<h4><a href="index.html">Página principal</a></h2>
<footer>
<hr />
Created by ___.
</footer>
</body>
</html>2. Abra el nodo en el apartado de Archivos y haga clic en el botón de importar y elige la carpeta del proyecto.
3. Seleccione la carpeta y haga clic en el botón de opciones [...] y seleccione compartir enlace.
4. Copie y pegue el enlace en el navegador, podría ver ahora la página html funcionando correctamente incluso haciendo click en el enlace.
Este ejemplo funcionará si el nombre de la página principal es index.html, si tiene otro nombre el vínculo se comportará como un sitio ftp con archivos dentro.
Note que no es necesario vincular los href con direcciones #CID aunque bien pudiera, es mejor usar las rutas relativas.
Haciendo uso de Pinata Cloud.
Pinata cloud es un servicio que garantiza mantener nuestros archivos fijos a la red IPFS, es gratuito hasta 1GB de contenido, de ahi en adelante hay planes interesantes donde realmente puedes hacer uso de la red como si fuese un servidor, pudiendo vincular un dominio a la dirección CID de tu página principal. Sin embargo, creo que sus servicios son muy caros respecto a One Drive, Google Drive, Dropbox entre otros más conocidos y comerciales.
Vamos a asegurar nuestros archivos al servicio de pinata cloud.
1. vaya a la web de Pinata cloud y regístrese.
2. Confirme su cuenta.
3. Haga clic en Upload y seleccione cualquiera de las 3 opciones disponibles. subir archivo o copiar el código CID
4. Sí eligió subir mediante CID, vaya al plugin de IPFS Companion, selecciones el archivo y haga clic en la opción copiar CID
5. vuelva a la página de pinata y pegue el código CID en la primera caja de texto y en la segunda escriba el nombre del archivo.
6. luego de un minuto la web ya mostrará el archivo con un nuevo código. QmfXVJKnw1Ds5XnAAJaLij955WhGbypsBqPy1xspG18inx
https://ipfs.io/ipfs/QmfXVJKnw1Ds5XnAAJaLij955WhGbypsBqPy1xspG18inx?filename=index.html
QmfXVJKnw1Ds5XnAAJaLij955WhGbypsBqPy1xspG18inx
Como puedes ver es exactamente el mismo código que el que tienes en el nodo personal, esto te ofrece la ventaja respecto a subir directamente el archivo,
que cuando tu PC está encendida, entonces tu PC también servirá de caché para la red.
Conclusiones.
Como puedes ver IPFS no es difícil de usar, es gratuito si usas la red comunitaria ilimitadamente pero el riesgo de perder algún archivo y es de pago usando servicios como Pinata cloud que te dan computadoras dedicadas para fijar el contenido a la red, el servicio de Pinata cloud es donde se cuelgan los NFT y los artículos de los juegos del metaverso.
Me pareció interesante mostrarte esta alternativa para alojar tus proyectos, publicar noticias delicadas en una web estilo #WikiLeaks resistente a la censura y descentralizado mediante blockchain, espero que te sea util y nos vemos en un proximo post.
Comments