Pull to refresh

Сайт-визитка студента без затрат

Reading time 3 min
Views 34K

В жизни многих студентов it-специальности возникает желание устроиться на работу или стажировку в хорошую it-компанию. А для этого неплохо бы показать все свои скиллы на специально созданном сайте-визитке. Но студент, на то он и студент, обычно "бедный" и не хочет тратить деньги на покупку домена и хостинг, однако хочется всё по-взрослому (а не на Ucoze).


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


Что будет в этой статье:


  • про бесплатный пак от github для студентов
  • как получить бесплатный домен на год
  • как получить бесплатный хостинг
  • как связать домен и хостинг (DNS)
  • где взять шаблон

Получение домена


Начнем с получения домена. Здесь есть два способа:


Первый: небесплатный, которым пользовался я сам


Можно зарегистрировать домен в доменном зоне .ru всего за 140 рублей. Ссылку на регистратора оставлять не буду, но он легко гуглится (или найдет вас сам в контекстной рекламе после пары соответствующих запросов). На сайте регистратора вы выбираете свободный домен, покупаете, и пользуетесь целый год (это достаточно легко, не буду останавливаться подробнее). Правда продление потом будет стоить 495 рублей в год, что тоже не так дорого, относительно других регистраторов Рунета.


Второй: бесплатный, которым пользовались мои друзья


Он сложнее, зато вы получаете бесплатно на год домен в зоне .me. Однако, продление потом будет стоить уже $18.99 (а это больше тысячи рублей) и поморочиться придётся подольше.


Если вы студент it-специальности, слово Github уже не должно вызывать вопросов (а иначе никакой сайт-визитка не поможет). Так вот, этот самый Github помогает в нашем деле дважды. Во первых, он даёт так называемый Student Developer Pack, в котором и будет наш бесплатный домен. А, во вторых, именно средствами Githubа можно бесплатно хостить сайт (но об этом позже).


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


image


После того, как вам откроют доступ к этому пакету, заходите сюда, находите в списке Namecheap, кликаете на "Get access by connecting your GitHub account on Namecheap" и привязываете свой Github аккаунт. После будет всё та же процедура выбора свободного домена, и после подтверждения им можно пользоваться.


Бесплатный хостинг


Спасибо GitHub за то, что он есть. Отдельное спасибо за GitHub Pages, который предоставляет возможность разместить один сайт для аккаунта и подключить свой домен бесплатно. Для этого нужно создать репозиторий с названием username.github.io, где username — имя пользователя, например AndreySBer.github.io. Сайт будет доступен по этому же адресу.


Хостинг сайта основан на ветке master git-репозитория. Каждый коммит в master приводит к его обновлению. Поэтому разработку и тестирование лучше проводить в отдельной ветке и потом через pull-request сливать в master.


Как связать домен и хостинг (DNS)


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


1) Указать имя домена в настройках репозитория.


image


2) Добавить файл CNAME с именем домена.


image


3) В настройках домена у регистратора в пункте DNS добавить две A записи (подробнее здесь):


  • 192.30.252.153
  • 192.30.252.154

image


Связь обычно занимает небольшое время, но у некоторых регистраторов вступление в силу DNS записей занимает до суток. Также можно настроить переадресацию с субдомена www.yourdomain.ru. Как это сделать, написано здесь.


Где взять шаблон


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


Эти шаблоны построены на основе Bootstrap, есть примеры готовых блоков для страниц, адаптированы для мобильных экранов (в большинстве).
Имея базовые знания HTML, css, Bootstrap и чувство прекрасного, можно сделать вполне приличную страницу (или несколько), закоммитить их в develop ветку репозитория, протестировать на разных экранах, и затем залить в master.


Если нужен новый лендинг — повторить.


image

Таким нехитрым способом я сделал свой личный сайт, а также несколько страниц для учебных проектов.

Tags:
Hubs:
-3
Comments 26
Comments Comments 26

Articles