Большинству программистов нужен сайт или хотя бы своя страничка в сети. Да что там программистам, почти у всех обычных людей уже есть свой сайт, пусть даже в виде аккаунта Вконтакте.
Меня аккаунт Вконтакте, и даже в Фейсбуке в качестве своего сайта не устраивает. Слишком много лишнего, навязанный формат и прочие неудобства.
Если бы я не был веб-разработчиком, мне пришлось бы плакать и грызть кактус. К счастью, я им являюсь, поэтому решил сделать себе сайт сам. Чтобы выкладывать на нём статьи вроде этой, небольшие хобби-проекты, и чтобы было что указать в поле «сайт» профиля на Хабре.
Если вы тоже хотели бы иметь сайт, который полностью контролируете, на котором всё именно так, как вам хочется, но всё никак руки не доходили разобраться и сделать, то эта статья для вас.
Некоторые знания HTML и JS вам пригодятся. Опыт работы с Node.js не обязателен.
Рекомендую сразу выполнять действия, описанные в статье, и тогда после её прочтения у вас уже будет готовый сайт вроде этого.
Итак, приступим.
Создаём репозиторий в гитхабе
Что в первую очередь делает программист, который хочет начать новый проект? Создаёт репозиторий в какой-то из систем контроля версий. Мы будем использовать github, потому что:
- Это наиболее удобный и функциональный сервис для контроля версий.
- Создать новый проект займёт всего пару минут, даже если вы ещё не зарегистрированы.
- Он бесплатен.
Регистрируемся на GitHub, если у вас там ещё нет аккаунта.
Настраиваем Git в системе. У гитхаба есть хороший мануал для каждой системы: https://help.github.com/articles/set-up-git.
Заходим в соданный мною репозиторий с сайтом (http://github.com/daeq/programmer-site) и жмём кнопку "Fork" в левом верхнем углу.
Ваша копия кода стала доступна по адресу http://github.com/<ваше имя>/programmer-site. Если название вам не нравится, вы можете его переименовать в разделе "Admin".
Теперь у нас есть репозиторий, и в нём уже даже есть прототип будущего сайта. Идём дальше.
Создаём приложение на Heroku
Теперь, когда у нас есть код и место для его хранения, нужно выбрать хостинг. Я решил использовать сервис приложений, а именно Heroku, потому что:
- Настройка хостинга максимально простая. Всего пара команд в консоли – и у вас есть стабильно работающий сайт. В дальнейшем выкладки сайта происходят в одну команду.
- Под сервером приложений привычный Ubuntu, поэтому если понадобится что-то помимо http-сервера — это легко будет ипользовать.
- Он бесплатен (для наших нужд).
Регистрируемся на heroku.com, если ещё нет.
После регистрации вы увидите такую подсказку:
Вам нужно сделать то, что на ней написано: скачать и установить toolbelt, после чего в консоли выполнить "heroku login".
Заливаем сайт на Heroku
Хостинг есть — пора выложить на него сайт.
Открываем консоль, заходим в директорию на диске, где у вас будет лежать код, и набираем в консоли:
git clone git@github.com:<ваш логин на гитхабе>/programmer-site cd programmer-site heroku apps:create <название вашего приложения>
Название должно быть уникально среди всех приложений heroku. Можно использовать, например, адрес вашего будущего сайта.
В ответ вы увидите что-то вроде этого:
Enter your Heroku credentials. Email: bratchenko@gmail.com Password (typing will be hidden): Authentication successful. Creating programmer-site... done, stack is cedar http://programmer-site.herokuapp.com/ | git@heroku.com:programmer-site.git Git remote heroku added
Heroku поддерживает выкладку сайта простым пушем в его git-репозиторий. Набираем в консоли:
git push heroku master
Если не вывалилось ошибок, значит вы всё сделали правильно и ваш сайт доступен по адресу <название вашего приложения>.herokuapp.com (пример — http://programmer-site.herokuapp.com/).
Настраиваем свой домен
Вряд ли вам для личного сайта подойдёт адрес на herokuapp.com. Будем привязывать свой собственный домен.
Если у вас ещё нет своего домена, его можно бесплатно зарегистрировать, например, в зоне .tk.
Идём на http://dot.tk
Вводим имя своего будущего домена
В поле ввода ip указываем один из ip, предоставляемых heroku. Например,
75.101.145.87.
Готово
Идём в настройки приложений на heroku, заходим в созданное приложение, раздел "Settings", в поле "Domains" вводим ваш будущий домен, нажимаем "Add". Готово.
Ваш сайт должен стать доступным по зарегистрированному домену в течении получаса.
Создаём внешний вид сайта
Несмотря на то, что шаблон сайта в моём примере бесподобен и гениален, вы вряд ли захотите его оставить. Поэтому дальше самая сложная, но и самая приятная часть: придать сайту тот внешний вид, который вам по душе.
Для фронтенда сайта я рекомендую использовать Twitter Bootstrap, потому что:
- Это очень простой, стильно выглядящий фронтенд-фреймворк.
- Лучший в своём роде по возможностям: по количеству элементов, стандартных и дополнительных виджетов.
- Очень много людей им пользуется и развивает его. Если вам понадобится какая-то модификация или нестандартный элемент, скорее всего кто-то это уже сделал.
Если вы не хотите обращаться к дизайнеру при каждой мелкой доработке сайта — используйте Twitter Bootstrap.
Есть три способа сделать подходящий вам дизайн:
- Попросить дизайнера создать макет сайта, используя элементы Twitter Bootstrap в PSD-формате, после чего сверстать его из готовых элементов (или, опять же, попросить кого-то это сделать).
- Купить готовую тему, например, здесь: https://wrapbootstrap.com/
- Сделать дизайн самостоятельно из имеющихся элементов.
Для третьего пункта вам могут быть полезны следующие ссылки:
- http://twitter.github.com/bootstrap/ — сайт Twitter Bootstrap. С него лучше начать изучение фреймворка.
- http://bootswatch.com/ — бесплатные темы для Twitter Bootstrap. Если вам не нравится стандартный вид элементов, выберите другой, просто заменив css-файл.
- http://stylebootstrap.info/ — раскрасьте Bootstrap на свой вкус
- http://www.google.com/webfonts — набор бесплатных шрифтов от Google. Не нравится стандартный шрифт — выберите другой
- http://google.com/search?q=Twitter+Bootstrap — хороший набор ссылок про Twitter Bootstrap. Наверняка найдёте что-то интересное.
В моём примере вся вёрстка лежит в папке tpl, а css, js и прочие файлы — в папке public.
Сохранение и выкладка изменений
После того, как вы внесли необходимые изменения в сайт, стоит сохранить их и выложить новую версию на хостинг.
В корневой директории сайта в консоли выполните:
git commit -a -m "описание внесённых изменений" git push heroku master git push origin master
Вам может показаться избыточным набирать 3 команды каждый раз чтобы сохранить изменения в репозиторий и выложить их на сайт. Эту процедуру можно автоматизировать и упростить, но я и так уже много текста написал. Додумаете сами.
Если эта статья окажется достаточно интересной (наберёт хотя бы пару десятков плюсов), будет продолжение.
Во второй части, я планирую описать, как на созданном сайте добавить простой, но гибкий и функциональный блог программиста с хранилищем на всё том же github, использованием markdown, комментариями, шарингом в социальные сети и ещё парой жизненно необходимых фич :)
Напишите в комментариях, какие фичи вы хотели бы видеть на своём сайте, которые недоступны или плохо работают в готовых движках?
