Публикация проекта на GitHub Pages

Все подписчики Framer Studio получают безлимитный хостинг на share.framerjs.com для публикации прототипов. Если же вы работаете через редактор кода (например, Атом), то публиковать проекты вам придется самостоятельно.

Проблема решается двумя способами:

1. Свой хостинг. У многих дизайнеров есть свой сайт и они умеют работать с FTP-клиентами.
2. GitHub Pages. Расскажу про него подробнее.

Github Pages

Все пользователи github.com получают безлимитный хостинг для публикации проектов. Для тех, кто не умеет работать с git и командной строкой, есть приложение GitHub Desktop (для Мака и Виндоус) с визуальным интерфейсом:

GitHub Desktop на Маке

Если в двух словах, то вы связываете папку на своем компьютере с репозиторием на GitHub. В эту папку складываете проект и нажимаете кнопку Commit. Прототип тут же публикуется на сайте github.io.

Пошаговая инструцкия

1. Создайте аккаунт на http://github.com.
2. Установите приложение GitHub Desktop.
3. В приложении в левом верхнем углу нажмите плюсик и настройте первый и последний репозиторий:
   — Из трех вкладок выбираем Create.
   — Name — должно быть username.github.io, где username – ваш логин на Гитхабе.
   — Local Path — выбираем, где на компе будет лежать папка с вашими проектами.
4. Идем в созданную папку. Складываем туда хотя бы один проект. Например, структура папок может быть такая: ~ / desktop / username.github.io / myFirstProject.framer
5. Возвращаемся в приложение и находим там снизу панельку с кнопкой Commit & Sync: В поле Summary нужно вписать хотя бы один символ (так устроен git — нельзя публиковать изменение без единого комментария). Нажимаем кнопку Commit & Sync.
6. Спустя 2–3 минуты ваш прототип заработает по адресу:

http://username.github.io/myFirstproject.framer

Пример

• Мой логин на Гитхабе antonkartashov.
• Через приложение я создал репозиторий и папку antonkartashov.github.io.
• Прототип назывался randomuser-api.framer.
• Я скопировал его в папку antonkartashov.github.io на компе и в приложении нажал Commit & Sync.

Получился адрес:

http://antonkartashov.github.io/randomuser-api.framer/

Выражаю благодарность Александру Сергиевскому, который открыл мне этот хак с username.github.io.