Отлить в бетоне!

Недав­но у нас вышел подроб­ный мате­ри­ал о том, что такое ста­ти­че­ские сай­ты. Вот корот­кая версия:

  • На ста­ти­че­ских сай­тах вся инфор­ма­ция пред­став­ле­на в виде уже гото­вых доку­мен­тов, слов­но отли­тых в бетоне.
  • По запро­су сер­вер момен­таль­но отда­ёт уже гото­вую стра­ни­цу, поэто­му такие сай­ты рабо­та­ют очень быстро.
  • По сути, такой сайт — это про­сто набор HTML-файлов, каж­дый из кото­рых отве­ча­ет за отдель­ную страницу.
  • Такие сай­ты про­сто хостить и пере­но­сить на дру­гой сер­вер и слож­но взло­мать, пото­му что там нече­го осо­бо взламывать.

Есть три спо­со­ба сде­лать такой сайт:

  1. Вруч­ную свер­стать в HTML каж­дую страницу. 
  2. Исполь­зо­вать гене­ра­тор ста­ти­че­ских сайтов.
  3. Сна­ча­ла сде­лать дина­ми­че­ский сайт, а потом «сгра­бить» его спе­ци­аль­ным приложением.

Про­па­ган­да дей­ствий, опи­сан­ных в п. 3, запре­ще­на на тер­ри­то­рии РФ ста­тьёй 6.21 КоАП, а вот п. 2 очень даже инно­ва­ци­он­ный, нано­тех­но­ло­гич­ный, и про­грам­ми­сты вас за него не пору­га­ют. Поэто­му сего­дня речь о гене­ра­то­рах ста­ти­че­ских сайтов. 

Принцип работы

Чаще все­го в основ­ном гене­ра­то­ры сай­тов рабо­та­ют по тако­му принципу: 

  1. С одной сто­ро­ны лежит кон­тент. Это могут быть десят­ки и сот­ни тек­сто­вых доку­мен­тов, раз­ме­чен­ных каким-то образом. 
  2. С дру­гой сто­ро­ны лежат шаб­ло­ны — это пра­ви­ла, по кото­рым оформ­ля­ют­ся стра­ни­цы. Напри­мер, может быть шаб­лон для глав­ной стра­ни­цы, шаб­лон для ста­тьи, общий шаб­лон для шап­ки сай­та и подвала.
  3. Соб­ствен­но, гене­ра­тор берёт кон­тент, пре­об­ра­зо­вы­ва­ет его в HTML, вкле­и­ва­ет в нуж­ный шаб­лон, сохра­ня­ет как HTML-файл, обвя­зы­ва­ет всё нави­га­ци­ей и акку­рат­но укла­ды­ва­ет полу­чив­шу­ю­ся мас­су HTML-файлов в папочку. 
  4. Всё это до ужа­са быстро.

Что такое статические сайты

Это маркдаун (скорее всего)

Боль­шая часть гене­ра­то­ров ста­ти­ки про­сят, что­бы кон­тент им дава­ли в раз­мет­ке Markdown. Это такая тех­но­ло­гия рабо­ты с тек­стом, когда для обо­зна­че­ния раз­ных частей тек­ста исполь­зу­ют­ся не HTML-теги, а про­стые символы:

  • для оформ­ле­ния заго­лов­ков исполь­зу­ют решёт­ку в нача­ле стро­ки. Один сим­вол # озна­ча­ет заго­ло­вок пер­во­го уров­ня, ## — вто­ро­го уров­ня и так далее
  • кур­сив обо­зна­ча­ют *одной* звёз­доч­кой с каж­дой сто­ро­ны, а жир­ный — **дву­мя**.
  • спис­ки про­сто оформ­ля­ют­ся мину­са­ми, плю­са­ми или любы­ми цифрами.

Ещё Markdown уме­ет так же понят­но встав­лять ссыл­ки, кар­тин­ки, добав­лять при­ме­ры кода и оформ­лять таб­ли­цы. Полу­ча­ет­ся, что таким обра­зом мы можем быст­ро раз­ме­тить наш доку­мент так, что­бы он остал­ся чита­е­мым для чело­ве­ка и был поня­тен любо­му Markdown-редактору.

На примере

Допу­стим, у нас есть такой доку­мент с разметкой:

Это простенький Markdown: заголовок выделен решёткой, ссылка — скобками Это про­стень­кий Markdown: заго­ло­вок выде­лен решёт­кой, ссыл­ка — скобками 

Когда мы отда­дим этот файл гене­ра­то­ру ста­ти­че­ских сай­тов, вот что он сделает:

  1. Создаст HTML-файл на осно­ве шаблона.
  2. Уви­дит одну решёт­ку — это зна­чит, что перед нами заго­ло­вок пер­во­го уров­ня. Гене­ра­тор убе­рёт её и обер­нёт текст на этой стро­ке в тег <h1>.. </h1>.
  3. На сле­ду­ю­щей стро­ке нет решёт­ки и дру­гой спе­ци­аль­ной раз­мет­ки, поэто­му гене­ра­тор сде­ла­ет из неё про­стой абзац тегом <p>..</p>. Все осталь­ные стро­ки гене­ра­тор обра­бо­та­ет по тому же алгоритму.
  4. Текст в квад­рат­ных скоб­ках пре­вра­ща­ет­ся в ссыл­ку с помо­щью тега <a>, а адрес ссыл­ки берёт­ся из круг­лых скобок.
  5. Сло­ва, вокруг кото­рых сто­ит одна звёз­доч­ка, обо­ра­чи­ва­ют­ся тегом <i>..</i>, а сло­ва с дву­мя звёз­доч­ка­ми — тегом <b>..</b>.
  6. После это­го гене­ра­тор доба­вит CSS-стили и сохра­нит гото­вый файл.

В резуль­та­те рабо­ты гене­ра­то­ра у нас полу­чит­ся такой код:

<!DOCTYPE html>
<html> 
<head> 
	<title>Привет, это журнал «Код»</title> 
	<meta charset="utf-8">
	<style type="text/css"> 
		body {
			background: #ddd; 
		}
		p{
			text-align: left; 
			margin: 10; 
			font-family: Verdana, Arial, sans-serif; 
			font-size: 16px;
		}
		a{
			color: red;
		}
	</style> 
</head> 
<body>

	<h1>Привет, это журнал «Код»</h1>

	<p>В вебе есть стандартный язык разметки — HTML. Его понимают браузеры, но человеку читать чистый HTML-код тяжело — мешают теги и обилие служебной информации.<p>

	<p>Ещё есть <a href="(https://thecode.media/markdown/">Markdown</a> — язык простой текстовой разметки документов, понятный человеку.</p>

	<p>У него <i>простой</i> синтаксис и такой текст <b>легко прочитать</b> даже с разметкой.</p>

</body>
</html>

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

Что такое статические сайты
Что такое статические сайты

Если нам пона­до­бит­ся что-то попра­вить на этой стра­ни­це, то мы можем открыть исход­ный текст в марк­дауне и вне­сти нуж­ные изме­не­ния. Гене­ра­тор сам заме­тит, что файл обно­вил­ся, и заме­нит ста­рую вер­сию HTML-файла новой.

Плагины

Что­бы рас­ши­рить воз­мож­но­сти сай­та, к гене­ра­то­рам добав­ля­ют пла­ги­ны — спе­ци­аль­ные мини-программы, кото­рые поз­во­ля­ют пре­вра­тить ста­ти­че­ский сайт в пол­но­цен­ный блог или новост­ной сайт. 

Напри­мер, пла­ги­ны могут добавить:

  • под­держ­ку тегов и клю­че­вых слов для страниц,
  • гале­рею для картинок,
  • кноп­ки соц­се­тей и так далее.

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

Зачем это нужно

Иде­аль­ное при­ме­не­ние гене­ра­то­ров ста­ти­ки — для сай­тов, где долж­но быть мно­го кон­тен­та, кото­рый ред­ко меня­ет­ся и кото­рый пишут отдель­ные люди. Напри­мер, для сай­тов служ­бы под­держ­ки, спра­воч­ни­ков, энцик­ло­пе­дий, элек­трон­ных книг. Как тогда будет устро­ен процесс: 

  1. Авто­ры пишут свои тек­сто­вые фай­ли­ки в Markdown и ни о чём не думают.
  2. Дизай­не­ры и про­грам­ми­сты дела­ют шаб­лон­чи­ки и логику.
  3. В нуж­ный момент кто-то нажи­ма­ет на кноп­ку, и гене­ра­тор соби­ра­ет гото­вый сайт.
  4. Через Git гото­вый сайт заки­ды­ва­ет­ся на бое­вой сервер.
  5. Игра­ет тор­же­ствен­ная музыка.

Текст:

Миха­ил Полянин

Редак­ту­ра:

Мак­сим Ильяхов

Худож­ник:

Даня Бер­ков­ский

Кор­рек­тор:

Ири­на Михеева

Вёрст­ка:

Мария Дро­но­ва

Соц­се­ти:

Олег Веш­кур­цев