Мне время от времени попадались блоги, которые мгновенно грузятся, просто выглядят, не перегружают дизайн блоками по всем сторонам и на которых нет рекламы. Такие сайты своим дизайном создают ощущение тишины контента по сравнению с остальными кричащими будто казино-площадки в интернете.
В основном такие аскетичные сайты - это одинокие блоги разработчиков, в которых чаще всего англоязычные, а иногда и русскоязычные авторы пишут на технические темы уникальные статьи. В интернете часто при чтении статьи создаётся ощущение, что она написана с кучей воды, будто с применением чат-гпт. На таких же сайтах чувствуется всегда, что контент пишет живой человек по ту сторону экрана.
Стало интересно разобраться что это за сайты такие, как они работают и сделать себе также.
У сайта, с которого вы читаете эти строки, на момент написания этого поста используется бесплатная версия движка Эгея. Этот движок делает много красивого: фотки выглядят шикарно, типографика очень красивая, есть комментарии, теги.
За время использования Эгеи накопились моменты, которые я бы хотел устранить:
Моменты, которые мне хотелось изменить в Эгее и работе этого блога:
- нет и не будет обрезки постов (так задумано создателем движка)
- нет главного меню по категориям сверху
- мне не нравится как выглядят без пулек вложенные списки с отступом нельзя давать ссылку на параграф, то есть я не могу делать оглавление у лонгридов
- мои посты спрятаны внутри базы данных, а я хочу иметь доступ к своим постам в универсальном формате.
- я пишу редко и хочу оставить посты надолго без какого-либо обслуживания. Я не понимаю как работает Эгея, какой-то язык PHP внутри, базы данных. Хостинги с базами данных стоят дороже. А мне нужно просто выложить посты, чтобы их можно было найти в интернете.
- попробовал подключить вспомогательный инструмент для вебмастеров Яндекс.Вебмастер. В консоли администратора стали показываться ошибки — нет файла сборного со всеми постами SiteMap.xml, у разных постов одинаковые заголовки. Трафик с поисковых систем как будто не идет.
- сайты, которые быстро грузятся, выдаются в поиске выше остальных и я сам так находил часто эти самые блоги с мгновенной загрузкой.
- я не хочу прятать свои посты за неудобством движка, прятать уверсальный текстовый формат поста в базе данных.
- Эгея использует свои значки-символы для редактирования. Я привык к markdown-разметке, потому что все современные программы для заметок используют markdown для быстрого редактирования текста при написании текста. Этот язык разметки форматирования легко запоминается, ведь он применяется везде. Но Эгея решила пойти своим путём и когда я делал оформление постов и выделял жирным, цитаты и всё прочее, то приходилось открывать справку каждый раз, чтобы вспомнить какой символ в Эгее за это отвечает. Возможно, это покажется не такой большой проблемой, но мне хотелось сохранить гибкость моего контента, который бы я мог переносить в будущем между разными платформами. Markdown-форматирование позволяет это сделать легко: я просто ставлю другой движок-обработчик своих текстов и форматирование будет показано правильно. В случае же миграции с Эгеи моё форматирование слетит и не сохранится и придётся редактировать все свои посты заново.
- Яндекс-вебмастер, который замеряет статистику посещений этого блога ругается на отсутствие файла sitemap.xml, который нужен для сообщения Яндекс-роботам какая структура у сайта, какие новые страницы появились. Если Яндекс-роботам что-то не нравится, то сайт будет отображаться в поисковой выдаче ниже чем остальные.
Эгея - это динамический движок сайта. На динамических сайтах каждая страница перед отправкой посетителю генерируется веб-приложением, работающим на сервере. Время загрузки таких страниц зависит от количества элементов, которые встраиваются в шаблон страницы. Каждый такой элемент при запросе от пользователя должен быть загружен из базы данных на сервере, либо со сторонних серверов, чтобы получилась страница, которую увидит пользователь.
Другую категорию сайтов придеставляю собой так называемые статические сайты - сайты, на которых страница, запрошенная пользователем, не компонуется при запросе с его стороны в реальном времени, а сразу отправляется как готовый html-файл.
Для генерации статических html-страниц существуют генераторы статических сайтов - специальные программы, которые видят текстовые файлы в папке и по команде генерируют весь сайт в виде набора html-страниц, которые загружаются на хостинг. Когда клиент заходит на такой сайт, то он просто скачивает html-страницы при просмотре. Время на генерацию не тратится. Поэтому такие сайты и грузятся так быстро - страницы уже лежат готовые на сервере.
Такие сайты не интерактивные, здесь нет динамически отображаемых элементов или скриптов, которые разным пользователям показывают разный контент. Нет личного кабинета и привычных комментариев. Но для блога это и не нужно. Задача блога - отобразить текст и мысль автора.
Генератор статических сайтов собирает финальный набор html-страниц из текстовых файлов, в которые автор пишет свои посты обычным текстом с markdown-разметкой.
Загрузку на хостинг можно делать вручную, но учитывая, что я недавно разобрался с git, то это можно будет автоматизировать. А сейчас и вообще многие компании предоставляют хостинг для статических веб-страниц бесплатно, например так делает GitHub. Получается можно сделать бесплатный хостинг для своего блога.
Мне сейчас интересно поизучать Линукс, командную строку, потренироваться на чем-нибудь, чтобы мозги покипели от изучения чего-то неизвестного. Поэтому я поставил себе задачу — разобраться как работают статические сайты и сделать себе такой же. В идеале при этом использовать не готовый хостинг, как сейчас, а взять виртуальный сервер и разобраться как в Линуксе самому организовать веб-сервер и всё, что еще потребуется.
Для динамического сайта пока пишешь посты через веб-интерфейс движка, с кнопочками для редактирования, то ничего не изучаешь нового. С точки зрения автора блога динамические движки для блогов отличаются только косметическим дизайном админки, а функции редактирования постов везде одинаковые: заходишь в расширенную админ-панель блога и пишешь там свой текст применяя форматирование. В случае статических сайтов посты (текстовые файлы) располагаются при написании на локальной машине и для редактирования контента используются текстовые редакторы (text editors), а не веб-интерфейс.
Хранить свои посты у себя же локально в виде простых текстовых файлов очень надёжно. Хостинг и сервис отображения сайтов может завтра исчезнуть, а мои файлы с постами останутся у меня. Текстовые файлы удобно писать в редакторах кода, которые специально существуют для редактирования текста. Обычно этот текст - это код, который пишут разработчики, но для написания постов они тоже предоставляют много удобств (быстрая простановка ссылок на соседние файлы-посты, быстрая вставка картинок с markdown-форматированием, загрузка на хостинг, отображение оглавления и другое).
Сами редакторы кода — это отдельная тема, кроличья нора, куда программисты ныряют на несколько лет приключений для того, чтобы выбрать самый удобный для себя. В текстовых редакторах по умолчанию настроены окна для удобной работы: есть дерево файлов, и окно редактирования текста, окно с терминалом для компилирования приложения через движок-программу, встроенные возможности для работы с git через удобный интерфейс. Их много разных, но я пока решил поработать с VS Code и мне нравится.
Вот, кстати, про git: все посты хранятся в репозитории, а значит и локально у меня на машине. Они будут надежно защищены от исчезновения.
- Случится что с ноутбуком — копия данных будет храниться в репозитории, откуда я смогу её забрать.
- Случится что с репозиторием — у меня копия на ноуте.
- Сел за другой ноут? Пожалуйста, можно скачать весь репозиторий туда, поработать и загрузить изменения в центральный.
Генераторов статических сайтов существует много разных. Пока что я установил Hugo, играюсь локально, решаю возникающие вопросы — как генерировать готовые страницы из набора файлов, как вставлять картинки в посты, как сделать RSS фид, как генерировать sitemap.xml, который нужен для поисковых систем. Поэтому, если вдруг вы читаете меня через RSS-клиент и вам перестанут приходить обновления, то значит я всё таки изменил дизайн и RSS потом тоже сменил свою ссылку.
Полный список настроек для себя на будущее я собрал в отдельном посте.