В этой публикации я разбираю и описываю свой опыт создания сайта с нуля.
За более подробной информацией по каждому ключевому моменту в веб-разработке я предлагаю обращаться к другим источникам. Если вы нашли в этой публикации ошибки или неточности, просьба уведомить об этом меня через форму комментирования или через форму обратной связи.
Введение
Сделать свой сайт оказалось легко и просто долго и тяжело. Сервисы, которые предлагают сделать сайт за 5-10-30 минут я даже не рассматривал т.к. сконструировав сайт на таком сервисе, являться его владельцем я не буду. Такой сайт администрация сервиса может по своему желанию снести без права восстановления, а все лицензионные, пользовательские (и какие там еще бывают?) соглашения будут идти против меня.
Первым делом я понял, что чем сложнее путь создания сайта, тем больше у меня будет прав на этот сайт. Самый сложный путь – это самому купить железо, собрать серверный компьютер из этого железа, поставить операционную систему, настроить веб-сервер, написать с нуля весь код и разместить свой сайт в Интернете. Но такой путь не всегда является рациональным…
В этой публикации я хочу поделиться своим опытом создания сайта с нуля. Подчеркну, что я до этого не имел какого-либо серьезного опыта в этом направлении и текущий сайт (mike07.com) – это мой первый подобный проект.
Основы веб-программирования
Итак, мне захотелось получить свой сайт. Первое, что пришло мне в голову – это написать сам сайт! Я скачал Notepad++ (более удобная замена блокноту) и, с помощью самоучителя, начал изучать html (1) и css (2).
Основная часть веб-верстки – это html код. Он определяет элементы сайта и их расположение относительно друг друга. Любой html код начинается со строки-интерпретации: указание версии html и то, как веб-браузеру этот код надо интерпретировать. Я использовал следующий тип интерпретации: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Translitional//EN" "http://www.w3.org/TR/xhtmll/DTD/xhtmll-translitional.dtd"> , который смешивает в себе два языка разметки - это XML и HTML, но в то же время дает возможность гибкого программирования (допускает легкие ошибки). Другие типы <!DOCTYPE> расписаны в самоучителе. А более подробную информацию по ним я взял из стороннего источника. (3)
Второй строчкой уже идет сам html код. Он начинается с тега <html> и заканчивается </html>. Между этими двумя тегами пишется остальная часть html кода, которая разделяется на две части: описательную и основную.
Описательная начинается с тега <head> и заканчивается тегом </head>. В описательной части можно задать заголовок веб-страницы, выбрать кодировку страницы, добавить ключевые слова, задать описание страницы (на которую вроде как должны смотреть поисковики), и многое другое. Каждое действие начинается со своего тега. Например, задать заголовок веб-страницы (название страницы во вкладке браузера) можно тегами <title>, и выглядеть это будет <title>Моя первая веб-страница</title>. А тип и кодировка веб страницы задается уже более сложным тегом <meta>, внутри которого уже приводится нужная запись <meta http-equiv="Content-Type" content="text/html; charset=utf-8">. Этих двух описательных тегов достаточно, чтобы создать простую веб-страницу. Осталось теперь разобраться с основной частью кода.
Основная часть начинается тегом <body> и заканчивается тегом </body>. Между этими двумя тегами пишется основной код веб-страницы, который непосредственно отображается в окне браузера. Внутри этих тегов можно написать страницу отображения обычного текста с заголовком. Заголовок задается тегами <h1>…<h6>, где цифра указывает размер заголовка; а абзац задается тегом <p>.
На основе этих знаний можно написать первую веб-страницу:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Translitional//EN" "http://www.w3.org/TR/xhtmll/DTD/xhtmll-translitional.dtd"> <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Пример веб-страницы</title>
</head>
<body>
<h1>Заголовок</h1>
<p>Первый абзац.</p>
<p>Второй абзац.</p>
</body>
</html>
Осталось сохранить ее как name.html и открыть в браузере.
Первая веб-страница готова. Ее можно усложнить: добавить ссылки, картинки, таблицы и прочие элементы. Более подробнее об этом всем расписано в самоучителе. На том же самом сайте даны все html теги. (4) Не имеет смысла их все заучивать. Лично я легко гуглил их по мере необходимости.
С CSS все сложнее, но особых трудностей оно у меня не вызывало. Если в HTML задаются сами элементы – текст, ссылки, картинки и т.д., то в CSS задаются стили этих элементов (цвет шрифта, размер шрифта, отступы и т.д.). CSS пишется в новом файле, например, name.css. Можно писать CSS стили и в html файле, но это считается дурным тоном, да и в более сложных страницах ориентироваться в отдельных файлах html и css будет куда легче.
CSS код, обычно, состоит из нескольких селекторов, каждому из которых задается свойство и значение. Например, чтобы задать заголовку красный цвет шрифта, нужно ввести:
h1 {color: #950f0f;}
,где h1 – селектор, к которому применяется стиль (в данном случае это заголовок h1),
color – свойство, для которого применяется стиль,
#950f0f – значение свойства.
Теперь можно написать базовый файл стилей:
body {
font-family: Arial, Verdana, sans-serif; /* Семейство шрифтов */
font-size: 11pt; /* Размер основного шрифта в пунктах */
background-color: #f0f0f0; /* Цвет фона веб-страницы */
color: #333; /* Цвет основного текста */
}
h1 {
color: #a52a2a; /* Цвет заголовка */
font-size: 24pt; /* Размер шрифта в пунктах */
font-family: Georgia, Times, serif; /* Семейство шрифтов */
font-weight: normal; /* Нормальное начертание текста */
}
p {
text-align: justify; /* Выравнивание по ширине */
margin-left: 60px; /* Отступ слева в пикселах */
margin-right: 10px; /* Отступ справа в пикселах */
border-left: 1px solid #999; /* Параметры линии слева */
border-bottom: 1px solid #999; /* Параметры линии снизу */
padding-left: 10px; /* Отступ от линии слева до текста */
padding-bottom: 10px; /* Отступ от линии снизу до текста */
}
Осталось расположить этот файл в одной папке с файлом html кода и в самом html коде подключить стиль с помощью тега <link> . И тогда html код примет вид:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Translitional//EN" "http://www.w3.org/TR/xhtmll/DTD/xhtmll-translitional.dtd"> <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="name.css">
<title>Пример веб-страницы</title>
</head>
<body>
<h1>Заголовок</h1>
<p>Первый абзац.</p>
<p>Второй абзац.</p>
</body>
Открытие html файла в окне браузера уже выдает стилизованную страницу.
CSS открывает огромные возможности для стилизации веб-страниц. Какая-то часть из них расписана в самоучителе (5) или в справочнике по CSS (6). Объять всю эту тему невозможно (тем более, продвинутый CSS с годами меняется). Какие-то вещи легко гуглятся, какие-то приходится самостоятельно искать, а некоторые даже самому выдумывать.
После изучения базовых принципов html и css можно переходить к самой верстке. Базовая теория расписана в самоучителе. (7)
Я решил придерживаться трехколоночного макета: header (head), left menu (sidebar), main content (content), right menu (sidebar2), footer.
К этому моменту я уже примерно представлял, какой дизайн я бы хотел, и что-где-как будет располагаться. Важный момент был только с расчетами длины и ширины элементов. Для их вычисления «на глазок» я использовал в Adobe Photoshop инструмент «Линейки» в меню «Просмотр -> Линейки» (англ. View -> Rulers). Из появившихся линеек я вытаскивал линии и расставлял их по границам элементов. Таким способом я получил точные размеры элементов сайта и их расположение. Осталось только это все свести в код.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <body> <div class="sidebar"> <div class="content"> <div class="sidebar2"> <div class="footer">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>mike07.com</title>
<meta name="description" content="Mike07 - Daily sic!">
<meta name="keywords" content="mike07, блог">
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<div class="main">
<div class="head">
<h3>Первая ласточка</h3>
<h2>Daily sic!</h2>
</div>
<div class="vidget">
<h2>Рубрики</h2>
<ul>
<li><a href="#">Рубрика 1</a></li>
<li><a href="#">Рубрика 2</a></li>
<li><a href="#">Рубрика 3</a></li>
</div>
</div>
<div class="post-main">
<h1><a href="#">Пост 1</a> <span>01.01.2018</span></h1>
<div class="post">
<p>Наткнулся на годную картинку, которая дает представление о военной ситуации в мире.
Мне всегда казалось, что до 1990ых в мире царил мир и процветание. А если и была где-то война, то только холодная) А вот с 90ых начались все ужасы и дальше пошло поехало по нарастающей и вплоть до сегодняшнего дня.
А если так посмотреть, то самые кровавые месива с 50ых годов были в период с 1975 по 1990 год. В года, которые казались самыми благополучными в истории.
То ли на это заблужение повлияла какая-то пропаганда, то ли реальная история своей собственной страны (с Чечней, Грузией и Украиной), то ли военная риторика в журналистике (когда каждый день вещают про войны). Или... может быть я просто тогда не жил и не знал обо всем плохом в те года. ._.</p>
<p><a href="#"> Читать далее </a></p>
</div>
<div class="post-main">
<h1><a href="#">Пост 2</a> <span>01.01.2018</span></h1>
<div class="post">
<p>Здесь какой-то текст поста 2 </p>
<p><a href="#"> Читать далее </a></p>
</div>
<div class="post-main">
<h1><a href="#">Пост 3</a> <span>01.01.2018</span></h1>
<div class="post">
<p>Здесь какой-то текст поста 3 </p>
<p><a href="#"> Читать далее </a></p>
</div>
</div>
</div>
</div>
</div>
<div class="vidget2">
<h2>Рубрики</h2>
<ul>
<li><a href="#">Рубрика 1</a></li>
<li><a href="#">Рубрика 2</a></li>
<li><a href="#">Рубрика 3</a></li>
<li><a href="#">Рубрика 4</a></li>
</div>
</div>
<div class="cpy">
<p>© «Mike07», 2018<br/>
Копирование разрешено с указанием ссылки на источник.</p>
</div>
</div>
</div>
</body>
</html>
*{
padding: 0; margin: 0;
}
ul{
list-style: none;
}
body{
background: #000003 url(images/background.png) center top no-repeat;
}
.main{
width: 1280px; margin:0 auto;
}
.head {
height: 200px;
overflow: hidden;
}
.head h2{
font: 25px "Snowstorm";
color: #ffffff;
float: left;
margin-top: 139px;
margin-left: -30px;
}
.head h3{
font: 14px "Snowstorm";
color: #ffffff;
float: left;
margin-top: 163px;
margin-left: 130px;
}
.menu {
list-style: none;
background: #000000;
overflow: hidden;
}
.search-main {
float: right;
margin: 0 25px 0 0;
}
.search-button {
position: relative;
top: 10px;
}
.search-txt {
height: 20px;
width: 230px;
background: #01062b;
}
.sidebar{
width: 200px;
height: 628px;
margin-left: 100px;
border-top: 1px solid #ffffff;
border-right: 1px solid #ffffff;
display: inline-block;
vertical-align: top;
margin-right: -4px;
}
.vidget {
}
.vidget h2{
font: 14px Verdana;
color: #ffffff;
text-align: center;
padding: 5px 20px 8px 15px;
}
.vidget ul{
list-style: none;
padding: 25px 15x;
}
.vidget ul li a{
font: 11px Verdana;
color: #2f7ff5;
text-decoration: none;
padding: 5px 20px 8px 15px;
}
.vidget ul li a:hover{
font: 11px Verdana;
color: #ffffff;
text-decoration: none;
}
.content{
width: 680px;
height: 629px;
background: rgba(3, 13, 66, 0.3);
border-bottom: 1px solid #ffffff;
display: inline-block;
vertical-align: top;
margin-right: -4px;
}
.post-main{
border: 1px solid #ffffff;
}
.post-main h1{
font: 14px Verdana;
color: #ffffff;
padding: 5px 20px 8px 15px;
}
.post-main h1 a{
font: 14px Verdana;
color: #ffffff;
text-decoration: none;
}
.post-main h1 a:hover{
font: 14px Verdana;
color: #2f7ff5;
text-decoration: none;
}
.post-main h1 span {
font: 11px Verdana;
color: #ffffff;
float: right;
}
.post{
margin: 0 15px 15px 15px;
}
.post p{
font: 11px Verdana;
color: #ffffff;
margin: 0 0 15px 0;
}
.post p a{
font: 11px Verdana;
color: #2f7ff5;
text-decoration: underline;
}
.post p a:hover{
font: 11px Verdana;
color: #ffffff;
text-decoration: underline;
}
.sidebar2{
width: 200px;
height: 629px;
border-top: 1px solid #ffffff;
display: inline-block;
vertical-align: top;
border-left: 1px solid #ffffff;
}
.vidget2 {
}
.vidget2 h2{
font: 14px Verdana;
color: #ffffff;
text-align: center;
padding: 5px 20px 8px 15px;
}
.vidget2 ul{
list-style: none;
padding: 25px 15x;
}
.vidget2 ul li a{
font: 11px Verdana;
color: #2f7ff5;
text-decoration: none;
padding: 5px 20px 8px 15px;
}
.vidget2 ul li a:hover{
font: 11px Verdana;
color: #ffffff;
text-decoration: none;
}
.footer{
overflow: hidden;
padding-left: 5px;
margin-left: 300px;
border-left: 1px solid #ffffff;
}
.cpy{
float: left;
font: 12px Verdana;
color: #ffffff;
text-decoration: none;
}
Получилось уже что-то более похожее на сайт.
В <head> html кода я задал название сайта, описание сайта, ключевые слова и ссылку на css стиль (он должен находится в одной папке с html кодом).
В <body> я задал много <div class=”…”> ,,,</div>, где … - это название класса, которое можно использовать в css файле в качестве селектора для заданий стилей. То есть я объединил два заголовка <h2> и <h3> в один div класс, и теперь могу их вместе редактировать как один класс в css стиле.
<li> - это маркированный элемент в виде списка (аналогичен точечным маркерам Microsoft word), только сами маркеры в css файле удаляются. Это сделано, чтобы получить табличный вид.
<a href="#">Пост 1</a> - это ссылка, где Пост 1 – это текст ссылки, а # - сама ссылка.
В CSS файле все чуть сложнее. За символами /* … */ скрыт обычный комментарий. Он не является частью кода и используется как обычный текст.
* - это глобальный селектор. Все, что задается в глобальном селекторе, принимается для всех селекторов.
body – это селектор основной части. Именно через него я задал фоновую картинку в верхней центральной части веб-страницы и закрасил все свободные от фоновой картинки места цветом #000003.
Все остальные селектора относятся к определенным элементам html кода. Некоторые селектора имеют длинный вид, например, .post-main h1 a:hover. Здесь задается свойство для конкретного случая, а именно, для ссылки заголовка элемента post-main, при наведении курсора мыши. Такие частные случаи вполне возможны в css файлах.
Отступы в коде используются для удобства восприятия. Можно печатать и без отступов, код от этого работать не перестанет.
Панель разработчика
В популярных компьютерных браузерах имеется встроенная панель разработчика (Chrome) или же веб-консоль (Firefox), которые открываются клавишей F12. Это очень полезный инструмент в веб-программировании. Я им пользуюсь для определения названия элемента в веб-странице и чтения css стилей с него. Например, я очень хочу сделать кнопку зеленой, но в своем коде из нескольких тысяч строк я совсем не помню, как обозвал тогда этот элемент. Тогда, встроенным инспектором, я легко могу навести курсор мыши на этот элемент и определить его название и даже место в html коде. Иногда же я вижу зеленую кнопку и недоумеваю, ведь я задал синий цвет этой кнопки! Почему он рисует ее зеленой? Тогда я опять, с помощью инспектора, нахожу используемые css стили для этого элемента и изучаю причину того, почему этот элемент отображается моим веб-браузером именно таким образом. Этим же способом можно влезать в элементы чужого кода и получать необходимую информацию для изменения их css стилей.
С помощью консоли в панели веб-разработчика можно также искать ошибки, которые выдают элементы на веб-странице. Но не всегда стоит верить этим ошибкам. Логи мне выдавали неправильную причину неработоспособности загрузчика аватаров, что лишь путало меня в решении проблемы.
С помощью консоли в панели веб-разработчика можно также отслеживать источники элементов веб-страницы. С помощью таких источников я могу, например, без проблем качать видео с Tumblr.
Это довольно мощный Интернет-инструмент, и я мог бы о нем написать еще много-много страниц, но, к сожалению, если уделять подробное внимание каждому важному элементу в веб-программировании на начальном этапе, то получится книжка на несколько сотен страниц. Поэтому я оставлю ссылки на источники, с помощью которых можно более подробнее изучить этот элемент. У Гугла довольно хорошая текстовая энциклопедия. (8) Мозиловцы же решили сделать ставку на видеоуроки. (9)
Платформы для разработки сайта
Итак, с помощью двух файлов: .html и .css можно набросать любую статичную веб страницу. Правда любое изменение веб-страницы нужно проводить через переписывание тех двух файлов, но это еще не беда. Беда же здесь в том, что такая страница не является полноценным сайтом. Это просто страница! И чтобы создать полноценный сайт, нужно будет как-то связать между собой ссылки на странице путем создания других страниц. И тут уже каждую новую страницу придется писать с нуля. Хуже того, такой сайт будет не функциональным. На нем не будет привычной формы входа и регистрации, формы комментирования, формы обратной связи и т.д. Такая ситуация была характерной для многих сайтов эпохи web 1.0. (10) С наступлением эпохи web 2.0 появились платформы для разработки сайтов. Их делят на три типа: SaaS, CMS и Фреймворк.
- SaaS – это сервис, где предлагается уже готовый шаблон, готовые модули (форум, опрос, чат, регистрация и т.д.), готовое доменное имя и даже бесплатное место размещения на сервере. Но к этому всему и налагаются ограничения, которые можно ослабить или снять путем ежемесячной оплаты VIP, Premium и прочих элитных аккаунтов. Главный минус таких платформ – такой сайт мне не принадлежит, и легко, в любой момент, может быть удален администрацией. Более того, такие площадки снимают с себя ответственность за любые потери и убытки. Поэтому вести сайт на такой платформе довольно рискованно. Но зато это самый простой способ создания сайта. Примеры таких платформ: uCoz, Wix, Tilda Publishing, Nethouse и т.д.
- CMS – это расширенное программное обеспечение, которое создает ядро сайта и предоставляет расширенный функционал к нему. К CMS обычно предоставляются базовые шаблоны, форма входа/регистрации, система создания страниц, возможность установки сторонних плагинов и много-много всего. Примеры таких платформ: WordPress, Joomla, Drupal, vBulletin, Typo3 и т.д.
- Фреймворк – это базовое программное обеспечение, которое создает ядро сайта и предоставляет базовые программные модули, на основе которых разработчиком сайта создаются компоненты. Если CMS – это быстро и доступно, то фреймворк – это гибко и безопасно. По мне так фреймворк – это более лучший вариант для качественного проекта, но он требует знаний одного из языков программирования. Примеры фреймворков: Yii (php),
JSF (java), Django (python). И да, вы, наверно, слышали про .NET Framework? Это один из известных фреймворков от компании Microsoft. В веб-разработке встречается редко ибо очень дорого.
Я не особо умею программировать, а сайт мне нужен для ведения блога, поэтому я выбрал самую популярную CMS платформу – WordPress. К сожалению, это еще и самая уязвимая платформа. Мой никому не известный сайт за 3 месяца работы пытались дважды брутфорсить (подбор пароля путем часто используемых комбинаций), и по уязвимостям платформы они конечно же тоже прошлись, поэтому надо заранее озаботиться безопасностью сайта, желательно в первый же день запуска. А еще там довольно кривой код, но яж не программист, поэтому такая платформа является самой оптимальной для меня. Тем более, что главный ее плюс – это огромное количество готовых плагинов, которые можно легко реализовать на своем сайте. И тут же вылезает большой минус – каждый такой плагин может содержать уязвимость.
Верстка WordPress шаблона
Для WordPress написано огромное количество платных и бесплатных тем, которые определяют внешний вид сайта. Но я все же решил сверстать свою собственную тему на основе уже имеющихся у меня html и css набросков. Точнее говоря, адаптировать свои наброски под WordPress тему. А что же из себя представляет стандартная WordPress тема?
WordPress тема – это набор файлов в формате .php + набор стилей в формате .css.
Каждая тема WordPress обычно включает в себя следующие файлы:
- index.php - базовый файл шаблона
- .css - файл стилей
- single.php - полная страница публикации (та, которая открывается после нажатия на «читать далее»)
- page.php - дополнительная страница (об авторе, о сайте и т.д.). Но т.к. я под каждую страницу использую отдельные стили (страница входа, страница регистрации, страница «об авторе» и т.д.), то для каждой отдельной страницы я задал свой отдельный файл, например:
- page-about.php – страница «о сайте»
- page-avatar.php – страница смены аватара
- и т.д.
- search.php – страница результата поиска
- footer.php - нижняя часть темы
- header.php – верхняя часть темы
- sidebar.php – боковая колонка темы. Если их две, то можно вместо sidebar.php использовать:
- sidebar-left.php - левая колонка
- sidebar-right.php – правая колонка
- searchform.php – элемент поисковой формы
- functions.php – файл с дополнительными функциями
- 404.php – страница «ничего не найдено»
В более продвинутых темах есть еще много других файлов, но всегда стоит начинать с этого «джентельменского набора».
В основе .php файлов лежит html и php код. Php код в теме WordPress – это чаще всего однострочные функции, которые активируют вшитый в ядро WordPress программный код. Справочник по функциям есть на официальном сайте WordPress (11) и на неофициальном (12). По-хорошему, перед созданием темы все эти функции нужно изучить и знать, но я же их изучал по мере необходимости.
Все функции реализуются с помощью php кода. В текстовом виде это осуществляется с помощью тега <?php … ?> , где … - это какая-то функция. Например, чтобы с помощью функции получить прямую ссылку на файл стилей, нужно напечатать <?php bloginfo ('stylesheet_url'); ?>. А чтобы с помощью функции получить ссылку на домашнюю страницу сайта, нужно ввести <?php echo home_url(); ?>. В этой функции добавляется элемент echo, с помощью которого осуществляется вывод полученного результата в виде текста. После функции всегда идут скобки, которые используются в качестве уточнения. Например, та же функция bloginfo может вывести большое количество информации, но, чтобы вывести конкретную информацию, например, прямую ссылку на файл стилей, используется уточнение stylesheet_url. Если эти уточнения не нужны, то в скобках ничего не пишется.
Все эти однострочные функции выполняют код, который уже вшит в ядро WordPress. А чтобы написать свою функцию, нужно использовать файл functions.php. У меня в этом файле записана своя функция комментирования на 40 строк, которую я могу реализовать в других файлах темы в виде короткого однострочного кода <?php commentsssss(); ?>, который я сам же и придумал. В этом и состоит фишка WordPress верстки: имеются множество файлов, которые друг с другом взаимосвязаны. И чтобы не писать в каждом файле одни и те же функции на несколько десяток/сотен/тысяч строк, все функции пишутся в одном конкретном файле, из которого их уже можно вызвать в любом другом файле темы. Такую же цель несут в себе файлы header.php, sidebar.php и footer.php. В этих файлах пишется код определенного элемента темы. А потом их же можно использовать в любых других файлах темы с помощью функций, в моем случае (для темы сайта из двух колонок) это <?php get_header(); ?>, <?php get_sidebar('left'); ?>, <?php get_sidebar('right'); ?> и <?php get_footer(); ?>. С этих файлов я же и начал верстку шаблона под WordPress.
Часть кода из index.html я перенес в header.php, начиная от <!DOCTYPE… и заканчивая </head> + все элементы в хедере (от <body> до <h2>Daily sic!</h2></div>), а потом заменил некоторые строки функциями, например, изначальный <title>mike07.com</title> я заменил на <title><?php bloginfo('name'); ?><?php wp_title(); ?></title>. Со временем я свой header.php еще не раз редактировал (настраивал rss-ленту, индексацию поисковиков, капчу и т.д.).
В sidebar-left.php и sidebar-right.php я добавил иконки + панель виджетов. Иконки я задал следующим кодом:
<div class="left-1">
<a href="https://daily.mike07.com"><img src="<?php bloginfo('template_url'); ?>/favicon/DS.png" width="16" height="16" border="0" alt="Daily sic"></a>
</div>
,где href= – это ссылка, на которую произойдет переход при клике по картинке,
img scr= - это ссылка на само изображение (ссылка на шаблон темы задается с помощью функции),
width= height = - это ширина и высота картинки,
border – рамка вокруг картинки ( =0 т.к. не нужна),
alt – если навести мышку на картинку и подождать, то вылезет окно с сообщением "Daily Sic".
Виджеты я задал следующим кодом:
<div class="vidget">
<?php if(!function_exists('dynamic_sidebar') || !dynamic_sidebar('Sidebar-left')) : ?>
<p>Виджеты не найдены</p>
<?php endif; ?>
</div>
Это общая функция вызова виджетов. С помощью виджетов можно потом легко создавать меню за счет встроенного функционала WordPress.
Ну а в footer.php я загнал тот самый нижний текст с копирайтом:
<div class="footer"> <?php wp_footer(); ?>
<div class="cpy">
<p>© «Mike07», 2018<br/>
Копирование разрешено с указанием ссылки на источник.</p>
</div>
</div>
Последняя строчка необходима для работоспособности некоторых плагинов.
Из этих трех файлов можно уже собрать основной файл index.php:
<?php get_header(); ?> <?php get_sidebar('left'); ?> … <?php get_sidebar('right'); ?> <?php get_footer(); ?> </div> </body> </html>
,где … - это код основного контента на вывод постов, нумерации страниц, ссылок «читать далее» и т.д. В моей теме имеются своеобразные модификации, поэтому я не вижу смысла приводить его в качестве примера. Момент с написанием кода основного контента хорошо разобран в дополнительных источниках.
Оформление Style.css остается аналогичным первоначальному варианту. Единственный момент, в самом начале кода нужно написать пару строк информации о названии шаблона, создателе, версии и т.д., которая будет отображаться при установке темы на сайт. Это можно задать следующей строкой:
/* Theme Name: Моя первая тема Theme URI: Description: Тема для сайта Version: 1.0 Author: Mike07 Author URI: mike07.com */
В functions.php задаются дополнительные функции. Здесь нужно обязательно включить возможность отображения виджетов. Задается это следующим кодом:
if(function_exists('register_sidebar'))
register_sidebar(array('name' => 'Sidebar-left'));
register_sidebar(array('name' => 'Sidebar-right'));
А появление всего остального в functions.php – дело времени)
Single.php пишется аналогично index.php (с использованием <?php get_header(); ?> и всего остального), но только с небольшими изменениями в коде основного контента.
Page.php я оформил следующим образом:
<?php get_header(); ?> <?php get_sidebar('left'); ?> <div class="content"> <?php if(have_posts()):?> <?php while(have_posts()): the_post(); ?> <div class="post-main"> <h1><?php the_title(); ?> </h1> <div class="post"> <?php the_content(); ?> </div> </div> <?php endwhile; ?> <?php endif; ?> </div> <?php get_sidebar('right'); ?> <?php get_footer(); ?> </div> </body> </html>
Это довольно часто встречаемый вариант кода для этого файла. Тут выполняется цикл, который начинается с if и while, а заканчивается endwhile и endif. Довольно классическая штука в программировании.
Search.php и searchform.php каждый пишет как захочет) Но на первых порах я использовал общедоступный вариант из Интернета.
404.php – самый короткий вариант кода, body которого выглядит вот так:
<body bgcolor="#000000"> <center> <div class="404"> <img src="<?php bloginfo('template_url') ?>/images/404.png" alt="404" /> </div> </center> </div> </body>
Теперь осталось только загрузить картинки, на которые ссылаются файлы. Например <?php bloginfo('template_url') ?>/images/404.png" alt="404" /> означает, что в файле шаблона есть папка images, в которой должна быть картинка 404.png.
Если все файлы написаны, а картинки загружены, можно с уверенностью заявлять о том, что тема сайта готова. Она пока еще базовая и, наверняка, будет постоянно обновляться. Более того, я до сих пор время от времен залезаю в корень сайта и меняю/добавляю/убираю какие-то моменты в коде.
Тема основного сайта у меня имеет три файла стиля и тысячу строк в коде functions.php, но это все приходит по мере необходимости. Большую часть необходимостей я гуглил в Интернете, либо обращался на специальные сайты помощи веб-программистам, где можно задавать вопросы (Toster.ru и Stackoverflow.com). В последнем варианте всегда найдутся люди, которые попытаются помочь, но перед тем как попросить помощи, лучше поискать готовые решения самостоятельно в т.ч. и на английском языке.
Услуги хостинговых компаний
Теперь, когда основа сайта готова, можно переходить к теме размещения сайта в Интернете. Можно самому собрать комп и разместить на нем свой сайтик, но я решил воспользоваться услугами хостинговых компаний. Хостинги предлагают следующие услуги:
- Веб-хостинг – это полностью настроенный сервер, на котором установлена программа для управления веб-хостингом (cPanel, ISPmanager и т.д.). Пользователь получает логин/пароль к своему аккаунту в этой программе и некоторое количество индивидуально выделенных ресурсов (определяется тарифом). Управлять сервером пользователь не может, он может пользоваться только этой программой. И с помощью этой же программки он может осуществлять базовый функционал для размещения своего сайта в сети Интернет. Плюсы – такой вариант довольно дешевый и его не надо настраивать. Минусы – на одном сервере располагаются сотни сайтов; если на один из них устроят DDoS атаку, то за ним лягут и другие сайты + высокая вероятность, что сайт в некоторые часы будет долго загружаться, либо вообще окажется недоступным. Итого: низкое качество предоставляемой услуги, но зато дешево и настраивать особо ничего не надо.
- Выделенный сервер (dedicated) – это когда в аренду пользователю предоставляется весь сервер. Здесь нужно самому выбрать конфигурации и самому произвести установку операционной системы, библиотек и прочих программ. Это сложно, тяжело и дорого, но зато есть полный доступ к компьютеру + высокая надежность (которая зависит от того, как этот сервер будет настроен). Никаких левых сайтов по соседству.
На том же сервере можно разместить хоть сотню своих сайтов, а по соседству еще и сервак для компьютерной игры запустить. Весь компьютер в полном распоряжении! Главное, чтобы мощностей хватило) - Виртуальный выделенный сервер (VPS) – это что-то среднее между веб-хостингом и выделенным сервером. Один большой физический сервер разделили на несколько виртуальных частей. Это сложно для понимания, но представьте, в классическом офисе у каждого человека имеется физический компьютер (корпус, внутри которого размещен блок питания, материнская плата и т.д.), через который он работает в своей виртуальной среде (то, что человек видит на мониторе). VPS же предлагает вариант, когда все люди подключены к одному физическому компьютеру, но каждый имеет свою собственную виртуальную среду. И VPS именно это и предоставляет!
Обычно VPS нужно настраивать: устанавливать операционную систему, веб-сервер и т.д. , но зато он более дешевый, чем выделенный сервер (но дороже веб-хостинга). А вот с надежностью 50/50. В Интернете пишут, что каждый сайт изолирован от других сайтов, но, я думаю, в случае DDoS атаки на такой изолированный сайт, в первую очередь опять же пойдет нагрузка на железо, которое определяет доступность других сайтов. Но, теоретически, при VPS на одном хостинге сайтов размещается значительно меньше, чем на веб-хостинге, поэтому шанс получить проблему из-за работы сторонних сайтов достаточно мала. - Cloud сервер – это когда несколько выделенных серверов объединили, и разместили на них несколько сайтов. Это более усовершенствованный VPS вариант: аналогичный по цене, но более надежный. Именно этот вариант мне кажется самым оптимальным по соотношению цена/качество. Именно такой вариант я выбрал для размещения своего веб-сайта.
Выбрать поставщика услуг оказалось куда сложнее. В Интернете отзывам про поставщиков верить нельзя, они все друг другу противоречат и, скорее всего, большая часть из них являются купленными. Поэтому лучше исходить из поиска по необходимым параметрам.
В первую очередь – нужно определить географическое размещение предполагаемой аудитории сайта. Если сайт русскоязычный, то большая часть аудитории из стран СНГ. Поэтому, для лучшего доступа на сайт и более быстрой загрузки веб-страниц, сервер географически должен располагаться как можно ближе к посетителям сайта. Идеальный вариант – Москва. Но из-за идиотского законодательства и неадекватных действий карательного государственного органа в сфере сети (Роскомнадзор) я не стал размещать свой сайт в России, а в других странах СНГ ситуация может быть ненамного лучше. Поэтому оптимальное расположение сервера – это Европа.
Европейского поставщика услуг я определил банальным образом – посмотрел, где хостятся популярные IT ресурсы и из этих хостингов уже выбрал максимально абузоустойчивый т.е. тот, который не блокирует доступ к сайту по первой же жалобе.
Характеристики я выбирал не самые лучшие. Для моего сайта вполне достаточно двухядерного процессора с 4 Gb оперативки и с несколькими десятками гигабайт места на ssd диске. Такой характеристики хватит, чтобы сайт посещало несколько тысяч посетителей ежедневно. Трафик никогда не бывает безлимитным (даже если так написано в тарифном плане). Нужно всегда уточнять верхнюю границу лимита в безлимитных тарифах. В моем случае – это несколько десяток терабайт, что вполне себе достаточно.
Операционную систему я выбрал такую, чтобы к ней была самая большая справочная база, и чтобы она не сильно нагружала сервер. У Ubuntu самая лучшая и полная документация (что особенно важно для новичков). И почти вся эта документация (но не вся!) подходит и к Debian, который, в отличие от Ubuntu, не содержит в себе ничего лишнего. Debian сложнее в освоении, но если разобраться в нем, то можно выиграть в стабильности и производительности системы. Все остальные варианты на ядре Linux для более продвинутых пользователей. ОС на ядре Windows для простого сайта на WordPress вообще лучше не рассматривать: жрет много ресурсов и не безопасен (подавляющее большинство вирусов ориентированы на сервера с ОС Windows Server).
Начало работы на сервере
Cloud-сервер замечателен тем, что на нем уже имеется установленная ОС (если же ее нет, то у Debian имеется подробная инструкция по установке дистрибутива (13)). Когда я запустил сервер, то у меня появилась новая вкладка с черным экраном, некоторым текстом и мигающим курсором. Это консоль.
При первом запуске система просит ввести логин и пароль. Мне его выслали по электронной почте. И если при вводе логина появляются символы, которые печатаются на клавиатуре, то при вводе пароля никаких символов на экране нет. В этом есть своя задумка, но меня она по началу сбила с толку.
Второе, что меня сбило с толку – это символы, которые у меня вводились. Когда я кликал на своей клавиатуре клавишу Y, в консоле у меня появлялся символ Z. И наоборот. Это же касалось и других символов. Оказалось, что на моем сервере по умолчанию стоит немецкая раскладка. Пришлось искать картинку этой раскладки и через нее производить ввод. Позже я как-то поменял раскладку на американскую, но, во-первых, после перезапуска сервера она у меня возвращалась обратно на немецкую, а во-вторых, при длительном использовании американской раскладки некоторые символы у меня переставали печататься. Поэтому в дальнейшем я продолжал использовать немецкую раскладку.
Третье, что меня сбило с толку – это отсутствие графического интерфейса. Но эта проблема легко решилась путем пропатчивания KDE под FreeBSD Debian. KDE – это, проще говоря, рабочий стол. Существует еще несколько вариантов рабочих столов для Linux, но я поставил KDE потому что тот же Gnome у меня не заработал :-/ а KDE вот заработал… а другие я и не пытался устанавливать. ¯\_(ツ)_/¯
Установка программ (правильнее – пакетов) производится из хранилища программ (правильнее – репозитория). Нужно периодически его обновлять командой:
sudo apt update
А уже после устанавливать пакеты. Например, чтобы установить KDE нужно ввести:
sudo apt-get install kde-standard
и ждать, пока все скачается и установится. Результаты установки (удача/неудача) обычно пишутся в последних строках консоли. На это следует обращать внимание. И еще, в начале установки нужно давать разрешение на установку путем ввода Y (Yes).
Если все прошло удачно, то командой:
startx
можно запустить графическую среду и работать в ней.
Настройка веб-сервера
Теперь самое сложное во всей веб-разработке – это полностью настроить веб-сервер, чтобы он мог открывать доступ к сайту через Интернет. Настройка производится в три этапа: установка нужных пакетов из репозитория; настройка пакетов путем редактирования файлов с параметрами; запуск пакетов. Самый простой способ «поднять сервак» это установить стандартный набор LAMP (Linux-Apache-MySQL-PHP), следуя этой инструкции (14). А можно самому сделать свою сборку, просто вручную установив нужные элементы и настроив их. Сложность возникает лишь между выбором этих элементов.
Первая часть – это выбор веб-сервера. В мире достаточно популярны только два сервера: apache и nginx. В Интернете много мнений на счет них. Изучив их, я сделал для себя простой вывод: apache – всеобъемлющий, а nginx – быстрый; но иногда лучше использовать связку apache + nginx. Я не стал заморачиваться с этими вопросами и выбрал apache.
Вторая часть – это выбор движка базы данных. По умолчанию используется MySQL , но есть альтернативы. Одна из таких альтернатив – MariaDB. В 2008 году главный разработчик MySQL уволился и основал свою компанию, которая стала разрабатывать альтернативу MySQL. И это альтернатива стала лучше, что доказывается использованием этого движка корпорациями Google и Facebook.
Третья часть – это выбор скриптового языка. Вордпресс использует php и от этого никуда не деться. Альтернатив тут нет.
Четвертая часть – это выбор приложения для администратирования баз данных. Самый популярный вариант – phpMyAdmin, но есть альтернативы. Тут уж кому что нравится.
При сборке своего сервера нужно отталкиваться от необходимых требований. Я хочу свой сайтик на WordPress, поэтому перед сборкой я внимательно изучаю актуальные системные требования этой CMS:
- PHP 7.3 или новее
- MySQL 5.6 или новее ИЛИ MariaDB 10.0 или новее
- Nginx или Apache с модулем mod_rewrite
- HTTPS
Ставить какой-нибудь PHP 4 в связке с древней MySQL не очень правильно. В лучшем случае, такая система будет нестабильной, в худшем, вообще ничего работать не будет.
В тех же самых системных требованиях разработчики просят включить модуль mod_rewrite. После установки Apache это делается одной строчкой в консоли:
a2enmod rewrite
Такие вещи появляются по мере необходимости и приходится их гуглить. И тут стоит упомянуть один очень важный момент – гуглить лучше сразу несколько вариантов, стараясь подробно разобрать каждый. Потому что в русскоязычном сегменте (в англоязычном не встречал) некоторые пользователи дают откровенно вредные советы, которые если не убьют сервак, то хорошо его подпортят.
Собранный по дефолту сервер можно дополнить еще некоторыми элементами. Один из таких – FTP–сервер, который позволяет быстро загружать файлы с компьютера на сервер, либо быстро их скачивать с сервера на компьютер. В качестве FTP–сервера лучше всего использовать vsftpd, который является самым защищенным FTP–сервером на сегодняшний день. Альтернативы лучше использовать в случае, если по каким-то причинам vsftpd отказался работать.
После установки всех необходимых элементов можно перейти к самой настройке сервера. Нужно найти размещение пакетов в файловой системе, в этих пакетах найти текстовые файлы и изучить их. Если в текстовом файле написана какая-то непонятная фигня, то лучше такой текстовый файл закрыть и забыть о нем. Если же в текстовом файле дан закомментированный текст с обращением к пользователю, то значит этот тот самый файл, который нужно редактировать. Настройка осуществляется простым методом – читать закомментированный текст и делать все так, как там написано. Ничего сложного, если знать английский. 🙂
Если все установлено правильно, то перейдя по адресу айпи сервера можно увидеть сообщение Апаче о том, что установка произведена успешно. А перейдя по адресу того же phpMyAdmin (который устанавливается при настройке) увидеть форму логин/пароль для входа в приложение. Если что-то не работает, то лучше это удалить и заново установить и настроить.
Доменное имя
Использовать айпи сервера для перехода по ссылкам сайта – не разумно. Поэтому стоит обзавестись доменным именем. На reg.ru домен в зоне .ru на сегодняшний день можно купить за 200 рублей/месяц, а в зоне .info за 99 рублей/месяц (15), но я бы не советовал этого делать из-за рисков потерять домен по правовому беспределу со стороны государства, конкурентов или даже самого поставщика услуг. Лучше поискать более верное решение среди зарубежных регистраторов доменных имен. Я выбрал регистратора, чьими услугами пользуется один известный сайт. Как думаете, смогли бы они удержать свой домен, зарегистрировав его у российского регистратора? 🙂
Ничего не регистрировать в России – главное правило айти-бизнеса. Даже всеми любимый Яндекс зарегистрирован в Нидерландах. А все те крупные айти компании, что были зарегистрированы в России, уже давно принадлежат российским олигархам. Павел Дуров подтвердит, ахах.
После покупки доменного имени появится возможность управлять им посредством управления ресурсными записями DNS:
- Запись А (адрес) – самая важна запись, которая связывает доменное имя с айпи сервера. С таких записей можно создавать поддоменные имена. По дефолту там стоит только одна запись, которую надо перевести на айпи сервера. Если айпи сервера является что-то типа 55.55.23.43, а доменное имя site.com, то запись надо оформить так: Имя (site.com), TTL (3600), IPv4 Адрес (55.55.23.43). А чтобы создать поддоменное имя, нужно добавить запись: Имя (poddomen.site.com), TTL (3600), IPv4 Адрес (55.55.23.43) и т.д. TTL (time to live) – это время жизни пакета, я по умолчанию задал это значение 3600.
- Запись CNAME (каноническое имя) – запись переадресаций с одного домена на другой. Если задать: псевдоним (www.site.com), каноническое имя (site.com), то, теоретически, пользователь при вводе www.site.com должен попадать на site.com. Я таким способом переадресации не пользуюсь.
- Запись MX (почтовый шлюз) – запись для работы почты. По умолчанию должна быть настроена самим регистратором доменного имени. У меня она настроена, но я ею не пользуюсь.
- Запись NS (название сервера) – это запись, которая осуществляет доступ в Интернет. Должна быть настроена по умолчанию. Я эту запись со временем изменил, но об этом чуть позже.
- Запись SOA (начальная авторитетная запись) – настроечная запись домена. Задается по умолчанию регистратором и в дальнейшем не меняется.
- Запись TXT – обычная текстовая запись. Может использоваться для подтверждения правом владения доменным именем.
За все время пользования доменом я настраивал только A запись (обязательная для настройки), а позже и NS запись (для более продвинутой настройки сайта). Если обновить записи, то они сразу не примутся. Должно пройти где-то 24 часа, и после этого доменное имя станет доступно для использования.
Этим шагом завершается базовая настройка сайта. Самое сложное позади)
Установка WordPress
Теперь необходимо получить возможность скачивать/загружать файлы на сервер/с сервера. Если FTP на сервере настроен, то достаточно просто на персональный компьютер установить FTP клиент и через него подключиться к серверу. В качестве FTP клиента я предпочитаю использовать FileZilla. Подключение через него я осуществляю в окне Site Manager по пути File -> Site Manager. В этом окне я кликаю на кнопку New Site и в правой части окна ввожу протокол подключения (FTP), хост (айпишник сервера), шифрование (тут уж как вы настроили). Кликаю Connect и получаю в правом части программы доступ к серверным папкам. Лучше сразу перейти к папке WWW и работать с нею.
В папке WWW есть папки с сайтами, и в каждой из этих папок имеется публичная папка public_html. В ней располагается видимая часть сайта. C нее же и следует начать работу с сайтом.
Установка WordPress – это, наверное, самый простой шаг. Подробная инструкция по установке представлена здесь. Достаточно перейти на официальный сайт wordpress, скачать оттуда архив с системой (16), разархивировать, и с помощью FTP-клиента загрузить в public_html содержимое папки wordpress. После выполнения загрузки, при переходе на главную страницу сайта должно появится окно с началом установки WordPress. Главная сложность тут – это работа с базами данных. Тут придется воспользоваться некогда установленной phpMyAdmin, которая располагается по адресу site.com/phpmyadmin (очень рекомендую сменить стандартный путь доступа на нестандартный в настройках пакета и создать аутентификацию для входа). Теперь нужно произвести вход, создать базу данных, создать пользователя, а потом все эти данные (имя БД/логин/пароль) ввести в окне установки WordPress. Все тонкости работы с PhpMyAdmin расписаны в дополнительной статье. (17)
Все остальные пункты довольно простые. Могу лишь добавить, что имя пользователя админки лучше делать нестандартным, а пароль делать наиболее сложным. Этот поможет исключить взлом админки сайта брутфорс-ботами.
Есть еще старый вариант установки WordPress. Там нужно залезть в папку WordPress и найти файл wp-config-sample.php переименовав его в wp-config.php , а в нем самом найти следующую часть кода:
// ** MySQL settings ** // define('DB_NAME', 'putyourdbnamehere'); // Имя базы данных define('DB_USER', 'usernamehere'); // Имя пользователя MySQL define('DB_PASSWORD', 'yourpasswordhere'); // ...и пароль define('DB_HOST', 'localhost'); // 99% что вам не следует вносить изменения в данную строчку кода define('DB_CHARSET', 'utf8'); define('DB_COLLATE', '');
И заменить putyourdbnamehere на имя своей базы данных; usernamehere на имя пользователя базы данных и т.д. Все изменения нужно производить с сохранением кавычек!
Вся остальная установка аналогичная. После установки нужно не забыть удалить файл install.php в папке WordPress/wp-admin.
После успешной установки WordPress на главной странице появится стандартизированный сайт, а по пути site.com/wp-admin можно будет получить доступ к админке. Интерфейс админки интуитивно понятный и доступный. Внешний вид сайта можно поменять путем загрузки папки с шаблоном в папку wordpress/wp-content/themes и установки темы в меню "Внешний вид" -> "Темы админ-панели".
Можно много-много текста написать про админ-панель WordPress, но я не вижу в этом смысла. Каждый человек способен самостоятельно изучить каждый раздел меню. Остановлюсь только на меню Плагины. Вот это та самая вещь, за которую WordPress как любят, так и ненавидят. С одной стороны, плагины позволяют устанавливать на сайт дополнительный функционал (формы регистрации, комментарии, анти-спам, форум, социалочки, гугл капчи, мобильные темы и т.д.) путем трех-четырех кликов. Не надо самому что-то писать и разрабатывать, ведь можно все скачать, установить и использовать. Здорово! Но с другой стороны, любой плагин производит дополнительную нагрузку на сайт. Если бездумно все устанавливать и включать, то через сотни/тысячи плагинов сайт рухнет. Придется вручную сносить лишние плагины (их путь установки wordpress/wp-content/plugins). Кроме того, нужно быть внимательным в плане безопасности, любой плагин может стать потенциальной дырой безопасности на сайте. Многие автоботы бегают по сайтам и ищут уязвимости именно в плагинах, чтобы через них нанести вред сайту. Поэтому нужно смотреть дату последнего обновления плагина и комментарии к ним.
WordPress – это самая популярная платформа для сайта… в т.ч. и у взломщиков) Поэтому необходимо обеспечить безопасность сайту. Есть множество статей с полезными советами. (18) . Но лучше всего самому внимательно изучить всю эту тему в т.ч. и на самостоятельный поиск уязвимостей. Нужно представить себя не админом, который хочет защитить свой сайтик, а хакером, который хочет взломать сайт. И шерстить-шерстить-шерстить эту тему по профильным ресурсам. Чем больше возможностей взлома пропадет, тем более защищенным будет сайт.
Настройка HTTPS и SSL
Важным пунктом нужно упомянуть про защищенный протокол HTTPS и SSL сертификат (одно без другого не бывает). Это технологии, которые позволяют обеспечивать безопасную передачу данных между пользователем и сервером. Их отсутствие может привести к тому, что браузер пользователя будет ругаться на небезопасный сайт, а поисковики будут понижать позиции в поиске. Поэтому необходимо такую вещь получить.
SSL сертификат можно купить у reg.ru за пару тысяч рублей в год. (19) Или послать нафиг наших барыг и заключить сделку с CloudFlare, добавив свой сайт в глобальную CDN сеть. За это Cloudflare дает бесплатную защиту от DDOS атак, бесплатный SSL сертификат, бесплатный доступ к сайту по https с гибкой настройкой безопасности, и прочие ништяки. Но, в то же время, Роскомнадзор, блокируя один из сайтов в сети Cloudflare, может случайно заблокировать всю подсеть сайтов. От этого можно частично защититься покупкой платного аккаунта, но я думаю, оно того не стоит.
Для получения всех бесплатных плюшек нужно зарегистрироваться на сайте, следуя инструкциям. Самый важный момент – это изменение записей NS в настройках доменного имени. Cloudflare сам предложил вариант изменения одних NS записей на другие. Нужно было лишь воспользоваться этим и подождать 24 часа, когда изменения вступят в силу. После этого в настройках DNS (в аккаунте Cloudflare) нужно все свои поддоменные имена (+ серверный айпи) добавить в DNS записи. А потом все эти записи активировать путем нажатия на серое облачко (оно должно стать оранжевым). Если все сделано правильно, то промежуточный доступ к сайту будет осуществляться через сервера Cloudflare. Тогда можно переходить к настройкам.
Самый важный раздел настроек – это Crypto, который позволяет настроить доступ к сайту через HTTPS и получить SSL сертификат. Cloudflare предлагает четыре варианта сертификации:
- Flexible (гибкий) – это самый простой в плане настройки SSL сертификат. Он не выполняет полностью свой функционал, но позволяет имитировать работу HTTPS. Это такой вариант в стиле «уж лучше это, чем ничего» и используется, если по каким-то причинам настроить полноценный SSL сертификат не удается.
- Full – это полноценный SSL сертификат. Осуществляется безопасное HTTPS соединение между пользователем, сервером Cloudflare и сервером сайта. Но подлинность сервера с сайтом не проверяется.
- Full (strict) – это полноценный SSL сертификат, но с более строгой защитой. Сертификат проверяется центром сертификации, и любая ошибка приводит к разрыву соединений (в варианте Full некоторые ошибки могут игнорироваться).
- Strict (SSL-Only Origin Pull) – это полноценный SSL сертификат со строгой защитой. Соединение осуществляется только через HTTPS. На бесплатном тарифе такой вариант отсутствует.
Чем более строгая сертификация, тем лучше. Но если вариант с Full (strict) не работает, то лучше откатиться до варианта с Full. Если же вариант с Full не работает, то лучше откатиться до варианта Flexible. Но все же лучшим вариантом будет попытаться настроить так, чтобы работал самый строгий вариант сертификации.
Для Full сертификации необходимо будет сгенерировать оригинальный сертификат в пункте настроек «Origin Certificates”, выбрав вариант «Let Cloudflare generate a private key and a CSR», и выписав домены и все поддомены, путем ввода двух тегов «site.com» (для основного сайта) «*.site.com» (для всех поддоменов). Срок действия лучше брать максимальным – лет так на 15. После этого сертификат будет сгенерирован и можно будет получить его ключ, который начинается с -----BEGIN CERTIFICATE----- и заканчивается -----END CERTIFICATE-----. Это сертификат нужно будет установить на сервере и внедрить в Апаче. Официальная инструкция по установке сертификата на веб-сервер представлена здесь. (20) Если в качестве сервера используется Апаче, то можно сразу проследовать сюда. (21)
В целом, нужно создать два файла в формате .crt и .key; разместить их в определенной директории на сервере; найти конфигурационный файл Апаче; отредактировать его, добавив строки, которые ссылаются на файлы сертификата; перезапустить Апаче. После этого можно включать Full или Full (strict) и ждать пару часов, пока результаты вступят в силу. Если сайт получил зеленый значок в браузере и HTTPS канал, то значит все заработало. Можно теперь покрутить оставшиеся настройки (всегда ли использовать HTTPS?, гнать ли Tor пользователей с сайта? и т.д.) в том же разделе Crypto и переходить к следующим:
- Firewall – это тот самый раздел ddos защиты. Можно покрутить уровень защиты, записать файрволовские правила, включить режим «Я под атакой!» и т.д.
- Access – это раздел, в котором за денежку предлагают включить доступ к сайту только определенной группе лиц.
- Speed – здесь предлагают оптимизировать загрузку сайта за счет сжатия Brotli, оптимизации Javascript и уменьшения размера страниц сайта. Я включил этот вариант, но изменения во времени загрузке буквально на пару миллисекунд.
- Caching – включение кэширования сайта. Когда пользователь загрузит полностью определенную страницу сайта, то при повторном обращении к этой странице загрузка будет частичная т.к. в браузере будет хранится готовый вариант уже ранее загруженной страницы. Это позволяет оптимизировать повторную загрузку страниц и сократить нагрузку на сервер. Минус такого варианта, что некоторые косметические изменения на веб-странице пользователям будут доступны не сразу, а через то время, которое будет задано в пункте Browser Cache Expiration. Во время разработки кэширование мешает посмотреть вносимые в сайт или в шаблон сайта изменения, поэтому доступно временное отключение кэширования в пункте Development Mode. Через 3 часа кэширование автоматически включается.
Также здесь, в пункте «Always Online», доступна возможность загружать пользователям архивную версию сайта, если сам сайт в данный момент недоступен. - Analytics – пункт веб-аналитики. Очень странный пункт. Согласно ему, мой сайт за сутки посетило 304 уникальных посетителей, что не может быть правдой.
Все остальные пункты меню обошли моего внимания т.к. в них предлагают ненужные мне вещи, либо (в большинстве случае) доступны только за деньги.
Cloudflare – это отличный сервис, который снимает кучу головной боли с веб-разработчика. Но бесплатного ничего не бывает. Понимаете, чем больше сайтов подключены к этой сети, тем сильнее у этой сети ddos защита. А серьезной ddos защитой пользуются серьезные люди, которые готовы отдавать этой организации серьезные деньги. А мы, создатели мелких сайтов, выступаем в качестве хомячков поддержания стабильности серьезных сайтов за бесплатные плюшки. Такие дела. ._.
Поисковая оптимизация (SEO)
Я уверен, что многие пользователи открывают для себя новые сайты через Гугл и Яндекс. Мой сайт с самого начала индексировался этими поисковиками, но индексировался криво и выдавал ссылки на служебные страницы сайта, которые должны быть скрыты от посторонних людей. Чтобы избежать таких недоразумений нужно зарегистрироваться правообладателем сайта в системе Google Search Console и Яндекс.Вебмастер. Подтверждение правообладанием сайта происходит через вставку уникального кода в часть <head> шаблона сайта. После этого будет доступна статистика индексации сайта.
Суть поисковой индексации состоит в том, что по сайту периодически бегают поисковые боты, которые индексируют сайт на встречающиеся слова, а потом всю индексируемую информацию фильтруют через неизвестные алгоритмы и выводят в поисковик на определенные поисковые запросы. Чтобы облегчить индексацию сайта и сделать ее более продуктивной, вебмастера загружают карту сайта (Sitemap), а потом, в панели управления поисковой индексации, задают путь к ней.
Чтобы задать правила для поискового бота (что вот эти страницы индексировать можно, а вот эти нельзя) используют текстовый файл robots.txt. Нужно обратить внимание на букву s в конце названия. Я создал файл robot.txt и долгое время недоумевал, когда поисковые боты игнорировали мои правила.
В целом, попадание в топ поисковиков (первые три ссылки, которые выдаются на определенный поисковый запрос) или удержание сайта на первой странице – это главная цель любого вебмастера. Ведь основная посещаемость определяется именно поисковиками. И от посещаемости зависит то, сколько денег получит вебмастер от размещенной на своем сайте рекламы. Поэтому вопросы поисковой оптимизации выделили в отдельную науку и назвали SEO (Search Engine Optimization).
SEOшники – это такие эффективные маркетологи в Веб-сфере. Их задача – продвигать сайты, чтобы с них можно было заработать кучу денег. Благодаря им в свое время упало качество Интернет-контента. И благодаря же им появилась профессия копирайтера – наборщика длинных и малоинформативных текстов для сайта. Ведь зачем писать кратко и по делу, когда выгоднее писать длинные простыни с бесполезным введением, очевидными советами и прочей ерундой? А самое главное, такими текстами можно охватить любую сферу. Так что не надо удивляться, что врачи плюются на медицинские публикации, а физики на научные. Ведь все эти статьи пишут копирайтеры – люди, которые не являются специалистами в той сфере, в которой набирают текст. Их главная цель – это не дать людям полезные советы, а заработать деньги. И именно по этим причинам SEO стало чуть ли не ругательным словом, которому посвятили даже целую статью на Лурке. (22)
Поисковикам выгодно повышать качество своих поисковых запросов, поэтому они постоянно меняют алгоритмы поисковой индексации и принимают санкции к сайтам недобросовестных СЕОшников. Яндекс даже выпустил целую методичку по этой теме.
Я не ставил перед собой задачу зарабатывать миллионы с помощью сайта, поэтому в SEO особо не углублялся. Для меня важно, чтобы поисковые боты не лезли по неправильным ссылкам, и чтобы мои публикации более-менее нормально индексировались. Я немного ленивый, поэтому предоставил все эти важные задачи решать автоматике – плагину All in One SEO. Его нужно только правильно настроить, а все остальное он уже сделает сам. Большой плюс, что он позволяет вручную настраивать некоторые тонкие моменты. Если файл robots.txt позволяет задавать широкие правила индексации (для разделов), то этот плагин позволяет задавать правила каждой конкретной странице, конкретному посту. Я могу задать поисковый заголовок, описание, ключевые слова к посту, или же отключить пост от поисковой индексации. Очень удобно!
Капча
Помимо поисковых ботов по сайту бегают спам-боты. Единственная эффективная защита от них – это ReCaptcha. Я понимаю, что капча – это отвратительно и плохо, но для вебмастера это единственная возможность спастись от потока спама в комментариях, в регистрациях и даже в форме обратной связи. Без капчи мне пришло 15 рекламных сообщений, которые умелые боты умудрялись отправлять через форму обратной связи. Поэтому капча – это необходимость.
Аналитика
Статистику с сайта можно собирать с помощью Яндекс.Метрика или Google Analytics. К сожалению, некоторые блокировщики рекламы (например, UBlock) делают такие инструменты бесполезными. Они считают такие вещи – слежкой за пользователем, и этим самым они нещадно блокируют аналитические скрипты. Яндекс частично решил такую проблему костылем, который показывает % пользователей с блокировщиком от общего числа пользователей. (23) Гугл же, наоборот, предлагает пользователям расширение, которое полностью сделает их невидимыми от своей же аналитики. (24)
Я раздумываю над тем, чтобы поставить Яндекс.Метрику. С одной стороны, я люблю статистику. 🙂 А с другой, у пользователей будет причина обвинить меня в слежке за ними. Тем более, когда есть вероятность, что всю информацию Яндекс однажды возьмет и сольет в какое-нибудь ФСБ.
Оптимизация сайта
Еще один важный момент – это оптимизация загрузки сайта. Дать оценку быстродействия сайта может PageSpeed Insights. Этот сервис всегда дает разные оценки с погрешностью +-10 баллов, но среднее высчитать вполне возможно. Оптимизацию можно провести за счет сокращения лишнего кода в шаблоне сайта, сжатия картинок и за счет сторонних средств.
Сокращение лишнего кода не изменило оценку загрузки сайта. Возможно, мне не хватает опыта кодовой оптимизации. А вот сжатие картинок серьезно изменило загрузку страниц сайта.
В первое время я не уделял внимания размерам страниц. Однажды я загрузил 9 мегабайтную картинку в качестве фона на главную и радовался жизни. Когда я попытался открыть свой сайт с мобильного Интернета, я осознал, какую глупость совершил. Пересохранение 9 мегабайтной Png картинки в сжатый jpeg формат дало на выходе 383 кб картинку, которая по качеству ничем не отличалась от первоначальной. Таким образом я открыл для себя магию jpeg! Вот только в некоторых местах сохранение в jpeg формате приводило к проблемам, и мне приходилось картинку оставлять в png формате. Это заметно на подсайте channel. Там используется достаточно тяжелый фон в 600 кб, потому что сохранение его в сжатый формат приводило к появлению артефактов. Это из-за особенностей эффектов, которые я применил к фотографии. Я от них отказываться не хотел, поэтому искусственным образом сократил размер картинки за счет более длинных боковых градиентов, меньшей длины изображения и заливкой одноцветного фона через стандартный css код. Таким образом, я поднял оценку оптимизации сайта с 30 пунктов до 70.
В качестве сторонней оптимизации я выбрал плагин – Autoptimize. Он оптимизирует HTML, JavaScript и CSS. К сожалению, от такой оптимизации у меня на подсайтах поехала разметка, поэтому от некоторых пунктов пришлось отказаться. Также этот плагин отключает богомерзкий эмоджи (свистоперделка от WordPress, которая оказывает сильную нагрузку на сайт и сервер, а в ответ предлагает новые «прикольные» смайлики). Оптимизация кода не сильно повлияло на оптимизацию сайта, а вот отключение эмоджи подняло оценку загрузки сайта до 100 пунктов. (25) (26) Это успех!
Ради интереса я решил проверить оптимизацию других сайтов. Пикабу выдал 9 и 33 (27) (28), Эльдорадо выдал 2 и 12 (29)(30), Майл выдал 67 и 94 (31) (32).
В целом, наши отечественные веб-программисты не особо парятся над оптимизацией своих сайтов. Особенно этим отличаются сайты торгашей, которые вешают у себя кучу тяжелых цветных баннеров, отправляющие древние компы в вечный ребут.
Особенность современной веб-верстки
Я решил не ограничиваться обычной версткой и главную страницу разметил с помощью Grid верстки. (33) Я это сделал, и тут же получил головную боль в виде отсутствия поддержки современных технологий в старых версиях браузеров. Оказывается, с новыми технологиями нужно быть достаточно осторожным и каждую проверять на совместимость. Это делается с помощью сайта caniuse.com. Вот, например, проверка наличия технологической совместимости Grid с разными браузерами. (34) Видно, что пользователи Opera Mini, Baidu Browser, QQ Browser, Internet Explorer не смогут открыть главную страницу моего сайта. У Firefox поддержка Grid появляется с версии 54 (в версиях 52-53 могут появляться баги), у Chrome с версии 58. Т.е. еще и пользователи XP и Vista не смогут зайти на мой сайт, потому что поддержка, например, того же Chrome заканчивается версией 49. Вроде бы мелочь, но эта мелочь может сократить трафик.
Вывод
На освоение полного цикла разработки веб-сайта у меня ушло 2-3 месяца. Я сэкономил кучу денег (на рынке фриланса полная разработка веб-сайта оценивается от 10к до 50к рублей) и получил именно тот сайт, который хотел. Возможно, он выглядит не очень современно, но зато он достаточно уникальный и запоминающийся.
Технарь?
глаза режет
1
I like it topic