Объясни мне: как опубликовать свой сайт в интернете
vk f t

Объясни мне: как опубликовать свой сайт в интернете

Поку­па­ем домен, оформ­ля­ем хостинг, настра­и­ва­ем при­вяз­ку и зали­ва­ем фай­лы. Купа­ем­ся в лучах сла­вы.

Мы хотим сде­лать сайт и опуб­ли­ко­вать его в интер­не­те. К это­му момен­ту мы уже:

А теперь нам нуж­но подру­жить меж­ду собой эти три ком­по­нен­та, что­бы в ито­ге полу­чил­ся насто­я­щий сайт.

В чём суть это­го про­цес­са:

  1. Свя­зы­ва­ем домен и хостинг. Домен — это назва­ние сай­та, а хостинг — это место, где сайт хра­нит­ся и обслу­жи­ва­ет­ся. Нуж­но ска­зать интер­не­ту: «Этот сайт — это вон тот хостинг». Для это­го нуж­но кое-что настро­ить и на хостин­ге, и на домене.
  2. Ждём, пока интер­нет узна­ет об изме­не­ни­ях.
  3. Загру­жа­ем фай­лы наше­го сай­та на хостинг. Гото­во: они доступ­ны миру.

Раз­бе­рём это по частям.

Настройка хостинга

Сей­час у нас есть две отдель­ные услу­ги: домен и хостинг. Нуж­но их свя­зать, что­бы хостинг знал: «Если у меня запро­си­ли сайт с таким-то доме­ном, пока­зать вот такой сайт». Для это­го хостинг нуж­но настро­ить.

Все настрой­ки хостин­га дела­ют­ся в пане­ли управ­ле­ния. Ино­гда она опла­чи­ва­ет­ся отдель­но, ино­гда вхо­дит в сто­и­мость хостин­га. У SpaceWeb она бес­плат­ная, клю­чи от неё при­хо­дят на почту после реги­стра­ции хостин­га. Выгля­дит она так:


Нас инте­ре­су­ет вклад­ка «Доме­ны» — имен­но там дела­ет­ся при­вяз­ка доме­на к хостин­гу. Захо­дим туда и выби­ра­ем «Доба­вить домен». В поле вво­дим имя наше­го заре­ги­стри­ро­ван­но­го ранее доме­на. Эта запись ска­жет хостин­гу: «Когда тебе при­дёт запрос по это­му доме­ну, обслу­жи его»:


Обслу­жи­вать сайт — зна­чит, отдать по запро­су какой-то файл. Файл дол­жен где-то лежать. Поэто­му на сле­ду­ю­щем шаге нам пред­ло­жат выбрать имя для пап­ки, где будут хра­нить­ся фай­лы для сай­та.

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


Настройка домена

Мы научи­ли хостинг при­ни­мать запро­сы по адре­су mihailmaximov.ru. Но мы не научи­ли DNS-серверы в интер­не­те отправ­лять эти запро­сы на наш хостинг.

Что­бы это про­изо­шло, мы долж­ны рас­про­стра­нить по интер­не­ту новость: «Всем DNS-серверам! Если вам при­дёт запрос на mihailmaximov.ru, отправ­ляй­те его на spaceweb!». Эту рас­сыл­ку за нас сде­ла­ет наш реги­стра­тор доме­нов reg.ru — нуж­но лишь дать ему зада­ние.

Захо­дим в раз­дел помо­щи наше­го хостин­га и узна­ём там, что для направ­ле­ния на него доме­нов нуж­но ука­зать такие адре­са:

ns1.spaceweb.ru
ns2.spaceweb.ru
ns3.spaceweb.pro
ns4.spaceweb.pro

Пере­хо­дим в лич­ный каби­нет реги­стра­то­ра, выби­ра­ем домен mihailmaximov.ru, захо­дим в редак­ти­ро­ва­ние DNS-серверов и про­пи­сы­ва­ем там эти адре­са:


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


Отправляем файл на хостинг

Что мы име­ем сей­час: домен при­вя­зан к хостин­гу, хостинг готов обслу­жи­вать домен. Но нигде пока нет фай­лов наше­го сай­та. Маши­ны, кото­рые обслу­жи­ва­ют наш сайт, не зна­ют, что долж­но выво­дить­ся по запро­су. Нуж­но загру­зить фай­лы наше­го сай­та на хостинг.

В пане­ли управ­ле­ния хостин­га выби­ра­ем раз­дел «Доме­ны», там нахо­дим домен mihailmaximov.ru и нажи­ма­ем на зна­чок пап­ки рядом с ним. Пап­ка — это фай­ло­вый мене­джер, мы как бы откры­ва­ем вир­ту­аль­ный диск с нашим сай­том:


Несмот­ря на то, что сайт мы толь­ко созда­ли, там уже что-то лежит. Раз­бе­рём­ся:

Пап­ка cgi-bin — это пап­ка для выпол­не­ния скрип­тов, напи­сан­ных на язы­ках Perl, C и shell. У нас таких скрип­тов на сай­те нет, поэто­му эту пап­ку мы не тро­га­ем.
Файл .htaccess — это файл для локаль­ной настрой­ки веб-сервера, то есть той про­грам­мы, кото­рая отда­ёт нам сайт. С помо­щью это­го фай­ла мож­но защи­тить пап­ки паро­лем, доба­вить пере­ад­ре­са­ции, хит­рым обра­зом видо­из­ме­нять запро­сы — как-нибудь напи­шем об этом подроб­но.
index.html — это доку­мент, кото­рый веб-сервер счи­та­ет кор­не­вым, как бы «нуле­вой кило­метр» наше­го сай­та. Если запро­сить сайт mihailmaximov.ru, то веб-сервер най­дёт в кор­не­вой пап­ке index.html и отдаст его содер­жи­мое.

Сей­час в фай­ле index.html лежит стан­дарт­ный при­вет­ствен­ный текст от хостин­га, и он нам не нужен. Уда­лим его. Отме­ча­ем этот файл галоч­кой и нажи­ма­ем ввер­ху «Уда­лить».

Оста­лось зака­чать вме­сто него то, что нам нуж­но.

  1. Откры­ва­ем наш файл с сай­том. Для ваше­го удоб­ства исход­ный код при­ве­дён ниже в рас­хло­пе.
  2. Сохра­ня­ем этот файл под име­нем index.html — это будет глав­ный файл наше­го сай­та.
  3. В пане­ли управ­ле­ния хостин­гом нахо­дим кноп­ку «Загру­зить файл», выби­ра­ем наш index.html и под­твер­жда­ем.
Стра­ни­ца «О себе»

    
language: HTML

<!DOCTYPE html>

<html>

<!-- служебная часть -->

<head>

  <!-- заголовок страницы -->

  <title>Михаил Максимов — преподаватель информатики</title>

  <!-- настраиваем служебную информацию для браузеров -->

  <meta charset="utf-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- загружаем Бутстрап -->

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

  <style type="text/css">

    img{ 

      max-width: 100%; 

      max-height: 100%;

    } 

 

    h1{

      font-size:50px;

      margin-top: 30px;

      margin-bottom: 20px;

    } 

 

    h2{

      margin-top: 40px;

      margin-bottom: 20px;

    }

 

    p {

      font-size: 18px;

    } 

  </style>

 

</head>

 

<body>

 

  <div class="container" >

    <div class="row">

      <div class="col-12">

        <h1>Михаил Максимов</h1>

      </div>

    </div>

  </div>

 

  <div class="container" >

    <div class="row">

      <div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">

        <p>Я преподаю информатику с 2008 года, когда предмет ещё назывался ИКТ. Начинал со школы, учил детей разбираться в программировании и сдавать ЕГЭ на 90 баллов и выше. За два года вывел нашу школу на второе место в районе по олимпиадам по информатике. Вёл два класса коррекции — пятый и одиннадцатый — и знаю, как объяснить основы теории вероятности даже тем, кто не хочет ничему учиться.</p>

        <p>В 2012 защитил кандидатскую диссертацию по обучению информатике детей с недостатком внимания и стал внештатным преподавателем РГСУМ им. Макаренко. Параллельно с этим веду курсы по программированию «IDDQD» и записываю подкаст «Прогрокаст» с аудиторией 25 000 человек.</p>

      </div>

      <div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">

        <img src="https://thecode.media/wp-content/uploads/2019/07/sq_me.jpg" >

      </div>

    </div>

  </div>

 

  <div class="container" >

    <div class="row">

      <div class="col-12">

        <h2>Мои научные работы</h2>

      </div>

    </div>

  </div>

 

  <div class="container">

    <div class="row">

 

      <div class="col-12 col-sm-12 col-md-6 col-lg-3 col-xl-3" >

        <p><a href="https://thecode.media/baboolya/">Задача про бабушку и помидоры</a></p>

        <p><a href="https://thecode.media/electrician/">Хитрый электрик</a></p>

      </div> 

 

      <div class="col-12 col-sm-12 col-md-6 col-lg-3 col-xl-3">

        <p><a href="https://thecode.media/le-timer/">Как сделать свой таймер-напоминалку</a></p>  

        <p><a href="https://thecode.media/sublime-one-love/">Почему Sublime Text — это круто</a></p>

      </div>

 

      <div class="col-12 col-sm-12 col-md-6 col-lg-3 col-xl-3">

        <p><a href="https://thecode.media/est-tri-shkatulki/">Поговорим о Якубовиче</a></p>

        <p><a href="https://thecode.media/content-manager/">Как стать контент-менеджером</a></p>

      </div>  

 

      <div class="col-12 col-sm-12 col-md-6 col-lg-3 col-xl-3">

        <p><a href="https://thecode.media/batareyki-besyat/">Задача про сторожа и фонарик</a></p>

        <p><a href="https://thecode.media/variables/">О названиях функций</a></p>

      </div>  

 

    </div>

  </div> 

 

  <div class="container" >

    <div class="row">

      <div class="col-12">

        <h2>Контакты для связи</h2>

      </div>

    </div>

  </div>

 

  <div class="container" >

    <div class="row">

      <div class="col-12">

        <p>Телефон: +7 (123) 456-78-90</p>

        <p>Почта: <a href="mailto: mihailmaximov@gmail.com">mikemaximov@gmail.com</a></p>

        <p>Скайп: mihailmaximov</p>

        <p>Телеграм: @mihailmaximov</p>

      </div>

    </div>

  </div>

 

</body>

<!-- конец всей страницы -->

</html>


Ско­пи­ро­вать код
Код ско­пи­ро­ван

Когда DNS-записи обно­вят­ся, все уви­дят, что нахо­дит­ся по адре­су mihailmaximov.ru, Всё, сайт готов:


Что дальше

Сей­час наш сайт — это одна стра­нич­ка в сети, и есть мно­же­ство спо­со­бов его улуч­шить:

Всё это мы посте­пен­но сде­ла­ем и поде­лим­ся с вами. Не пере­клю­чай­тесь.

Ещё по теме