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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• 192.30.252.153
• 192.30.252.154

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

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

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

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

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

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

Автор: AndreySBer

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