Створення веб-сайту за допомогою Jigsaw

Як розробники, шанси мати особистий веб-сайт є досить високими. Зрештою, це те, що ми робимо - і, швидше за все, ви перебудовували це незліченну кількість разів. Тому що ми всі знаємо, що нам потрібно перебудувати наш веб-сайт, перш ніж закінчити той допис у блозі, який ми збиралися написати...

Я винен як наступний розробник це; чесно кажучи, в цьому не соромно.Ми використовуємо перебудову нашого веб-сайту як навчальний досвід і як час для експериментування з новими ідеями чи дизайном. Але якщо ви коли-небудь дійдете до моменту, коли подумаєте: «Мені просто потрібен простий веб-сайт, щоб я міг писати», відповідь є. Jigsaw – це генератор статичних сайтів, створений партнерами Laravel Tighten, і це те, що я використовував останній рік або близько того для свого особистого веб-сайту.

Принадність цього полягає в тому, що він дозволяє мені писати дописи в блозі у розмітці, має простий блейд-перегляд для візуалізації сторінок і дописів - і може бути створений для розгортання в будь-якій кількості служб від сторінок GitHub до Netlify і інших.

Почати роботу з Jigsaw набагато простіше, ніж ви можете собі уявити, тому давайте разом пройдемося по налаштуванню. Наш перший крок — створити каталог для вашого проекту. Я використовую ~/code/github/JustSteveKing для більшості своїх проектів, для яких я не хочу використовувати Laravel Valet. Це дозволяє мені легко організовувати проекти за допомогою репо GitHub.Отже, виконайте таку команду, щоб створити каталог:

mkdir jigsaw-website

Нашим наступним кроком є ​​введення каталогу:

cd $_
 
// or
 
cd jigsaw-website

Тепер ми увійшли до каталогу. Нам потрібно повідомити Composer, що ми хочемо використовувати Jigsaw, тому виконайте таку команду composer:

composer require tightenco/jigsaw

Після запуску цього процесу у нас є кілька варіантів. Доступно багато шаблонів, а не лише ті, що перелічені в документації проекту.Пошук у Google допоможе вам знайти багато з них. Ми можемо почати з нуля або використати один із доступних шаблонів.

Ми використаємо один із шаблонів, створених самими Tighten під назвою блог. Щоб установити це, запустіть таку команду Jigsaw:

./vendor/bin/jigsaw init blog

Це швидко запустить весь блог, налаштувавши все, тож все, що вам потрібно зробити, це зосередитися на написанні, але у вас також є можливість почати створювати та змінювати шаблони. Давайте поглянемо на веб-сайт і побачимо, з чим ми маємо справу:

./vendor/bin/jigsaw serve

Це має запустити PHP-сервер для вас на http://localhost:8000 , тому відвідайте його та ознайомтеся зі своїм новим блогом!

Тепер ми можемо почати думати про те, як ми могли б написати наш вміст. Відкрийте проект у обраному редакторі коду, і ми зможемо дослідити, що там є.

Ви можете змінити конфігурацію свого веб-сайту в config.php , тож якщо ви відкриєте його та зміните такі значення, як siteName і siteDescriptionякщо ви перезапустите сайт, ваші зміни мають відобразитися.

Ви також помітите опцію конфігурації під назвою collections. Це колекції вмісту, і ви можете мати скільки завгодно. Ви навіть можете використовувати віддалені колекції, де ви можете отримувати дані з API та створювати записи на своєму створеному сайті, щоб переглядати їх – круто, правда?

Ми не будемо надто зосереджуватися на цьому.Натомість почнемо писати дописи в блогах. Спершу ми хочемо видалити всі фіктивні дані, створені за допомогою цього шаблону – зрештою, це не те, що ми хотіли б мати у своєму блозі. Видаліть усі файли в таких каталогах:

• source/_categories
• source/_posts_

Тепер ми можемо переглянути створення нової публікації для нашого веб-сайту. Далі створіть новий файл за допомогою командного рядка:

touch source/_posts/my-first-blog-post.md

Потім відкрийте його у своєму редакторі, і це буде ваша перша публікація в блозі. Файли розмітки складаються з двох частин. У вас є так званий передній матеріал, синтаксис YAML для надання інформації про сам файл Markdown. Тут ми додамо назву, автора, категорії та дату створення. Це має виглядати так:

---
extends: _layouts.post
section: content
title: My First Blog Post
date: 2022-06-21
description: This will be your meta description, make sure it isn't too long
categories: [writting]
---

Отже, у нас є заголовок Моя перша публікація в блозі, дата й опис, а потім категорії. Важливо пам’ятати, що категорії створюються не для вас. Щоб додати категорію, створіть ще один новий файл:

touch source/_categories/writting.md

Як і дописи, він також розділений на дві частини. Тому ми додамо наступне:

---
extends: _layouts.category
title: Writing
description: All posts that are about writing.
---
 
These posts are about writing and stuff.

Як бачите, ми маємо дві частини до файлу розмітки: початкову частину та фактичний вміст.Якщо ми тепер повернемося до нашого допису в блозі, ми можемо додати тут усе, що забажаємо, у розмітці:

---
extends: _layouts.post
section: content
title: My First Blog Post
date: 2022-06-21
description: This will be your meta description, make sure it isn't too long
categories: [writting]
---
 
This is my blog post.
 
## Here is a heading 2
 
- here
 
- is
 
- a
 
- list
 
> Even a blockqute
 
[And a link](https://www.laravel-news.com/)

Тепер, якщо ми знову обслуговуємо веб-сайт за допомогою команди jigsaw :

./vendor/bin/jigsaw serve

Коли ми відвідаємо http://localhost:8000/blog/my-first-blog-post, ми побачимо нову сторінку ми щойно створили.

Тож ми розглянули, як писати вміст, який, чесно кажучи, не був надто важким.Що ще ми хочемо на нашому веб-сайті? Ну, цей шаблон містить спосіб створення карти сайту, що дуже корисно!

Jigsaw має концепцію під назвою Listeners, яка виконується після конкретні події під час процесу створення веб-сайту. Якщо ми відкриємо bootstrap.php, ви побачите такий код:

<?php
 
declare(strict_types=1);
 
$events->afterBuild(App\Listeners\GenerateSitemap::class);
$events->afterBuild(App\Listeners\GenerateIndex::class);

У нас є два зареєстровані слухачі: один створить для нас карту сайту, а інший створить для нас індекс. Індекс використовується у функції пошуку на веб-сайті – те, що є частиною шаблону блогу. Давайте поглянемо на цей GenerateIndex і побачимо, що він робить:

declare(strict_types=1);
 
namespace App\Listeners;
 
use TightenCo\Jigsaw\Jigsaw;
 
class GenerateIndex
{
	public function handle(Jigsaw $jigsaw): void
	{
		$data = collect($jigsaw->getCollection('posts')
			->map(function ($page) use ($jigsaw) {
				return [
					'title' => $page->title,
					'categories' => $page->categories,
					'link' => rightTrimPath(
						$jigsaw->getConfig('baseUrl')
					) . $page->getPath(),
					'snippet' => $page->getExcerpt(),
				];
		})->values());
 
		file_put_contents(
			$jigsaw->getDestinationPath() . '/index.json',
			json_encode($data)
		);
	}
}

Цей клас викликається та обробляється, тому ми отримуємо дописиколекцію, відображати кожну з них і повертати масив інформації, яку ми хочемо додати до пошукового індексу. Далі ми поміщаємо вміст у новий файл JSON із кодуванням. Начебто крутий і гарний спосіб створення пошукового індексу. Ці дані вже є загальнодоступними на нашому веб-сайті, тому додавання загальнодоступного файлу JSON дозволить нам легше отримати до нього доступ через пошук.

Давайте зараз додамо RSS-канал на наш веб-сайт .Ви можете використовувати кілька різних способів зробити це - за допомогою слухача або просто як представлення. Зі свого досвіду використання Jigsaw я вирішив створити для цього подання.

У нашому каталозі вихідного коду нам потрібно буде створити новий файл під назвою source/ blog/rss.blade.xml, зверніть увагу на розширення файлу. Ми будемо створювати XML-файл (здригування), але з використанням blade, щоб мати знайомий синтаксис.У цей файл додайте такий код:

{!! '<'.'?'.'xml version="1.0" encoding="UTF-8" ?>' !!}
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:media="http://search.yahoo.com/mrss/">
    <channel>
        <title>{{ $page->siteName }}</title>
        <link>{{ $page->baseUrl }}</link>
        <description><![CDATA[{{ $page->siteDescription }}]]></description>
        <atom:link href="{{ $page->getUrl() }}" rel="self" type="application/rss+xml" />
        <language>{{ $page->siteLanguage }}</language>
        <lastBuildDate>{{ $posts->first()->getDate()->format(DateTime::RSS) }}</lastBuildDate>
 
        @foreach($posts as $post)
            <item>
                <title><![CDATA[{!! $post->title !!}]]></title>
                <link>{{ $post->getUrl() }}</link>
                <guid isPermaLink="true">{{ $post->getUrl() }}</guid>
                <description><![CDATA[{!! $post->description !!}]]></description>
                <content:encoded><![CDATA[{!! $post->getContent() !!}]]></content:encoded>
                <dc:creator xmlns:dc="http://purl.org/dc/elements/1.1/">{{ $post->author }}</dc:creator>
                <pubDate>{{ $post->getDate()->format(DateTime::RSS) }}</pubDate>
            </item>
        @endforeach
    </channel>
</rss>

Ми створюємо канал із інформацією про наш сайт, потім переглядаємо кожну публікацію та додаємо елемент до цього каналу, створюючи дійсний RSS канал. Щоб додати посилання на канал, відредагуйте основний макет, щоб додати посилання в заголовок нашого html. Це дозволяє читачам каналів RSS автоматично виявляти канал. Відкрийте source/_layouts/main.blade.phpі оновіть елемент <head>, щоб він виглядав так:

<head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <meta name="description" content="{{ $page->description ?? $page->siteDescription }}">
 
        <meta property="og:title" content="{{ $page->title ? $page->title . ' | ' : '' }}{{ $page->siteName }}"/>
        <meta property="og:type" content="{{ $page->type ?? 'website' }}" />
        <meta property="og:url" content="{{ $page->getUrl() }}"/>
        <meta property="og:description" content="{{ $page->description ?? $page->siteDescription }}" />
 
        <title>{{ $page->title ?  $page->title . ' | ' : '' }}{{ $page->siteName }}</title>
 
        <link rel="home" href="{{ $page->baseUrl }}">
        <link rel="icon" href="/favicon.ico">
        <link href="/blog/feed.atom" type="application/atom+xml" rel="alternate" title="{{ $page->siteName }} Atom Feed">
 
        <link rel="alternate" type="application/rss+xml" title="{{ $page->siteName }}" href="/blog/rss.xml" />
 
        @if ($page->production)
            <!-- Insert analytics code here -->
        @endif
 
        <link href="https://fonts.googleapis.com/css?family=Nunito+Sans:300,300i,400,400i,700,700i,800,800i" rel="stylesheet">
        <link rel="stylesheet" href="{{ mix('css/main.css', 'assets/build') }}">
    </head>

Як бачите, ми додали наступний фрагмент, щоб вказувати на наш RSS-канал.

<link rel="alternate" type="application/rss+xml" title="{{ $page->siteName }}" href="{{ $page->baseUrl.'/rss.xml' }}" />

Тож перевіряючи цей код, ми вже маємо канал - канал atom. Це є частиною самого шаблону, але є каналом Atom поверх каналу RSS – однак це не проблема.Наявність обох варіантів означає, що ви стаєте доступнішими, що ніколи не є поганим моментом, коли справа доходить до вашого веб-сайту.

Останній крок у використанні Jigsaw — створити ваш веб-сайт, тому він готовий до розгортання, і ви можете зробити це за допомогою наступної команди Jigsaw:

./vendor/bin/jigsaw build production

Це створить ваш локальний сайт у статичний вміст у build_production< /код>, новий каталог, який з’являється після виконання цієї команди. Останнім кроком є ​​розгортання вашого веб-сайту. У документації містяться інструкції щодо розгортання: