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

  • Tutorial

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

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

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

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

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


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

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

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


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

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

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

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

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

Fork

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

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

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


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

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

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

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

Вам нужно сделать то, что на ней написано: скачать и установить 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

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

dot.tk start

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

dot.tk enter ip

Готово

dot.tk ready

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

heroku domain settings

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

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


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

Для фронтенда сайта я рекомендую использовать 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, комментариями, шарингом в социальные сети и ещё парой жизненно необходимых фич :)

Напишите в комментариях, какие фичи вы хотели бы видеть на своём сайте, которые недоступны или плохо работают в готовых движках?
Share post
AdBlock has stolen the banner, but banners are not teeth — they will be back

More
Ads

Comments 96

    +20
    Мне кажется, слишком много телодвижений, регистраций и так далее.
    Не проще ли самому написать страничку и загрузить на хостинг? Зачем гитхаб, облачный хостинг и бутстрап твиттера для простой «личной странички»?
      +4
      В заголовке же написано «Сайт для программиста...»
        +16
        А что, если я программист и хочу себе сайт, я должен сделать столько всего?
          –11
          Это я к тому, что программисты (не только они, кончено) зачастую не ищут простых путей, а получают удовольствие от решения иногда тривиальных задач нестандартным образом.
            +6
            Ну да, регистрация в куче сервисов это непосильная задача, а сколько удовольствия…
            Видимо, я не программист.
              –18
              я еще не встречал программистов без аккаунта на гитхабе
                +11
                «Ты суслика видишь? — Нет. — И я нет. А он есть!»
                  +1
                  Конечно, сусликов полно, но пока удается с ними не общаться.
                  +1
                  Черт, чем же я занимаюсь последние 8 лет…
                    –5
                    может на фортране программируете? или на Аде?
                      +4
                      А это как-то влияет на статус программиста и связано с аккаунтом на гитхабе?
                        +6
                        Я думаю, это недоумение по поводу отсутствия аккаунта на гитхабе равносильно недоумению типичных молодых людей, узнавших, что у Вас нет странички в соц сетях.
                          –4
                          Это личное наблюдение, а недоумение. И тем более не обобщение.

                          И конечно на статус прогрммиста учетная запись не влияет.
                          Кстати проекты на Фортране тоже есть.
                  • UFO just landed and posted this here
                      0
                      у меня появился аккаунт в гитхабе только месяц назад, и то потому что проект над которым начал работать там хостится… До этого проекты были на гит серверах конторы на которую работал, а для своих проектов поднял на своем сервере gitolite… Не надо так обижать программистов которым просто не нужен аккаунт на гитхабе.
                        0
                        Понятно, что пока нет нужды и интреса к таким сервисам — аккаунт не нужен. Кого-то обижать — и мысли не было. Хотя похоже многие обиделись :)
                  0
                  Обычно больше.
                  В статье — некоторый минимум (с учетом поставленных целей)
                  0
                  не написано же что для ВЕБ программиста. Понятно что любой программер обязан с такими вещами справиться, но сколько это займет место, допустим у 1С-программиста (просто пример)
                  +14
                  Бутстрап — потому что я, как и большинство программистов, не могу сам сделать приятно выглядящую страничку.
                  Гитхаб — чтобы в нём хранить код намного удобнее, чем в папке на диске.
                  Хостинг — … для хостинга. Не знаю, как ещё ответить.
                    –5
                    И, да, не бутстрапом единым.

                    www.excision.ca — базирован на вордпресс
                    www.lacunacoil.it — тоже вордпресс.

                    Не спорю, сайты выполнены профессионалами за большие деньги.
                    Для вордпресса/джумлы и так далее есть тоже немало «красивых бесплатных тем».
                    Так что не показатель.
                      +3
                      Вордпресс не подходит. Сложно. Много ограничений.
                        +6
                        Собственно а какое отношение эти достаточно посредственные сайты имеют с бутстрапом?
                        +1
                        Бутстрап — потому что я, как и большинство программистов, не могу сам сделать приятно выглядящую страничку.

                        Зато в демке «Technical skill»:
                        CSS3 — 80%;
                        Photoshop — 90%;
                        Corel Draw — 90%.
                        Видать с «imagination» процентов не добрали :).
                          0
                          Умение грамотно писать само по себе не делает вас писателем. Так же и фотошоп…
                        +11
                        У Heroku неограниченный бесплатный период на один микроинстанс, при этом приятный быстрый деплой. Собственно, статью можно было бы сократить до этой фразы.
                          0
                          Не проще. Так как для того что бы сделать тоже самое вручную прийдется потратить не один десяток человеко-часов.

                          Сколько телодвижений вы бы сделали будь это просто обычный сайт?
                          Зарегистрировать домен, купить хостинг, получить к нему доступ по FTP, настроить работу VCS, настроить деплой.
                          Нарисовать — сверстать.
                        • UFO just landed and posted this here
                            +3
                            И для чего этот вброс без какой-либо конкретики?
                              +14
                              Спасибо за предложение, подумаем.
                              +2
                              Любопытно — зарегистрировал pnik.tk — через минуту открыл pnik.tk — получил сообщение от билайна, что «Данный сайт заблокирован». Но в help.internet.beeline.ru/restricted — сайта нет.
                                +8
                                Может он считает, что *.tk по умолчанию держит инструкцию по самоликвидации и коитус со школьницами?
                                  0
                                  Да там все домены .tk (кроме dot.tk) видать залочили — редирект с него на мой другой сайт проходит тоже через раз.
                                    0
                                    А у меня выводит надпись «Nobody here...» в левом верхнем углу.
                                      +2
                                      У вас значит другой провайдер :) Так, в идеале, и должно быть.
                                        0
                                        У меня тоже билайн, всё в порядке, вижу «Nobody here»
                                    +10
                                    Раз уж с github начали, почему не github pages?
                                      –2
                                      Нет динамики.
                                        +6
                                        А нужна ли для подобного сайта динамика?
                                          +1
                                          Приведенный прототип — не конечная точка развития сайта. В статье я упоминаю хобби-проекты. Их не выйдет делать в статике :)
                                          +2
                                          Что значит нет динамики? А как же Octopress и прочие Jekyll-подобные?
                                            0
                                            Это генераторы статических сайтов. Какая там динамика? Но тру программисту этого хватит.
                                              +1
                                              Какая именно динамика нужна в блоге/портфолио, которая не поддерживается такого рода генераторами?
                                                0
                                                Вы не понимаете, что в статическом сайте нет динамики со стороны сервера? Чтобы добавить пост надо выкачивать git репозиторий, добавлять, генерировать, пушить обратно. Много чего нельзя прикрутить. Но для блога/портфолио Jekyll'a хватает.
                                                  0
                                                  Тут вопрос в том что понимать под динамикой.
                                                  Конечный пользователь блог на Octopress не отличит от аналога на популярной CMS или самописном велосипеде.

                                                  Про «выкачивать, добавлять, генерировать, пушить» — это займет на 1-2 минуты дольше, чем добавление поста через админку CMS, вот уж минус так минус.

                                                  Чего нельзя прикрутить-то, в контексте простого блога/портфолио?
                                                    0
                                                    Фильтр статей (дальше чем по тэгам и категориям или хотя бы 2 тэга сразу), полнотекстовый поиск — надо тащить или Google или брать форки IndexTank или любой другой внешний сервис. Комментарии нельзя свои сделать надо использовать внешний сервис. Нельзя быстро и решительно отредактировать статью, нельзя настроить автопостинг, нельзя сделать email2post.

                                        +3
                                        А при чем тут Node.js, если сайт у вас полностью статический?

                                        Пункт «Настраиваем свой домен» не соответствует рекомендациям Heroku (naked domains использовать не стоит).

                                        «Во второй части, я планирую описать, как на созданном сайте добавить простой, но гибкий и функциональный блог программиста с хранилищем на всё том же github, использованием markdown, комментариями, шарингом в социальные сети и ещё парой жизненно необходимых фич :)» — с этого и стоило начать, если только это не описание настройки чего-то типа looseleafjs.
                                          +2
                                          А при чем тут Node.js, если сайт у вас полностью статический?

                                          Видимо, речь в заголовке идёт о сайте для человека, который программирует на Node.js :)
                                            0
                                            Автор нам намекает, что «Опыт работы с Node.js не обязателен.» Я проглядел, сайт не статический — подключается layout.html.
                                            0
                                            Ответил выше. Статическая страница — не все, что мне нужно на сайте. Статья и так длинная.
                                            0
                                            реквестирую
                                            я бы хотел видеть статью описания работы node с монгой или любой другой БД (желательно не реляционной), и чем проще и подробнее она будет написана, тем лучше
                                              –1
                                              Разочарую. Во второй части не будет БД. Она для блога программиста не особо нужна.
                                                0
                                                Может простейшие, операции с БД (Mongo?) на бесплатном heroku продемонстрируешь?
                                                  0
                                                  Оно вряд ли стоит статьи.
                                                  1. Верифицируемся на heroku: heroku.com/verify
                                                  2. В консоли в папке проекта (в котором уже сделано heroku create) heroku:add mongohq:sandbox
                                                  3. Идём сюда mongoosejs.com/ и делаем всё, что там написано. Только в mongoose.createConnection передаём process.env['MONGOHQ_URL'].
                                                  4…
                                                  5. PROFIT!!!
                                                  0
                                                  А где же посты хранить? Если в статике, то опять вопрос почему не github pages? Там можно jekyll заюзать, он как по мне, помощнее будет нежели бутстрап.
                                                  0
                                                  Если вам подойдет питона а не нод, то на 10gen идет курс по монго для разработчиков и для администраторов, как раз в качестве примера блог.
                                                    0
                                                    я посильно в нем участвую, но к сожалению питон мне совсем не нужен, поэтому больше все-таки хотелось бы именно с нодой
                                                    0
                                                    Вы серьезно хотите статью о том как node.js подружить с Mongoose? Это же любой туториал и хавту по express.js
                                                    0
                                                    А я бы выбрал OpenShift — там же есть и свой git-репозиторий, на крайний случай подключить bitbucket, потому как вероятно я не хотел бы светить исходниками всему честному народу. Openshift бесплатен и по дефолту бесплтных вокеров у меня там 3, а не один как в Heroku.
                                                      +1
                                                      Чтобы не светить исходники, можно выкладывать проект просто на heroku, без гитхаба. Или использовать закрытые репозитории на гитхабе (платно, но дёшево).

                                                      OpenShift, возможно, ничем не хуже, но и особых преимуществ я не вижу в данном случае. Одного воркера мне ещё надолго хватит. А если не хватит, то несколько долларов мне не жалко.
                                                        0
                                                        На OpenShift можно чего угодно поставить, там немного другой уровень абстракции платформы.
                                                          +1
                                                          Кстати, а можно как-нибудь прикинуть, какую (ну хотя бы примерно) нагрузку сможет держать микроинстанс при данной конфигурации?
                                                        0
                                                        А можно ли там создать «Landing Page» с запросом почтовых адрессов, для Беты? спасибо.
                                                        0
                                                        И всё же не увидел ответа на вопрос «Зачем программисту сайт»?
                                                        Нет, правда. Резюме — на линкедин, исходники — гитхаб\битбакет.
                                                        Бложики очень многие делают на tumblr или blogspot.

                                                        На мой взгляд было бы полезно остановиться на следующем варианте: площадка для «продажи» своих услуг\аппликаций\девайсов
                                                        то есть вместо описания социальных кнопочек, рассказать как лучше прикрутить системы оплаты.
                                                          +3
                                                          Если кто-то не знает, зачем ему нужен сайт — то правильнее всего не делать сайт. И это нормально.
                                                          Статья для тех, кому зачем-то всё-таки нужен сайт, а tublr, blogspot, wordpress, github pages, twitter, facebook, vk по каким-то причинам не устраивают (как меня).
                                                          0
                                                          На heroku только один сайт / проект бесплатен, или сколько угодно на аккаунт пока они используют не намного больше одного юнита?
                                                            0
                                                            Количество бесплатных проектов не ограничено, afaik. По крайней мере, мне пока хватает.
                                                              0
                                                              Хероку с одним бесплатным dyno через час неактивности кладёт виртуальную машину, и последующее обращение будет предваряться неприятной (~5с) задержкой. А второй dyno уже сразу будет стоить $35/m, и ради статической страницы оно того не стоит.

                                                              А вот напроитв того, страница под .tk это просто верх нищебродства. Такой хороший программист, и нету пяти баков в год на домен?
                                                                0
                                                                Про задержку не знал. Это, кажется, не есть большая проблема.

                                                                Домен .tk — только для примера. Мой сайт не на нём, конечно же.
                                                                  0
                                                                  А зачем платить пять баксов за домен? Зачем париться с регистрацией, вбивать кредитки?
                                                                    +1
                                                                    Разумеется, незачем. А визитные карточки можно вырезать из коробок от обуви и распечатать на принтере.
                                                                      0
                                                                      Вы таки путаете.
                                                                      Домен tk ничем не хуже любого домена, а регисрация занимает меньше времени.
                                                                      Если ам быстрее напечатать визитки на принтере, и результат по качеству не уступает — в чем проблема?
                                                                        0
                                                                        Домен .tk технически ничем не хуже любого домена, а психологически говорит мне: хозяин домена — либо девиантный упоротый фрик, принципиальный поклонник халявы, либо школьник без кредитки, либо его ресурсы под этим доменом менее важны, чем его же усилия по вбиванию кредитки в сайт регистрации.

                                                                        Ни одна из этих возможных причин не придаёт ресурсу привлекательности. IMO, разумеется.
                                                                          0
                                                                          Хм, забавно. Я, правда, об этом не задумываюсь обычно, но мне скорее наоборот домен не на tk(если он не «красивый»), подсказал бы, что не стоит сотрудничать с человеком, раз он распыляется на малозначащее.
                                                              0
                                                              Продолжайте, пожалуйста. Очень интересно увидеть как вы будете выкручиваться с динамикой.
                                                                +1
                                                                Если бы я не был веб-разработчиком, мне пришлось бы плакать и грызть кактус. К счастью, я им являюсь, поэтому решил сделать себе сайт сам.
                                                                Удивительная решительность!
                                                                  0
                                                                  еще appfog.com как альтернатива heroku
                                                                    +3
                                                                    есть вариант проще связка jekyll + github pages
                                                                      0
                                                                      Количество действий то же самое. Но нет возможности добавить динамические страницы, когда они понадобятся.
                                                                        +1
                                                                        а когда динамические страницы понадобятся, это уже не «простой сайт программиста».
                                                                    • UFO just landed and posted this here
                                                                      • UFO just landed and posted this here
                                                                          0
                                                                          Вы не поверите.
                                                                        +2
                                                                        Вставлю свои 5 копеек.
                                                                        Если у программиста нет возможности или умения рисовать красивый дизайн для своей уютной странички, то можно воспользоваться готовыми шаблонами отсюда themeforest.net/category/site-templates/personal/virtual-business-card
                                                                        Довольно удобно, красиво и на любой вкус.
                                                                          –1
                                                                          Сайт themeforest.net
                                                                          может угрожать безопасности вашего компьютера.
                                                                            0
                                                                            О этом говорят яндекс и гугл, а вот что они там нашли не известно.
                                                                          –1
                                                                          Если сайт для программистов… то ну я не знаю. Зачем мне форкать ваш репозиторий, если кода у вас не больше чем в простом примере для expressjs? Хотя бы обработку 404 ошибки прикрутили. Короче называть это «сайт для программистов» сильно громко, скорее для домохозяек.
                                                                            0
                                                                            Однозначно в избранное из за ссылок на раскраску и темам к bootstrapу
                                                                              0
                                                                              А Ruby парни, которые любят эксперементировать, SASS и Compass — могут попробовать Zurb Foundation 3 вместо Bootstrap.
                                                                              Очень рекомендую.
                                                                                0
                                                                                Уберите тег node.js. И название измените: «Сайт для [ программиста на Node.js ]».
                                                                                  0
                                                                                  Изврат какой-то. Я сделал простейший одностраничный сайт о себе. По-моему работодателям нравится, а что еще от него нужно?
                                                                                    0
                                                                                    А вы давно зарегистрировали домен в .tk зоне?
                                                                                    А то по интернету много всякого пишут про него, начиная с того что если не будет 50 посетителей в месяц, то он разрегистрируется и зарегистрироваться позволит уже только платно?
                                                                                    Я конечно понимаю что 50 посетителей в месяц для нормального сайта это сущие копейки, но получится ли без проблем использовать этот домен в несколько других целях? Например привязать к нему файлопомойку на которую разадва в неделю заходишь взять пару файлов.
                                                                                      0
                                                                                      Я мало что знаю про домен .tk, кроме того, что он бесплатен. Я бы на нём свой сайт держать не стал. И не стал.
                                                                                      В статье он исключительно для демонстрационных целей.
                                                                                        0
                                                                                        Так разговор именно не о сайте, а о файловом сервере который используется в личных целях крайне редко. Можно конечно ходить по IP, но домен все-таки проще запомнить. интересно было бы почитать отзывы тех, кто им пользовался продолжительное время. Если таковые имеются.
                                                                                        Вообще странно что нет (или я не нашел) ни одной зоны в которой можно зарегистрирвоать домен бесплатно. Ведь очень пригодилась бы в образовательных целях.
                                                                                      0
                                                                                      можно ли как-нибудь запустить ребилд без проталкивания новых изменений? например, когда я меняю buildpack

                                                                                      возможно ли при выкладке новой версии сохранение созданных предыдущей версией файлов? или каждый раз создаётся чистая виртуалка?
                                                                                        0
                                                                                        Написал на bootstrap одностраничную визитку и захостил на staticloud.com/ все бесплатно и можно привязать свой домен

                                                                                        Only users with full accounts can post comments. Log in, please.