Setting up a blog with Jigsaw
Tomas Norre • July 28, 2021blog development
With the blog post you will learn how to set up you own blog with Jigsaw.
* PHP 7.4+ * composer
Let us get started
open your terminal, and type in
$ composer require tightenco/jigsaw $ ./vendor/bin/jigsaw init blog
And that's it for now.
Watch the result
Now you can watch you blog
$ ./vendor/bin/jigsaw serve
Now go to http://localhost:8000 and you will see the demo blog from Tighten.
There are a few things that you should pay attention to. Bellow there a snippet of some of the directories.
Every category you want on your blog, you need a markdown file in your
_categories-folder. The Layouts are all stored in the
_layouts-folder, and last but not least, the blog posts itself are located in
── _categories │ ├── configuration.md │ └── feature.md ├── _layouts │ ├── category.blade.php │ ├── main.blade.php │ ├── master.blade.php │ ├── post.blade.php │ └── rss.blade.php └── _posts ├── custom-404-page.md ├── customizing-your-site.md ├── fuse-search.md ├── getting-started.md ├── mailchimp-newsletters.md └── my-first-blog-post.md
The blog posts have a structure like
--- extends: _layouts.post section: content title: My First Blog Post date: 2017-03-23 description: This is your first blog post. cover_image: /assets/img/post-cover-image-2.png --- This is the start of your first blog post.
The section between the
--- is the metadata which all can be reached within the template (
_layouts/post.blade.php) by using
$page->date. The part after the
--- is simple markdown and your blog post, the
<h1> will, with the default template, be rendered from the
title so you would not need to add a
# Headline yourself.
The filename in this case
my-first-blog-post.md, will also be the URL of the post e.g. http://localhost:8000/blog/my-first-blog-post
Now you are ready to start tweaking the setup to fit your needs. Instead of using the
./vendor/bin/jigsaw serve you can also use
npm run watch which will start a browser with hot-reload on changes, so that you will not need to refresh your browser on every change.
If adding a new blog-post you would need to restart the
jigsaw serve or
npm run watch otherwise it will not detect the new file.
I think I have till this day not worked with a blog system that was easier to get started with than Jigsaw, I really enjoy working with it, and it got me started really fast.