8.0 KiB
title | localeTitle |
---|---|
Use Github Static Pages to Host Your Front End Projects | Используйте статические страницы Github для размещения ваших проектов переднего плана |
Выгоды
Я обожаю Codepen.io, это замечательный, простой в использовании инструмент для простого внешнего тестирования. Но по мере того, как проекты ГЦК стали более сложными, я понял, что кодирование на местном уровне собиралось спасти мне кучу головных болей. Мой текстовый редактор и коммандит кода просто ускользнут.
- Автозаполнение
- Скомпилируйте все (codepen действительно перетаскивал попытку скомпилировать Jade)
- Лучшее автоматическое обновление
- Встроенная беседка
- Управление версиями Git
- Улучшенный экранный опыт в сфере недвижимости
Git to Github
Поскольку я уже сохраняю локально и использую git для управления версиями, я решил, что могу загрузить его в Github. Кроме того, Github обладает фантастическим, бесплатным сервисом для интерфейсных проектов под названием Github Pages . Просто обновите свое репо и ваши изменения вживую.
Как это работает, просто. Github проверяет, имеет ли ваш репозиторий ветвь с именем gh-pages
и обслуживает любой код, который находится в этой ветке. Здесь нет back-end, но HTML, CSS и JS работают как шарм.
Первые вещи сначала
Давайте создадим новую папку для вашего проекта. В качестве примера я буду использовать проект Camper News .
Попал в ваш рабочий каталог и создал новый. Вы можете сделать это в терминале (или нет).
Теперь зайдите в каталог проекта и (наверняка в терминале на этот раз) используйте команду git init
. Обратите внимание: в этом руководстве предполагается, что у вас установлен git .
Хорошо, потрясающе. Теперь мы готовы работать.
Следующие шаги
Создайте несколько файлов в каталоге campNews. Я не знаю, возможно, index.html и, возможно, app.css и app.js, или любое другое соглашение об именах, которое вы предпочитаете. Поместите свой код в эти файлы. Хорошо, теперь мы готовы к нашей первой фиксации. Требуется два шага .
git add -A
подготовит все эти новые файлы и новый код внутри нихgit commit -m 'relevant message'
выполнит всю работу, которую вы сделали, с веткой, в которой вы сейчас находитесь (по умолчанию «мастер»)
Ключ от всего этого
Хорошо, пока мы все еще местные. Есть кое-что, что мы должны сделать, чтобы взять нашу работу и перенести ее в github. В этот момент мне нравится переключаться между ветвями. Помните: github только служит из gh-страниц, и если вы следовали до сих пор, ваша ветка называется «хозяином». Давайте создадим новую (локальную) ветвь gh-pages.
git checkout -b gh-pages
создаст его, скопирует всю работу с мастера на gh-страницы и переключит на ветку. Уф.
git branch -d master
избавится от основной ветви. Звучит сумасшедшим, я знаю, но для чего нам это нужно? Подумайте о gh-страницах как о своей новой ветке.
Теперь git add -A
и git commit -m 'relevant message'
снова, на всякий случай. И будьте готовы оставить свой редактор и терминал и выйти в онлайн в первый раз.
Перейдите в свой профиль github и создайте новое репо. Назовите его чем-то соответствующим, например campNews.
После его создания зайдите и возьмите URL-адрес клона HTTPS. (Игнорируйте файлы на моем снимке экрана, ваше репо будет пустым на этом этапе).
Объединяя все это
И вы можете покинуть мир онлайн. Вернемся к терминалу! Давайте свяжем наш локальный проект с этим реестром github. Все, что требуется, - это одна команда.
git remote add origin <server>
Просто замените сервер URL-адресом HTTPS, который вы только что скопировали. Поэтому моя команда выглядит так:
git remote add origin https://github.com/gkobilansky/campNews.git
.
Хорошо, до сих пор мы имеем:
- Создал наш проект
- Вершился в git
- Принял некоторые изменения
- Переключил его на ветвь «gh-pages»
- Подключил его к github
Последний шаг!
Направьте проект на github. Опять же, просто:
git push origin gh-pages
Эта команда гарантирует, что ваши последние коммиты будут загружены в github. Как только вы это сделали хотя бы один раз, ваш проект должен быть доступен http: // username .github.io / repository , поэтому для меня это http://gkobilansky.github.io/campNews .
Как только это все будет сделано, процесс просто повторится:
git add -A
git commit -m 'relevant message'
git push origin gh-pages
Конечно, более крутая кривая обучения, чем codepen.io, но более быстрая и гибкая, как только вы ее повесите.
Счастливое кодирование!
PS. Благодаря этому руководству Роджер Дадлер, чтобы все было просто.