Разместите свой собственный веб-сайт БЕСПЛАТНО

Это пример того, как вы можете использовать IPFS: межпланетную файловую систему для веб-сайтов. Руководство по размещению вашего сайта на IPFS при обучении использованию node.js и шаблонов.

Вам потребуются некоторые базовые знания и понимание веб-дизайна и веб-программирования, однако, читая это, я помогу вам развернуть ваше решение в сети IPFS с помощью БЕСПЛАТНО.

Код веб-страницы

Для простоты я использую простой шаблон целевой страницы, который вы можете найти здесь. Я сделал несколько базовых настроек, но в целом это та же страница.

Этот шаблон был взят с сайта cruip.com. Cruip - это галерея бесплатных целевых страниц HTML для стартапов. Их цель - помочь создателям и стартапам на ранних стадиях с помощью высококачественных шаблонов повысить стандарты дизайна для их следующего большого проекта.

Если вы ищете настройки шаблона или планируете создать новую целевую страницу, вы можете связаться с ними по адресу [email protected], и они будут рады помочь.

Я все еще хочу сделать это сам, как мне использовать эти шаблоны?

Это проекты узлов, и идея состоит в том, чтобы использовать его в качестве базового шаблона для вас, и вы должны прочитать и следовать инструкциям, которые вы найдете в файле README.md, который я расшифровываю и расширю в этой статье, поэтому сначала убедитесь, что оба node.js и npm установлены. В противном случае выберите свою ОС и метод установки на этой странице и следуйте инструкциям.

Затем с помощью командной строки войдите в каталог проекта.

Этот шаблон поставляется с готовым к использованию файлом пакета под названием package-sample.json. Вам просто нужно переименовать его в package.json, а затем запустить npm install, чтобы установить все зависимости в ваш проект.

›Mv package-sample.json package.json
› npm install

Готово! Сценарий установки запустит npm run watch. Он запустит новый сервер, откроет браузер и будет следить за любыми изменениями SCSS или JS в каталоге `src`; как только он скомпилирует эти изменения, браузер автоматически вставит измененный файл (ы)!

Запустите любую задачу, набрав `npm run task` (где« задача »- это имя задачи в объекте« scripts »`).

Если вы заблудились здесь, я предлагаю вам прочитать это + 15-минутное введение в node.js от Виктора Офоэгбу
https://codeburst.io/the-only-nodejs-introduction-youll -ever-need-d969a47ef219

Готовы опубликовать в Интернете?

Возьмите dist / css / *. Css, dist / js / *. Js и ** / *. html и скопируйте в другой каталог, готовый к развертыванию.

>ls
README.md index.html package.json
dist  node_modules src
>mkdir to_build
>cp index.html to_build/
>cp -R dist to_build/
>ls to_build/
dist  index.html

Совет: вы можете настроить места развертывания напрямую, изменив файл package.json

Теперь давайте добавим эту папку to_build с нашим сайтом в IPFS. Это очень просто! Просто включите своего демона:

>ipfs daemon

Предупреждение: на вашем компьютере должна быть установлена IPFS! Вы можете пройти мой БЕСПЛАТНЫЙ курс по установке и основам IPFS здесь. Также вы можете следовать инструкции по установке на странице установки IPFS: https://docs.ipfs.io/introduction/install/

И добавьте каталог, содержащий ваш сайт:

>ls to_build/
dist  index.html
>ipfs add -r to_build
added QmdWEyh4V6XpiD42Gk4zJmjsjuzoGDYhpqmB4ww6dpLf5g to_build/dist/css/style.css
added QmQT78zwo9iVVRHa4yAPhcT674ni4TLwZoWwn8GNnfx7J4 to_build/dist/js/main.min.js
added QmeVLhqpN6XYf767Kkzwg51b4RvHi9AjcwQQWnCCDornf1 to_build/index.html
added QmXHyR5AK9t74iTckEQP3kU2GCeN34f4D1g28PysD7WreQ to_build/dist/css
added QmTTqN4iQ2EkqQbCyuWnxC1bEiZgRkNn7xTc2SanphsT31 to_build/dist/js
added QmaqSpPkRcdPhuaAtxpSDR8pyU9bgn3AxGPtgQ7kDYbH7s to_build/dist
added QmSVqWFhuSWJnf9Nx76EvLAtKo9UXqK5GK2czWwZsMFBWm to_build
78.86 KiB / 79.29 KiB [===============================================]  99.45%>

Самый последний хэш рядом с именем папки - это тот, который вам нужен, назовем его пока $SITE_HASH.

$SITE_HASH = QmSVqWFhuSWJnf9Nx76EvLAtKo9UXqK5GK2czWwZsMFBWm

Теперь вы можете протестировать его локально, открыв http://localhost:8080/ipfs/$SITE_HASH в своем веб-браузере!

Затем, чтобы увидеть, как он поступает с другого узла ipfs, вы можете попробовать http://gateway.ipfs.io/ipfs/$SITE_HASH.

Итак, теперь у вас есть бесплатный хостинг для вашего веб-сайта в сети IPFS. Как только вы познакомитесь с инструментом, вы начнете мыслить нестандартно и включать его в свои собственные проекты.

Примечание: в зависимости от состояния сети curl может занять некоторое время. Общедоступные шлюзы могут быть перегружены или им сложно связаться с вами.

Избавьтесь от хешей на IPFS

Если вы читали мой пост до этого момента, теперь у вас есть бесплатный веб-сайт, опубликованный в сети IPFS. Круто, правда? Но эти хеши в URL-адресах довольно уродливы. Давайте рассмотрим некоторые способы избавиться от них. Для решения этой проблемы существует множество« решений , включая сокращения URL-адресов и тому подобное. Но в настоящее время одним из самых простых решений является использование записи DNS TXT в домене, который вы контролируете.

Итак, вы можете сделать простую запись DNS TXT, содержащую dnslink=/ipfs/$SITE_HASH. Просто перейдите в настройки DNS своего домена и найдите, где добавить запись TXT. В содержании вы должны написать dnslink=/ipfs/<your hash here> или dnslink=/ipns/<your hash here> в зависимости от того, что вы используете.

Как только эта запись будет распространена, вы сможете просматривать свой сайт по адресуhttp://localhost:8080/ipns/your.domain. Теперь это немного чище. Вы также можете попробовать это на шлюзе по адресу http://gateway.ipfs.io/ipns/your.domain

Обновление страницы

Затем вы можете спросить: «А что, если я хочу изменить свой веб-сайт, DNS работает медленно!» Что ж, позвольте мне рассказать вам об этой маленькой штуке под названием IP N S (обратите внимание на «n»). IPNS - это Межпланетная система именования, вы могли заметить, что в приведенной выше ссылке вместо /ipfs/ указано /ipns/. Ipns используется для изменяемого содержимого в сети ipfs, он относительно прост в использовании и позволит вам изменять свой веб-сайт, не обновляя каждый раз запись DNS! Итак, как вы его используете?

После добавления веб-страницы просто выполните:

>ipfs name publish $SITE_HASH
Published to <your peer id>: /ipfs/$SITE_HASH

(Отказ от ответственности: при использовании IPNS для обновления веб-сайтов важно учитывать, что ресурсы могут быть загружены из двух разных разрешенных хэшей при обновлении вашего веб-сайта, что приведет к устаревшим / отсутствующим ресурсам, если не учтено)

Теперь вы можете проверить, что это работает, просмотрев: http://localhost:8080/ipns/<your peer id>. А также попробуйте ту же ссылку на публичном шлюзе. Убедившись, что это работает, давайте снова скроем хеш. Измените TXT-запись DNS на dnslink=/ipns/<your peer id>, дождитесь распространения этой записи, а затем попробуйте получить доступ к http://localhost:8080/ipns/your.domain.

При публикации текущей версии сайта в IPNS:

>ipfs name publish QmSVqWFhuSWJnf9Nx76EvLAtKo9UXqK5GK2czWwZsMFBWm
Published to QmQ21Eg7NHG4sgzMQtQWUeCzKA5FtdgsyArMifj4enk4JW: /ipfs/QmSVqWFhuSWJnf9Nx76EvLAtKo9UXqK5GK2czWwZsMFBWm

Это вернет ваш peerID (QmQ21Eg7NHG4sgzMQtQWUeCzKA5FtdgsyArMifj4enk4JW) и хэш, который вы публикуете для peerID. Вы можете подтвердить, запустив

ipfs name resolve <peerID>

После этого вы можете перейти на опубликованную версию сайта по ссылке: https://ipfs.io/<▪ipns

Используйте свой собственный домен

На данный момент у вас есть веб-сайт на ipfs / ipns, и вам может быть интересно, как вы могли бы раскрыть его на http://your.domain, чтобы сегодняшние пользователи Интернета также могли получить к нему доступ, не зная об этом. На самом деле это удивительно просто, все, что вам нужно для этого, - это ваша ранее созданная запись TXT и указать запись A your.domain на IP-адрес демона ipfs, который прослушивает порт 80 для запросов HTTP ( например gateway.ipfs.io). Браузеры пользователей будут отправлять your.domain в заголовке запросов хоста, и у вас есть записи TXT dnslink, поэтому шлюз ipfs распознает your.domain как имя IPNS и будет обслуживать его из-под /ipns/your.domain/ вместо /.

Итак, если вы укажете запись A your.domain на IP-адрес gateway.ipfs.io, а затем дождетесь распространения DNS, тогда любой сможет получить доступ к вашему сайту, размещенному на ipfs, без какой-либо дополнительной настройки просто по адресу http://your.domain.

В качестве альтернативы можно использовать записи CNAME, чтобы указывать на записи DNS шлюза. Таким образом, IP-адреса шлюза обновляются автоматически. Обратите внимание, однако, что записи CNAME не позволяют другим записям, таким как TXT, ссылаться на запись ipfs / ipns. По этой причине ipfs позволяет создать запись DNS TXT для _dnslink.your.domain с dnslink=/ipns/<yourpeer id>.

Таким образом, создав CNAME для your.domain в gateway.ipfs.io и добавив запись _dnslink.your.domain с dnslink=/ipns/<your peer id>, вы можете разместить свой веб-сайт без явной ссылки на IP-адреса шлюза ipfs.

Получайте лучшие предложения по программному обеспечению прямо в свой почтовый ящик

Разместите свой собственный веб-сайт БЕСПЛАТНО