作为开发人员，你有一个个人网站的机会是相当高的。毕竟，这是我们的工作 - 而且很可能，你已经重建了无数次。因为我们都知道，在我们完成那篇一直想写的博客文章之前，我们需要重建我们的网站......
在这一点上，我和下一个开发者一样有罪；说实话，这并不丢人。我们把重建网站作为一种学习经验，也是我们尝试新想法或设计的时间。但是，如果你有一天想到，"我只想要一个简单的网站，这样我就可以写作了"，那么就有一个答案。Jigsaw是一个由Laravel合作伙伴Tighten建立的静态网站生成器，这也是我在过去一年多时间里一直使用的个人网站。
它的优点在于，它允许我用markdown写博客文章，有一个简单的刀片视图来呈现页面和文章 - 而且可以建立在任何数量的服务上，从GitHub Pages到Netlify等等。
开始使用Jigsaw比你想象的要简单得多，所以让我们一起走过这个设置。我们的第一步是为你的项目创建一个目录。我使用~/code/github/JustSteveKing ，用于大多数我不想使用Laravel Valet的项目。它可以让我按照GitHub repo和组织轻松地组织项目。所以运行下面的命令来创建这个目录:
mkdir jigsaw-website
我们的下一步是进入目录:
cd $_
// or
cd jigsaw-website
现在我们已经输入了目录.我们需要告诉Composer我们要使用Jigsaw，所以运行下面的composer命令。
composer require tightenco/jigsaw
一旦这个过程运行，我们有几个选择。许多模板都是可用的，不仅仅是项目文档中列出的那些。谷歌搜索会帮助你找到很多。我们可以从头开始或使用其中一个可用的模板。
我们将使用由Tighten自己建立的模板之一，名为blog 。要安装这个模板，请运行下面的jigsaw命令。
./vendor/bin/jigsaw init blog
这将为你快速启动整个博客，设置好一切，所以你需要做的就是专注于写作 - 但你也可以选择开始造型和修改模板。让我们来看看这个网站，看看我们正在处理的是什么。
./vendor/bin/jigsaw serve
这应该会在http://localhost:8000 ，为你启动一个PHP服务器，所以访问它并熟悉你的新博客吧
现在我们可以开始考虑如何写我们的内容了。在你选择的代码编辑器中打开这个项目，我们可以探索其中的内容。
你可以在config.php 文件里面改变你的网站的配置，所以如果你打开它并改变诸如siteName 和siteDescription 的值，如果你重新启动网站，你应该看到你的变化得到反映。
你还会注意到一个叫做collections 的配置选项。这些是内容集合，你可以根据需要拥有很多。你甚至可以使用远程集合，你可以从一个API中获取数据，并在你建立的网站中创建记录来查看它们--很酷，对吗？
我们不会过多地专注于此。相反，让我们开始写博文。我们首先要删除这个模板创建的所有假数据--毕竟这不是我们在博客上想要的东西。删除以下目录中的所有文件。
source/_categoriessource/_posts_
现在我们可以看看为我们的网站创建一个新的帖子。接下来，使用命令行创建一个新文件。
touch source/_posts/my-first-blog-post.md
然后在你的编辑器中打开它，这将是你的第一篇博客文章。Markdown文件是由两部分组成的。你有一个被称为前台的东西，一个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]
---
所以我们有一个标题My First Blog Post ，一个日期和描述，然后是类别。要记住的重要事情是，类别不是为你创建的。要添加一个类别，请创建另一个新文件。
touch source/_categories/writting.md
和帖子一样，这也被分成两部分。因此，我们将添加以下内容。
---
extends: _layouts.category
title: Writing
description: All posts that are about writing.
---
These posts are about writing and stuff.
正如你所看到的，我们的markdown文件有两个部分，前面的内容和实际内容。如果我们现在回到我们的博客文章，我们可以在这里的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]
---
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)
);
}
}
这个类被调用和处理，所以我们得到posts 集合，对每个集合进行映射，并返回一个我们想添加到搜索索引中的信息数组。接下来，我们把内容放到一个新的JSON编码的文件中。有点酷，也是建立搜索索引的一个好方法。这些数据在我们的网站上已经是公开的了，所以添加一个可公开访问的JSON文件可以让我们通过搜索更容易地访问它。
现在让我们在我们的网站上添加一个RSS提要。你可以使用几种不同的方式来做这件事--使用监听器或简单地作为一个视图。根据我使用Jigsaw的经验，我选择了创建一个视图。
在我们的源目录中，我们将需要创建一个新的文件，名为source/blog/rss.blade.xml ，注意文件的扩展名。我们将创建一个XML文件（颤抖），但使用刀片，这样我们就可以有熟悉的语法。在这个文件内添加以下代码。
{!! '<'.'?'.'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提要。要添加到feed的链接，编辑主布局，在我们的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' }}" />
因此，检查这段代码，我们已经有了一个feed--atom feed。这是模板本身的一部分，但它是Atom feed而不是RSS feed--不过这并不是一个问题。有了这两个选项，意味着你更容易接近，当涉及到你的网站时，这绝不是一件坏事。
使用Jigsaw的最后一步是建立你的网站，以便为部署做好准备，你可以使用下面的jigsaw命令来完成。
./vendor/bin/jigsaw build production
这将把你的本地网站建设成静态内容，在build_production ，一旦运行这个命令，就会出现一个新目录。最后一步是将你的网站部署到某个地方。
