Если вы начали работать с генераторами статических сайтов, знали ли вы, что можете использовать репозитории шаблонов GitHub для быстрого запуска новых проектов и сокращения времени на настройку?

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

• создание таких же структур папок из предыдущих проектов,
• копирование и вставка файлов конфигурации из предыдущих проектов, а также
• Копирование и вставка стандартного кода из предыдущих проектов.

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

Давайте посмотрим, как мы можем настроить удобный рабочий процесс. Мы создадим шаблонный проект Eleventy, превратим его в репозиторий Git, разместим репозиторий в GitHub, а затем настроим этот репозиторий как шаблон. Затем, в следующий раз, когда у вас будет статический проект сайта, вы сможете вернуться в хранилище, нажать кнопку и начать работать с точной копией вашего шаблона.

Готовы попробовать? Давайте настроим наш собственный статический сайт, используя шаблоны GitHub, чтобы увидеть, сколько шаблонов может помочь упростить проект статического сайта.

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

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

Прежде всего, давайте создадим папку шаблонов

Мы начнем с запуска каждого из них в командной строке:

  CD ~
mkdir static-site-template
cd static-site-template  

Эти три команды изменяют каталог на домашний каталог ( ~ в системах на основе Unix), создают новый каталог с именем static-site-template а затем изменить каталог на каталог static-site-template .

Далее мы инициализируем проект Node

Чтобы работать с Eleventy, нам нужно установить Node.js, который позволяет вашему компьютеру запускать код JavaScript вне веб-браузера.

Node.js поставляется с менеджером пакетов узлов или npm, который загружает пакеты узлов на ваш компьютер. Eleventy — это пакет узлов, поэтому мы можем использовать npm для его извлечения.

Предполагая, что Node.js установлен, давайте вернемся к командной строке и запустим:

  npm init  

Это создает файл с именем package.json в каталоге. npm предложит вам серию вопросов для заполнения метаданных в вашем package.json. После ответа на вопросы проект Node.js инициализируется.

Теперь мы можем установить Eleventy

Инициализация проекта дала нам файл package.json, который позволяет npm устанавливать пакеты, запускать сценарии и выполнять другие задачи для нас внутри этого проекта. npm использует package.json как точку входа в проект, чтобы точно определить, как и что он должен делать, когда мы даем ему команды.

Мы можем указать npm установить Eleventy как зависимость разработки запустив:

  npm install -D @ 11ty / eleventy  

Это добавит запись devDependency в файл package.json и установит пакет Eleventy в папку node_modules в проекте.

Крутая вещь в файле package.json заключается в том, что любой другой компьютер с Node.js и npm может прочитать его и узнать, как установить Eleventy в каталог проекта node_modules не устанавливая его вручную. Видите, мы уже оптимизируем вещи!

Настройка Eleventy

Существует множество способов настройки проекта Eleventy. Гибкость — сила Eleventy. В целях данного руководства я собираюсь продемонстрировать конфигурацию, которая обеспечивает:

• Папка для чистого отделения исходного кода веб-сайта от общих файлов проекта
• HTML-документ для одностраничного веб-сайта
• CSS для стиля документа
• JavaScript для добавления функциональности в документ

Вернитесь в командную строку. Внутри папки static-site-template выполните эти команды одну за другой (исключая комментарии, которые появляются после каждого символа # ):

  mkdir src # создает каталог для исходного кода вашего сайта
mkdir src / css # создает каталог для стилей сайта
mkdir src / js # создает каталог для сайта JavaScript
touch index.html # создает HTML-документ сайта
touch css / style.css # создает стили сайта
touch js / main.js # создает сайт JavaScript  

Это создает базовую файловую структуру, которая будет сообщать сборку Eleventy. Однако, если мы запустим Eleventy прямо сейчас, он не создаст нужный нам сайт. Нам все еще нужно настроить Eleventy, чтобы понять, что он должен использовать только файлы в папке src для сборки и что css и js папки должны обрабатываться с помощью сквозной копии файла .

Вы можете передать эту информацию в Eleventy с помощью файла .eleventy.js в корне папки static-site-template . Вы можете создать этот файл, выполнив эту команду в папке static-site-template :

  touch .eleventy.js  

Отредактируйте файл в своем любимом текстовом редакторе, чтобы он содержал следующее:

  module.exports = function (eleventyConfig) {
  eleventyConfig.addPassthroughCopy ( "SRC / CSS");
  eleventyConfig.addPassthroughCopy ( "SRC / JS");
  вернуть {
    dir: {
      вход: "SRC"
    }
  };
};  

Строки 2 и 3 сообщают Eleventy использовать сквозную копию файла для CSS и JavaScript. Строка 6 указывает Eleventy использовать только каталог src для создания выходных данных.

Eleventy теперь даст нам ожидаемый результат, который мы хотим. Давайте проверим это, поместив это в командной строке:

  npx @ 11ty / eleventy  

Команда npx позволяет npm выполнять код из каталога проекта node_module не затрагивая глобальную среду. Вы увидите такой вывод:

  Написание _site / index.html из ./src/index.html.
Скопировано 2 элемента и обработано 1 файл за 0,04 секунды (версия 0,9,0)  

Папка static-site-template теперь должна иметь новый каталог с именем _site . Если вы покопаетесь в этой папке, вы найдете каталоги css и js а также файл index.html .

Эта папка _site является окончательным результатом работы Eleventy. Это весь сайт, и вы можете разместить его на любом статическом веб-хосте.

Без какого-либо содержимого, стилей или сценариев сгенерированный сайт не очень интересен:

Давайте создадим шаблонный сайт

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

Стоит отметить, что у Eleventy есть тонна шаблонных файлов для различных типов проектов. Совершенно нормально пойти с одним из них, хотя я часто нахожу, что мне нужно свернуть свое. Вот что мы здесь делаем.

  

  
    
    
    
    
    
    
  
  
  
 Отличная работа по созданию шаблона сайта! 
  
  
  

Мы также можем немного стилизовать вещи, поэтому давайте добавим это в src / css / style.css :

  body {
  семейство шрифтов: без засечек;
}  

И мы можем подтвердить, что JavaScript подключен, добавив это в src / js / main.js :

  (function () {
  console.log («Вызвать статический шаблон сайта JavaScript!»);
}) ();  

Хотите посмотреть, что у нас есть? Запустите npx @ 11ty / eleventy --serve в командной строке. Eleventy раскрутит сервер с помощью Browsersync и предоставит локальный URL, который, вероятно, будет что-то вроде localhost: 8080 .

Давайте перенесем это на репозиторий GitHub

Git — наиболее часто используемая система контроля версий в разработке программного обеспечения. Большинство компьютеров на основе Unix поставляются с ним, и вы можете превратить любой каталог в репозиторий Git, выполнив следующую команду:

  git init  

Мы должны получить такое сообщение:

  Инициализированный пустой репозиторий Git в /path/to/static-site-template/.git/[19459016[

Это означает, что скрытая папка .git была добавлена ​​в каталог проекта, что позволяет программе Git запускать команды для проекта.

Прежде чем мы начнем запускать несколько команд Git в проекте, нам нужно сообщить Git о файлах, которые мы не хотим касаться.

Внутри каталога static-site-template выполните:

  touch .gitignore  

Затем откройте этот файл в вашем любимом текстовом редакторе. Добавьте это содержимое в файл:

  _site /
node_modules /  

Это говорит Git о игнорировать каталог node_modules и каталог _site . Привязка каждого отдельного модуля Node.js к репо может сделать вещи действительно беспорядочными и сложными в управлении. Вся эта информация уже есть в package.json.

Аналогично, нет необходимости в управлении версиями _site . Eleventy может сгенерировать его из файлов в src поэтому нет необходимости занимать место в GitHub. Также возможно, что если бы мы:

• Управление версиями _site
• изменить файлы в src или
• забудьте снова запустить Eleventy,

затем _site будет отражать старую сборку сайта, и будущие разработчики (или ваша будущая версия) могут случайно использовать устаревшую версию сайта.

Git - это программное обеспечение для контроля версий а GitHub - это хост Git-репозитория . Есть и другие хост-провайдеры Git, такие как BitBucket или GitLab, но, поскольку мы говорим о специфической для GitHub функции (репозитории шаблонов), мы перенесем нашу работу на GitHub. Если у вас еще нет учетной записи, присоединяйтесь к GitHub. Получив учетную запись, создайте репозиторий GitHub и назовите его static-site-template .

GitHub задаст несколько вопросов при настройке нового репозитория. Одним из них является то, хотим ли мы создать новый репозиторий в командной строке или выдвинуть существующий репозиторий из командной строки . Ни один из этих вариантов не является тем, что нам нужно. Они предполагают, что у нас либо ничего нет, либо мы уже использовали Git локально. Проект static-site-template уже существует, инициализирован репозиторий Git, но еще не зафиксирован ни один коммит.

Итак, давайте проигнорируем подсказки и вместо этого запустим следующие команды в командной строке. Убедитесь, что URL-адрес, предоставленный GitHub в команде из строки 3, удобен:

  git add.
git commit -m "первый коммит"
Git Remote добавить источник https://github.com/your-username/static-site-template.git
мастер происхождения git push -u  

Это добавляет всю папку static-site-template в область подготовки Git. Он фиксирует его с сообщением «первый коммит», добавляет удаленный репозиторий (репозиторий GitHub), а затем отправляет ветку master в этот репозиторий.

Давайте шаблонизируем эту вещь

Хорошо, суть того, над чем мы работали. Шаблоны GitHub позволяют нам использовать репозиторий, который мы только что создали, в качестве основы для других проектов в будущем - без необходимости делать всю работу, которую мы проделали, чтобы попасть сюда!

Нажмите Настройки на целевой странице GitHub репозитория, чтобы начать работу. На странице настроек установите флажок для Репозиторий шаблонов .

Теперь, когда мы вернемся на страницу хранилища, мы получим большую зеленую кнопку с надписью Использовать этот шаблон . Нажмите на нее, и GitHub создаст новый репозиторий, который является зеркалом нашего нового шаблона. Новый репозиторий будет запускаться с теми же файлами и папками, что и static-site-template . Оттуда загрузите или клонируйте этот новый репозиторий, чтобы начать новый проект со всеми базовыми файлами и конфигурацией, которые мы настроили в проекте шаблона.

Мы можем расширить шаблон для будущих проектов

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

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

Если вы считаете, что все, что вы сделали в проекте, может появиться снова при следующем запуске, удалите детали, относящиеся к проекту, и добавьте новый материал в ваш шаблон проекта. Перенесите эти изменения в GitHub, и когда вы в следующий раз будете использовать static-site-template для запуска проекта, ваш код многократного использования будет вам доступен.

Конечно, есть некоторые ограничения

.

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

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

Это полезный процесс для сайтов с очень похожей структурой, стилями и функциональностью. Проекты с крайне различными требованиями могут не получить выгоды от этого совместного использования кода, и вы можете в конечном итоге раздуть свой проект ненужным кодом.

Подведение итогов

Вот оно! Теперь у вас есть все, что вам нужно, чтобы не только запустить проект статического сайта с использованием Eleventy, но и возможность переназначить его в будущих проектах. Шаблоны GitHub очень удобны для быстрого запуска проектов, в противном случае нам бы пришлось заново и снова собирать одно и то же колесо. Используйте их в своих интересах и наслаждайтесь новыми проектами!