Сайт для программиста [на Node.js]. Просто. Стильно. Бесплатно

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

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

Если бы я не был веб-разработчиком, мне пришлось бы плакать и грызть кактус. К счастью, я им являюсь, поэтому решил сделать себе сайт сам. Чтобы выкладывать на нём статьи вроде этой, небольшие хобби-проекты, и чтобы было что указать в поле «сайт» профиля на Хабре.

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

Некоторые знания HTML и JS вам пригодятся. Опыт работы с Node.js не обязателен.

Рекомендую сразу выполнять действия, описанные в статье, и тогда после её прочтения у вас уже будет готовый сайт вроде этого ^[1].

Итак, приступим.

Создаём репозиторий в гитхабе

Что в первую очередь делает программист, который хочет начать новый проект? Создаёт репозиторий в какой-то из систем контроля версий. Мы будем использовать github, потому что:

• Это наиболее удобный и функциональный сервис для контроля версий.
• Создать новый проект займёт всего пару минут, даже если вы ещё не зарегистрированы.
• Он бесплатен.

Регистрируемся на GitHub ^[2], если у вас там ещё нет аккаунта.

Настраиваем Git в системе. У гитхаба есть хороший мануал для каждой системы: https://help.github.com/articles/set-up-git ^[3].

Заходим в соданный мною репозиторий с сайтом (http://github.com/daeq/programmer-site ^[4]) и жмём кнопку "Fork" в левом верхнем углу.

Ваша копия кода стала доступна по адресу http://github.com/<ваше ^[5] имя>/programmer-site. Если название вам не нравится, вы можете его переименовать в разделе "Admin".

Теперь у нас есть репозиторий, и в нём уже даже есть прототип будущего сайта. Идём дальше.

Создаём приложение на Heroku

Теперь, когда у нас есть код и место для его хранения, нужно выбрать хостинг ^[6]. Я решил использовать сервис приложений, а именно Heroku ^[7], потому что:

• Настройка хостинга ^[6] максимально простая. Всего пара команд в консоли – и у вас есть стабильно работающий сайт. В дальнейшем выкладки сайта происходят в одну команду.
• Под сервером приложений привычный Ubuntu, поэтому если понадобится что-то помимо http-сервера — это легко будет ипользовать.
• Он бесплатен (для наших нужд).

Регистрируемся на heroku.com ^[8], если ещё нет.

После регистрации вы увидите такую подсказку:

Вам нужно сделать то, что на ней написано: скачать и установить toolbelt, после чего в консоли выполнить "heroku login".

Заливаем сайт на Heroku

Хостинг ^[6] есть — пора выложить на него сайт.

Открываем консоль, заходим в директорию на диске, где у вас будет лежать код, и набираем в консоли:

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/ ^[9]).

Настраиваем свой домен

Вряд ли вам для личного сайта подойдёт адрес на herokuapp.com. Будем привязывать свой собственный домен.

Если у вас ещё нет своего домена, его можно бесплатно зарегистрировать, например, в зоне .tk.

Идём на http://dot.tk ^[10]

Вводим имя своего будущего домена

В поле ввода ip указываем один из ip, предоставляемых heroku ^[11]. Например, 75.101.145.87.

Готово

Идём в настройки приложений на heroku ^[12], заходим в созданное приложение, раздел "Settings", в поле "Domains" вводим ваш будущий домен, нажимаем "Add". Готово.

Ваш сайт должен стать доступным по зарегистрированному домену в течении получаса.

Создаём внешний вид сайта

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

Для фронтенда сайта я рекомендую использовать Twitter Bootstrap ^[13], потому что:

• Это очень простой, стильно выглядящий фронтенд-фреймворк.
• Лучший в своём роде по возможностям: по количеству элементов, стандартных и дополнительных виджетов.
• Очень много людей им пользуется и развивает его. Если вам понадобится какая-то модификация или нестандартный элемент, скорее всего кто-то это уже сделал.

Если вы не хотите обращаться к дизайнеру при каждой мелкой доработке сайта — используйте Twitter Bootstrap.

Есть три способа сделать подходящий вам дизайн:

• Попросить дизайнера создать макет сайта, используя элементы Twitter Bootstrap в PSD-формате ^[14], после чего сверстать его из готовых элементов (или, опять же, попросить кого-то это сделать).
• Купить готовую тему, например, здесь: https://wrapbootstrap.com/ ^[15]
• Сделать дизайн самостоятельно из имеющихся элементов.

Для третьего пункта вам могут быть полезны следующие ссылки:

• http://twitter.github.com/bootstrap/ ^[13] — сайт Twitter Bootstrap. С него лучше начать изучение фреймворка.
• http://bootswatch.com/ ^[16] — бесплатные темы для Twitter Bootstrap. Если вам не нравится стандартный вид элементов, выберите другой, просто заменив css-файл.
• http://stylebootstrap.info/ ^[17] — раскрасьте Bootstrap на свой вкус
• http://www.google.com/webfonts ^[18] — набор бесплатных шрифтов от Google. Не нравится стандартный шрифт — выберите другой
• http://google.com/search?q=Twitter+Bootstrap ^[19] — хороший набор ссылок про Twitter Bootstrap. Наверняка найдёте что-то интересное.

В моём примере вся вёрстка лежит в папке tpl, а css, js и прочие файлы — в папке public.

Сохранение и выкладка изменений

После того, как вы внесли необходимые изменения в сайт, стоит сохранить их и выложить новую версию на хостинг ^[6].

В корневой директории сайта в консоли выполните:

git commit -a -m "описание внесённых изменений"
git push heroku master
git push origin master

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

Если эта статья окажется достаточно интересной (наберёт хотя бы пару десятков плюсов), будет продолжение.

Во второй части, я планирую описать, как на созданном сайте добавить простой, но гибкий и функциональный блог программиста с хранилищем на всё том же github, использованием markdown, комментариями, шарингом в социальные сети и ещё парой жизненно необходимых фич :)

Напишите в комментариях, какие фичи вы хотели бы видеть на своём сайте, которые недоступны или плохо работают в готовых движках?

Автор: daeq3

Источник ^[20]