ASK Блог

🎧 ⏸️

Как это сделано… Веб-сайт. Часть 1

Руководство по созданию информационного веб-сайта своими руками.

Оглавление

Что такое веб-сайт #

6 августа 2023 года исполнится 32 года первому веб-сайту, созданному Тимоти Джоном Бернерсом-Ли. Он же является «отцом» основополагающих технологий веба — HTTP, URI/URL и HTML.

Веб-сайт — одна либо множество связанных друг с другом веб-страниц. В простом случае веб-страница представляет собой текстовый файл, содержимое которого размечено с помощью языка гипертекстовой разметки (HTML).

Можно выделить два вида веб-сайтов в зависимости от того каким образом формируются веб-страницы: статические сайты и динамические сайты.

Статический сайт состоит из веб-страниц, которые в готовом виде лежат на сервере. У статических сайтов есть как преимущества, так и недостатки. Из преимуществ можно выделить следующие:

  • — страницы сайта изначально кэшированы, т. е. пользователю отдается готовая страница, на генерацию которой не затрачиваются серверные мощности;
  • — благодаря предыдущему пункту страницы загружаются быстро;
  • — низкие требования к серверу: благодаря «легкости» сайта и отсутствия необходимости наличия на сервере интерпретаторов языков программирования и серверов баз данных;
  • — хорошая индексация поисковыми сервисами;
  • — переносимость (достаточно перенести файлы на другой сервер простым копированием).

Недостатки статических веб-сайтов:

  • — невозможно динамически генерировать содержимое (если есть в этом потребность);
  • — невозможность взаимодействия с пользователями (комментирование, авторизация и др.);
  • — для редактирования необходимо вносить изменения в исходные файлы сайта;
  • — для внесения однотипных изменений на сайте (например, изменить пункты меню) необходимо править каждый файл.

Информационный веб-сайт #

Среди множества видов веб-сайтов можно выделить информационный веб-сайт.

Информационный веб-сайт — веб сайт узкой или широкой тематики, на котором размещаются информационные структурированные материалы, являющиеся источником информации для пользователей.

Главное на информационном веб-сайте — информация. Поэтому такой сайт лаконичен в отношении дизайна, хорошо структурирован и обильно наполнен в отношении информации. Обязательным является наличие инструментов поиска информации (поиск, теги, категории и др.).

Что использовать для создания веб-сайта #

Здесь мы рассмотрим способы самостоятельного создания веб-сайта.

Конструкторы сайтов

Конструктор сайта — это облачный (сейчас преимущественно) ресурс, который сочетает в себе систему управления контентом (CMS), готовые шаблоны и хостинг. Используя такой сервис вы получаете полностью готовый веб-сайт, размещенный в сети интернет.

Существуют как бесплатные конструкторы сайтов, так и платные. Большинство конструкторов имеют несколько тарифов, в том числе и бесплатные, однако обладающие урезанным функционалом.

В большинстве конструкторов сайтов создание сайта включает следующие этапы:

  • — создание структуры сайта и необходимых компонентов;
  • — настройка элементов страниц и внешнего оформления;
  • — наполнение страниц содержимым (текст, изображение, видео и т. д.);
  • — в live-режиме проверка функций и внешнего вида сайта;
  • — публикация сайта.

Преимущества:

  • — скорость работы (сервис обеспечивает быструю и бесперебойную работу вашего сайта);
  • — удобство создания и поддержки сайта (вся работа с сайтом происходит в визуальном редакторе, не требующего специальных знаний);
  • — не требует отдельно платить за хостинг и его обслуживание;
  • — оптимизированность и работоспособность компонентов сайта.

Недостатки:

  • — ваши возможности ограничены функционалом сайта;
  • — перенести сайт скорее всего будет очень сложно (сервису невыгодно облегчать возможность переезда);
  • — урезанный функционал на бесплатных тарифах;
  • — подключение доменного имени на бесплатном тарифе, скорее всего, будет невозможно;
  • — ограниченность дискового пространства.

Популярные конструкторы сайтов: Tilda, uCoz, WordPress сервис, Google Sites, Wix, Nethouse и многие другие.

CMS

CMS (Content management system) — программное обеспечение, используемое для создания, редактирования и управления содержимым веб-сайта. В общем случае представляет собой панель администрирования, в которой осуществляется управление контентом и опубликованный сайт, который и содержит этот контент.

Главное отличие от конструкторов сайтов и преимущество — возможность устанавливать такую систему на свой сервер и неограниченные возможности кастомизации. У популярных CMS много тем оформления, множество плагинов, расширяющих функционал.

Популярные CMS: Drupal, WordPress, Joomla, MODX и другие

GitHub

GitHub — веб-сервис для хостинга IT-проектов и их совместной разработки. Сервис бесплатен для проектов с открытым исходным кодом и небольших частных проектов, предоставляя им все возможности.

Одна из функций GitHub — GitHub Pages, благодаря которой можно на основе кода, расположенного в соответствующей ветке вашего проекта, публиковать сайт. На данный момент сервис не модерирует содержимое таких сайтов, поэтому вы можете расположить там сайт не только для демонстрации вашего кода, но в информационных целей в соответствии с вашей тематикой.

Десктопное приложение Github Desktop позволяет синхронизировать ваш проект с репозиторием в сервисе.

Из недостатков, а точнее не соответствующее первоначальному назначению, Github Pages можно отметить: невозможность загрузки объемных файлов и ограничение по размеру репозитория.

Ручное создание сайта

Простой информационный сайт в общем случае — набор файлов .html, .css, .js. Соответственно, вы можете самостоятельно вручную, используя обычный текстовый редактор, создавать такие файлы, редактировать их и размещать на сервере.

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

  • — более длительный и трудоемкий процесс написания кода;
  • — при необходимости внесения одинаковых изменений в код, необходимо вносить их во все файлы проекта.

Генераторы статических сайтов

Генератор статических сайтов — приложение, запускаемое в командной строке для компиляции веб-сайта из исходных файлов. Исходные файлы — файлы, содержащие контент в формате .markdown и служебные файлы (файлы макета, стили, скрипты и др.).

Генератор статических сайтов считывает файл конфигурации и, согласно опциям прописанным в нем, помещает контент в файлы макетов, добавляет все ссылки, и записывает HTML-страницы из источников Markdown.

С помощью системы управления контентом (CMS), контент сохраняется в базе данных и динамически извлекается из базы данных на веб-страницу при каждом посещении пользователя. Генераторы статических сайтов не имеют баз данных — весь контент уже находится на странице, и ничего не собирается динамически на лету. Все страницы на статическом сайте были созданы до запроса браузера, что позволяет получать мгновенный ответ.

Отсутствие базы данных делает веб-сайты, созданные генератором статических сайтов, гораздо более портативными и независимыми от платформы. Весь сайт — просто набор текстовых файлов.

Несколько популярных генераторов: Jekyll, Hugo, Eleventy, Grow, Next.js, Gatsby, GitBook, Pelican и др.

Где разместить веб-сайт #

Сервер

Созданный вами веб-сайт любым из перечисленных выше способом необходимо опубликовать, чтобы он был доступен пользователям в интернете. Для доступа пользователей необходимо разместить сайт на сервере, доступ к которому открыт для пользователей.

Сервер — компьютер, на котором установлено специализированное программное обеспечение и доступ к которому открыт ограниченному или неограниченному кругу пользователей через сеть.

В зависимости от того, где расположен сервер можно выделить следующие способы размещения:

  • — хостинг;
  • — псевдохостинг (GitHub);
  • — домашний сервер.

Хостинг — услуга по предоставлению ресурсов для размещения информации на сервере, постоянно имеющем доступ к сети. Хостинг может быть бесплатным или платным.

Хостер предоставляет вам виртуальный сервер, выделенный сервер, виртуальный выделенный сервер, colocation-сервер, на котором вы размещаете файлы вашего проекта и, таким образом, сайт становится доступным в сети Интернет.

Псевдохостинг — размещение вашего сайта на сервисе, функция публикации сайта через который не является его основной функцией. Сюда относится описанный выше способ размещения сайта через GitHub Pages.

Домашний сервер — сервер, созданный на базе вашего домашнего компьютера.

Данный вариант вполне рабочий, при этом вам не потребуется статичный IP (обычно платный у провайдеров интернета). Сайт будет отзываться по доменному имени, при этом файлы проекта хранятся непосредственно на вашем компьютере.

Доменное имя

Доменное имя — символьное имя, служащее для идентификации сайта. При запросе сайта по доменному имени такое имя преобразуется в IP адрес, который уже указывает на конкретный сервер.

Доменные имена платные. Оплачивается аренда доменного имени на год, затем каждый год продлевается.

В следующей части мы рассмотрим конкретное программное обеспечение, которое мы выбрали для реализации нашего проекта.

Поделиться
Отправить
Запинить
 54   2023   веб-сайт   какэтосделано   кат   туториал
Ctrl ←Фотография → Симметрия
Ctrl →Фотография → Обнимашки
© ASKurashev, 2010–2024 РСС
Движок — Эгея