Первоначально опубликовано на https://adamlynch.com/static-site-regeneration.

У меня уже много лет есть свой собственный сайт, но я мало им пользуюсь. Требовалось обновление. Я сосредотачивался на неправильных вещах, пытался сделать все и медленно ничего не добивался. Внешне он не сильно изменился, но это только верхушка айсберга. Он был полностью переделан под поверхностью.

Катализатором было письмо; Я скучаю по этому. Я отвыкла. Может быть, я был слишком занят, я мог немного перегореть. Я почти не брался за перо с тех пор, как написал свою книгу, а также продолжение Smashing Magazine post и доклады. Хуже того (читай: труднее признать), я мог бы быть доволен. Угу. Простите, в конце концов, это были пункты списка желаний.

Я люблю учиться. Я впитал так много знаний, которыми поделился ради обмена знаниями. В частности, альтруизм веб-сообщества поистине удивителен. Этот блог — попытка отдать, сыграть свою роль.

Мне это тоже пойдет на пользу, конечно. Например, писательство заставляет меня углублять свое понимание тем. Я не исключаю, что снова буду писать для других блогов, но мне также нужен мой блог. Я хочу свободы, я хочу контроля. Кроме того, сторонние проекты — это здорово, верно?

Не изобретайте велосипед, если только вы не планируете узнать больше о колесах.

Я нахожу генераторы статических сайтов увлекательными. Работа конечного пользователя оптимальна, потому что это просто статические HTML-страницы, созданные на этапе компиляции. Это также дешевле, безопаснее и, как правило, удобнее для разработчиков.

Я был вынужден написать свой собственный статический генератор, используя Gulp, шаблоны Nunjucks, Markdown для контента, RSS-канал, библиотеку шаблонов (что смешно сейчас, оглядываясь назад) и многое другое. Результат был размещен на страницах GitHub (плюс CloudFlare HTTPS). Это была последняя версия моего сайта.

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

На этот раз мои (неупорядоченные) требования были следующими.

Должен иметь

  • Не требует клиентского JavaScript.
  • Доступно для сканирования.
  • Не ограничивает источник контента (например, файлы, API, БД и т. д.).
  • Гибкость (например, что, если я захочу подключить sass-lint?).
  • Может быть автоматизирован (т. е. непрерывная интеграция).
  • Разрешает сообщения Markdown.
  • Код можно встроить с помощью CodePen, JSFiddle и т. д.
  • Позволяет создавать пользовательские/неблоговые страницы.
  • Позволяет использовать несколько шаблонов/типов сообщений.
  • Открытый источник.
  • Поддерживает Linux, Mac и Windows.

Хорошо бы иметь

  • Простой.
  • Дает преимущество в SEO.
  • Позволяет передавать данные в другое место (средний уровень).
  • Использует инструменты, с которыми я знаком и которые мне нравятся прямо сейчас.
  • Разрешает публикации в других форматах рядом с записями Markdown.
  • Делает работу на стороне клиента быстрее/лучше (прогрессивное улучшение), а если и делает, то легковесной.
  • Начальный старт сервисного работника.
  • Не самоуверенный.
  • Генерирует RSS-канал.
  • Начало работы с блогом.
  • Обновления содержания могут быть предложены читателями.
  • Хороший опыт разработки.
  • Начало работы с комментариями.
  • Начало работы с аналитикой.
  • Генерирует карту сайта.xml.

Неважно

  • Скорость сборки.
  • Популярность.
  • Темы.

Победитель

Я не буду утомлять вас, подробно описывая каждый вариант, который я рассматривал. В итоге победил Nuxt.js. Это минимальная структура для создания универсальных приложений Vue.js, но что это значит?

Ну, во-первых, это Vue.js, современная среда JavaScript с сравнением Virtual DOM, первоклассным управлением состоянием Flux и фантастической документацией. Это наш выбор фреймворка для интерфейса в Teamwork. Но подождите, это звучит слишком много для блога. Это не обязательно должно быть веб-приложение, не говоря уже об универсальном приложении Vue.js. Поверь мне, становится лучше.

Далее идет Nuxt.js. Это минимальная (уверенная) структура, которая абстрагирует для вас Vue.js и Webpack. Вам не нужно настраивать маршрутизацию или что-то в этом роде (хотя вы можете, если хотите). Если бы вам нужно было создать компонент hello внутри каталога pages, вы могли бы запустить одну команду для создания веб-приложения Vue.js, в котором /hello разрешалось бы этому компоненту (например, Next.js). Поскольку он абстрагируется от Webpack, у него есть отличный режим разработки, включая горячую перезагрузку модулей и многое другое, из коробки.

«Универсальное приложение Vue.js» просто означает, что оно выполняет некоторый рендеринг на стороне сервера и гидратацию на стороне клиента. Допустим, вы переходите по URL-адресу. Как правило, сервер возвращает практически пустую страницу, которая загружает некоторый JavaScript, который запускает ваш код Vue.js, который обращается к API, затем отображает таблицу и добавляет прослушиватель событий, чтобы щелчок по заголовку таблицы сортировал таблицу. «Универсальное приложение Vue.js» вместо этого запускало бы ваш код Vue.js на стороне сервера, который обращался бы к API, отображал результат и возвращал таблицу в исходном ответе браузеру. Таким образом, вы получаете контент как можно скорее, независимо от того, включен ли у вас JavaScript, есть ли в JavaScript фатальная ошибка и так далее. Затем загружается JavaScript и продолжается с того места, где остановился рендеринг на стороне сервера (т. е. гидратация на стороне клиента). Если вы щелкнете по заголовку таблицы, он должен быть готов и отсортировать таблицу.

Поскольку он может запускать и отображать ваш код Vue.js на стороне сервера, он поддерживает создание статических сайтов. Он такой мощный, но все, что мне нужно сделать, это запустить немного другую команду, и он выдаст статические ресурсы. Логотип Nuxt.js также странно похож на мой собственный.

Управление содержанием

Это не означает, что я буду писать сообщения в блоге в HTML. Возможно, вы заметили одно интересное требование: «Не ограничивает источник контента (например, файлы, API, БД и т. д.)». Я хотел изучить другие источники контента. Безголовая CMS, например. Вместо того, чтобы размещать CMS и выполнять каждый запрос к моему блогу, скажем, через Ghost или Wordpress, я мог просто использовать их для управления контентом. Это было бы «безголовым» в том смысле, что я бы использовал только панель администрирования. Я бы брал посты, запрашивая его базу данных (или используя его API, если он есть). С тех пор, как эта фраза была придумана, появились специально созданные безголовые CMS, которые предоставляют только API и не имеют пользовательского интерфейса.

JAMstack с тех пор набрал обороты; современная архитектура веб-разработки, основанная на клиентском JavaScript, многоразовых API и встроенной разметке. Разве это не просто генерация статического сайта? Что ж, JAMstackers(?) не любит термин статический, потому что на самом деле API может возвращать что угодно, и поэтому сайт может быть довольно динамичным. Я бы предпочел использовать API во время компиляции, генерировать статические файлы и иметь меньше JavaScript на стороне клиента. Так что для моих целей это генерация статического сайта.

Я всегда хотел поиграть с Contentful, облачной безголовой службой CMS. Это кажется действительно хорошим, но в итоге я снова выбрал подход на основе Git. Contentful не поддерживает Markdown для одного (EDIT: он поддерживает Markdown, фактически с февраля 2014 года. Я не знаю, как я это пропустил). Несмотря на то, что редактор хорош, у меня не было бы другого выбора, кроме как использовать его. Я могу использовать с Git все, что захочу; текстовый редактор, IDE, Classeur (мой любимый редактор Markdown) и т.д.

Я получаю бесплатное управление версиями, ветвление и работу в автономном режиме (вплоть до фактической публикации изменений). Поскольку мой сайт размещен на GitHub (до сих пор), я могу использовать его пользовательский интерфейс не только для редактирования файлов, но и для добавления и удаления сообщений в блоге. Еще мне нравится, что все с открытым исходным кодом, так что любой может предложить улучшения для сообщения. У меня даже есть кнопка вверху страницы для этого. Прямо сейчас он просто приводит вас к исходному коду, но я сделаю так, чтобы он привел вас к фактическому исходному содержанию поста. Он может даже проводить проверки качества с помощью служб непрерывной интеграции.

Тем не менее, Contentful имеет встроенную поддержку адаптивных изображений и конечные точки API поиска. Обязательно как-нибудь воспользуюсь, просто ищу подходящее оправдание.

Markdown, встречайте Nuxt.js

Так как же мне на самом деле писать посты тогда? Nuxt.js позволяет вам создавать модули, которые используют этапы сборки или генерации для выполнения пользовательских действий. Модуль блога уже существовал. Он был недостаточно гибким, поэтому я взял его и модифицировал в соответствии со своими потребностями (что мы и делали с большинством вещей, связанных с Vue.js, в Teamwork). Он ищет файлы уценки в каталоге writing, компилирует уценку, затем генерирует файлы, маршруты и все остальное. Компилятор Markdown, с которым я работал на этот раз, называется markdown-it, а также некоторые (сторонние и пользовательские) плагины для некоторых дополнительных возможностей. Возможно, я когда-нибудь напишу об этом пост.

Единственным недостатком было то, что не существовало RSS-модуля, поэтому я мог соответствовать функциональности моего старого сайта. Я написал один, но в итоге выбросил его, когда столкнулся со сложной проблемой в последнюю минуту.

Несовершенство

В наши дни я стараюсь быть более открытым для выпуска далеко не идеальных вещей, поэтому я определенно оставил место для улучшения. Некоторый код является самым хакерским из всех, что я когда-либо писал. Особенно CSS, который в основном находится в одном shame.scss файле. Хотя этот маршрутный переход хорош.

Одна вещь, которая является проблемой при статике, — это комментарии. Вы не получаете встроенных комментариев, как в обычной CMS. Я пока пользуюсь Disqus, но он меня не очень устраивает. Это слишком тяжело. Ожидайте сообщение о переходе на альтернативное решение или о развертывании моего собственного. Рабочий процесс также может быть улучшен. Я хотел бы автоматизировать создание активов как шаг непрерывного развертывания.

Что касается контента, ожидайте, что я буду публиковать пост примерно в месяц. В основном я расскажу о разработке, но могу время от времени добавлять посты и о других вещах. Будут короткие посты, глубокие подробные погружения, которые я редактировал сорок раз, а также посты, которые я написал за один раз (иногда они мои лучшие). У меня так много вещей, с которыми я собирался поиграть. Теперь у меня есть отдушина, где я могу написать о них.