Чтобы в интернете появилась твоя страница, нам понадобится три вещи:
- Адрес в интернете, который указывает на…
- …Сервер, который отвечает на запросы, отдавая…
- …HTML страницы.
Разработчики часто на этом моменте бросаются расчехлять тяжелую артиллерию навроде React и Gatsby, но всё это не нужно, чтобы начать. И особенно нет необходимости быть разработчиком.
Про адрес в интернете, домен, я писал вчера. Сегодня расскажу про две оставшиеся части. В результате ты получишь свою страницу в интернете, которую можно кому-нибудь показать.
Для разработчиков: можно пропустить HTML и перейти сразу к части про Микроформаты.
HTML
Все страницы в интернете написаны на HTML — это такой язык разметки документов.
На больших сайтах HTML создаётся программами, но HTML можно писать руками.
Для этого понадобится редактор, который показывает текст файлов таким, как он есть (не Ворд). Редактор может быть любым — я обычно использую VS Code, но этот пост написал в BB Edit.
HTML-документ состоит из тегов, которые указывают, что в них написано. Например:
<p>
Все счастливые семьи похожи друг на друга, каждая
несчастливая семья <em>несчастлива по-своему.</em>
</p>
обозначает абзац (p от paragraph) с указанным текстом и выделением фразы «несчастлива по-своему».
Анатомия тега примерно такая: <имя-тега возможный="атрибут">содержимое</имя-тега>. </имя-тега> закрывает тег (у некоторых тегов не бывает содержимого, поэтому и закрывать их не надо).
Браузер это нарисует так:
Все счастливые семьи похожи друг на друга, каждая несчастливая семья несчастлива по-своему.
Теги бывают самыми разными, но сегодня понадобится всего пять: <a> (ссылка), <img> (картинка), <h1> (заголовок), <p>. С их помощью можно создать «визитную карточку»:
Внутри каждого браузера есть возможность посмотреть на HTML страницы в «сыром», неотрисованном виде. Для этого нужно кликнуть правой кнопкой и найти что-то похожее на «View Source». Смотреть на код чужих сайтов и извлекать из него уроки совершенно незазорно — так начинали многие фронтенд-разработчики. Просто копировать сайты целиком, впрочем, всё же не стоит: лучше привнести немного себя в дизайн сайта.
Открой редактор, напиши в нём <p>Привет!</p>, сохрани как файл с именем index.html, и попробуй открыть этот файл в браузере. Если видно Привет!, то половина дела сделана. Теперь можно писать свою страницу, а дальше обсудим, как её разместить в интернете.
Что написать на своей странице? Выбор за тобой. Можно поставить ссылки на свои профили в соцсетях (для этого пригодится тег A), можно написать топ-3 лучших фильмов во вселенной Marvel (для справки: Железный Человек, Тор: Рагнарёк, Чёрная Пантера).
Микроформаты
Но прежде чем зануды начнут ругаться, стоит добавить немного дополнительной разметки. Она необязательна, но с ней лучше:
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Название моего сайта</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
Тут будет разметка сайта.
</body>
</html>
Доктайп указывает, что в документе используется современный HTML (были другие версии, о них мы не вспоминаем).
Внутри тега <html> находится весь документ. lang="ru" обозначает, что текст документа — русский, это помогает читалкам текста выбрать правильный голос.
В <head> — всякая дополнительная информация: в какой кодировке документ, какой заголовок страницы, подготовлена ли страница для айфона.
А внутри <body> находится содержимое нашей страницы, которое будет нарисовано внутри браузера.
В HTML нет специального тега для визитной карточки. Но у каждого тега может быть указан «класс», и на этом строятся микроформаты — способ описать смысл разметки в формате, который понятен компьютерам.
Один из микроформатов, h-card, как раз обозначает визитную карточку: имя, адрес в сети, контакты.
Скажем, у нас есть такой HTML:
<p>
<a href="https://marinintim.com">Тим Маринин</a>
(<a href="mailto:mt@marinintim.com">mt@marinintim.com</a>).
</p>
Человеку понятно, когда он смотрит на результат, что речь идёт про меня: указана ссылка на мой сайт, моё имя, электронная почта.
Тим Маринин (mt@marinintim.com).
А вот так будет выглядеть разметка, если мы добавим нужные классы:
<p class="h-card">
<a class="p-name u-url" href="https://marinintim.com">Тим Маринин</a>
(<a class="u-email" href="mailto:mt@marinintim.com">mt@marinintim.com</a>).
</p>
Такую разметку можно автоматически анализировать и извлекать из неё информацию.
Про дополнительные свойства, которые можно добавить, можно прочитать на вики микроформатов.
Главное преимущество микроформатов — мы размечаем содержимое, которое уже есть на странице, и именно ту версию, которую видят читатели. Есть альтернативные способы добавить смысла на страницу, но в них обычно приходится дублировать: одна версия для людей, другая — для машин.
Микроформаты — фундамент индивеба. Благодаря им можно создавать инструменты, которые читают сайты, без необходимости угадывать, что на странице пост, а что нет.
Сервер
Сервер — это компьютер, задача которого — отдавать сайт всем посетителям. Поэтому он должен быть постоянно включённым и подключенным к Сети. Если такой компьютер есть, то можно использовать его (там есть нюансы с тем, чтобы разрешить доступ из интернета на компьютер у определенных провайдеров, но обычно это возможно), а если такого компьютера нет, то его можно арендовать. Обычно я использую DigitalOcean, самый дешёвый сервер у них стоит 5 долларов в месяц. В мире очень много компаний, которые арендуют сервера, вот ещё два навскидку: Linode и VScale.io (Селектел, Россия).
Блокировки и Digital Ocean
С блокировками РКН часть адресов DigitalOcean попала в список «запрещенных сайтов» — это означает, что если не повезёт с айпи-адресом, то будет не зайти из России. Если что, то можно создать сервер, проверить его адрес на IsItBlockedInRussia.com (спасибо Денису за сервис!), и если не повезло, то удалить и начать заново. Я считаю эти блокировки злыми, глупыми и бессмысленными, но пока что они существуют.
Размещать в интернете статические сайты можно и бесплатно (например, с помощью Github Pages, инструкция от HTML Academy), но в следующих постах я буду рассказывать про штуки, которые потребуют наличие сервера, на котором можно запустить свои программы.
Маленькое отступление: мощностей даже пятидолларового сервера хватит на несколько сайтов, и я работаю над проектом friendware, который упростит создание серверов-коммуналок, чтобы несколько людей могли с лёгкостью сосуществовать на одном сервере.
Но до тех пор, сервер придётся настроить вручную. Для этого понадобится вечер и терпение. Дело в том, что придётся узнать по чуть-чуть про много разных тем, главное — не опустить руки и дойти до победного конца.
Создание сервера
Так как сервер будет находиться далеко, то придётся использовать ssh — это программа для удаленного доступа к серверам. Прежде чем создавать сервер, нужно создать ssh-ключ.
У vscale есть руководство, как создать ключи и добавить их в VScale — с DigitalOcean работает точно так же.
Сам сервер можно создать через интерфейс провайдера (в Digital Ocean сервер называют droplet). При создании нужно будет выбрать операционную систему. Я рекомендую Ubuntu — это один из самых распространённых вариантов, поэтому проще будет найти решения типовых проблем в интернете.
Создание сервера займёт минуту или две, и по окончании процесса получишь айпи-адрес свежесозданного сервера. Чтобы подключиться к нему, в терминале нужно будет набрать:
$ ssh root@айпи-адрес-сервера
И если увидишь что-то вроде этого, то всё получилось:
Welcome to Ubuntu 18.04.3 LTS (GNU/Linux 4.15.0-58-generic x86_64)
* Documentation: https://help.ubuntu.com
* Management: https://landscape.canonical.com
* Support: https://ubuntu.com/advantage
[...]
Last login: Mon Dec 2 17:54:45 2019 from 178.62.245.33
root@bluewhale:~#
Выйти с сервера можно используя команду exit.
Установка nginx
После этого нужно установить на сервер nginx — это программа, которая будет отдавать сайт посетителям.
У DigitalOcean есть туториалы, как настроить веб-сервер, в которых процесс расписан несколько подробнее:
- Первоначальная настройка сервера с ОС Ubuntu 18.04 — тут про общую настройку сервера
- Как установить Nginx в Ubuntu 18.04 — тут как поставить nginx
Если под рукой есть друг-линуксоид, то можно помучать его вопросами.
Но если вкратце, то установить nginx можно так:
$ apt install -y nginx
После этого можно попробовать зайти в браузере на айпи-адрес сервера. Если всё хорошо, то увидишь тестовую страницу nginx.
Загрузка файлов
Осталось совсем немного: загрузить страницу на сервер. Для этого есть разные способы, но самый простой это использовать программу scp, которая идёт в комплекте с ssh (никакого отношения к SCP Foundation программа не имеет, это просто secure copy). Для этого в терминале нужно перейти в папку с нужным файлом (cd папка_с_файлом) и запустить:
$ scp ./index.html root@айпи-адрес-сервера:/var/www/html/
Путь /var/www/html/ нужно заменить на свой, если он изменился при настройке nginx.
Можно попробовать перезагрузить страницу с айпишником в браузере — если всё получилось, то увидишь свою страницу.
Прикручивание домена
Но набирать айпи-адрес не весело, заставим этим заниматься компьютер: нужно настроить соответствие домена и адреса сервера. Это можно сделать у регистратора (искать в интерфейсе, обычно по слову DNS), создать запись типа «А» с адресом созданного сервера. После этого нужно немного подождать, потому что доменные записи обновляются не сразу, но через какое-то время сайт будет доступен по доменному имени.
К счастью, процедуру настройки сервера нужно проделать только один раз, а дальше обновлять сайт гораздо проще.
Маленькое отступление номер два: если ты дочитал до этого момента, то я предлагаю поучаствовать в тестировании friendware! Ты получишь юникс-аккаунт и кусочек сервера-коммуналки. С другой стороны, я буду администрировать этот сервер, и поэтому у тебя не получится научиться работе с серверами. Чтобы воспользоваться этим купоном, напиши мне на mt@marinintim.com со словом friendware где-нибудь в теме письма.
← День 1: домен · День 3: пост →