- PVSM.RU - https://www.pvsm.ru -
Большинству программистов нужен сайт или хотя бы своя страничка в сети. Да что там программистам, почти у всех обычных людей уже есть свой сайт, пусть даже в виде аккаунта Вконтакте.
Меня аккаунт Вконтакте, и даже в Фейсбуке в качестве своего сайта не устраивает. Слишком много лишнего, навязанный формат и прочие неудобства.
Если бы я не был веб-разработчиком, мне пришлось бы плакать и грызть кактус. К счастью, я им являюсь, поэтому решил сделать себе сайт сам. Чтобы выкладывать на нём статьи вроде этой, небольшие хобби-проекты, и чтобы было что указать в поле «сайт» профиля на Хабре.
Если вы тоже хотели бы иметь сайт, который полностью контролируете, на котором всё именно так, как вам хочется, но всё никак руки не доходили разобраться и сделать, то эта статья для вас.
Некоторые знания 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.com [8], если ещё нет.
После регистрации вы увидите такую подсказку:
Вам нужно сделать то, что на ней написано: скачать и установить toolbelt, после чего в консоли выполнить "heroku login".
Открываем консоль, заходим в директорию на диске, где у вас будет лежать код, и набираем в консоли:
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.
Есть три способа сделать подходящий вам дизайн:
Для третьего пункта вам могут быть полезны следующие ссылки:
В моём примере вся вёрстка лежит в папке tpl, а css, js и прочие файлы — в папке public.
После того, как вы внесли необходимые изменения в сайт, стоит сохранить их и выложить новую версию на
В корневой директории сайта в консоли выполните:
git commit -a -m "описание внесённых изменений" git push heroku master git push origin master
Вам может показаться избыточным набирать 3 команды каждый раз чтобы сохранить изменения в репозиторий и выложить их на сайт. Эту процедуру можно автоматизировать и упростить, но я и так уже много текста написал. Додумаете сами.
Если эта статья окажется достаточно интересной (наберёт хотя бы пару десятков плюсов), будет продолжение.
Во второй части, я планирую описать, как на созданном сайте добавить простой, но гибкий и функциональный блог программиста с хранилищем на всё том же github, использованием markdown, комментариями, шарингом в социальные сети и ещё парой жизненно необходимых фич :)
Напишите в комментариях, какие фичи вы хотели бы видеть на своём сайте, которые недоступны или плохо работают в готовых движках?
Автор: daeq3
Источник [20]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/node-js/20686
Ссылки в тексте:
[1] этого: http://programmer-site.tk
[2] Регистрируемся на GitHub: https://github.com/plans
[3] https://help.github.com/articles/set-up-git: https://help.github.com/articles/set-up-git
[4] http://github.com/daeq/programmer-site: http://github.com/daeq/programmer-site
[5] http://github.com/<ваше: http://github.com/<ваше
[6] хостинг: https://www.reg.ru/?rlink=reflink-717
[7] Heroku: http://heroku.com
[8] Регистрируемся на heroku.com: https://api.heroku.com/signup
[9] http://programmer-site.herokuapp.com/: http://programmer-site.herokuapp.com/
[10] http://dot.tk: http://dot.tk
[11] предоставляемых heroku: https://devcenter.heroku.com/articles/custom-domains#naked-domains-mydomaincom
[12] настройки приложений на heroku: https://dashboard.heroku.com/apps
[13] Twitter Bootstrap: http://twitter.github.com/bootstrap/
[14] элементы Twitter Bootstrap в PSD-формате: http://www.bentdesignstudio.com/v2/2012/03/twitter-bootstrap-2-photoshop-template-psd/
[15] https://wrapbootstrap.com/: https://wrapbootstrap.com/
[16] http://bootswatch.com/: http://bootswatch.com/
[17] http://stylebootstrap.info/: http://stylebootstrap.info/
[18] http://www.google.com/webfonts: http://www.google.com/webfonts
[19] http://google.com/search?q=Twitter+Bootstrap: http://google.com/search?q=Twitter+Bootstrap
[20] Источник: http://habrahabr.ru/post/159631/
Нажмите здесь для печати.