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

в 12:02, , рубрики: github, веб-сайт, гитхаб, Разработка веб-сайтов, халява студентам

В жизни многих студентов 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

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

Автор: AndreySBer

Источник

* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js