How to setup Drafts? (Drafts are broken when viewed locally)

[joshbuker]

Describe the bug

When using Jekyll locally, drafts do not render properly.

Screenshots

Expected behavior

Drafts work as intended.

To Reproduce
Steps to reproduce the behavior:

1. Create a draft, e.g. _drafts/example.md
2. Run the jekyll server locally with drafts enabled, e.g. with the command:
   jekyll s -w --safe -H localhost -P 3000 --drafts --future
3. Visit a draft post via homepage, blog, or archive pages.
4. All styling will be missing, and the draft post will not be using the typical/expected path.

Desktop (please complete the following information):

Mobile devices (please complete the following information):

Additional context
If you have troubles reproducing this bug, let me know and I can elaborate.

[MrGreensWorkshop]

This is caused of defaults setting in _config.yml.

It set the page and blog post by path. Files in other paths like _drafts are not set.
ex path:http://127.0.0.1:4000/jekyll/2022/02/10/example.html

So any page in _drafts folder you need to set layout in _config.yml. Or just simply add this linelayout: "post" into front matter of all files in _drafts folder.

_config.yml

defaults:
  # for posts
  - scope:
      # to separate language posts folders
      path: "_posts"
    values:
      layout: "post"
      permalink: /posts/:path

  # for multilingual posts
  - scope:
      # to separate language posts folders
      path: "*/_posts"
    values:
      hidden: true
      layout: "post"
      permalink: /:path

For drafting your posts or any page you can use published: false to disable that page or post.

[joshbuker]

Drafts are a pretty common use-case for a blog, is there a technical limitation that you're running into? Perhaps I could help figure it out.

[MrGreensWorkshop]

I will explain this in as much detailed as I can, so that other people can benefit this as well.

So What are drafts?

Drafts are posts without a date in the filename. 
They’re posts you’re still working on and don’t want to publish yet. 
from: https://jekyllrb.com/docs/posts/

How to use drafts

1. Create a file at _drafts/example.md (root folder of project. where _data or _layout is located)
2. Open 2022-02-10-Examples.markdown file and copy all into created example.md.
3. Then change title: Examples to title: New draft in example.md file.
4. Add this layout: "post" after this line title: New draft.
5. Run this command bundle exec jekyll serve --drafts --watch --host 0.0.0.0 --safe
6. When the page is running go to http://127.0.0.1:4000/tabs/blog/ and you should see post name New draft there.

if you don't use --draft option those pages will not be visible.

I hope this helps

[joshbuker]

The drafts will show up on the related pages, but actually visiting the draft will cause all of the styling to break, and the path to not match the usual preset (e.g. I have mine configured for /blog/yyyy/mm/dd/title, but drafts will show up under /category/yyyy/mm/dd/title.html and lack any styling or layout.

[joshbuker]

Per reproduction steps, I already am using the --drafts flag, and it does render the drafts, just in a broken manner. You can see this happen by cloning my fork (https://github.com/joshbuker/joshbuker.github.io) and using the command listed in the reproduction steps.

[joshbuker]

Ahhh, okay I figured it out actually.

I needed to configure drafts to use the default permalink and layout like posts do:

###########################################################
# Front Matter Defaults (https://jekyllrb.com/docs/configuration/front-matter-defaults/)
###########################################################
defaults:
  # for posts
  - scope:
      # to separate language posts folders
      path: "_posts"
    values:
      layout: "post"
      permalink: "/blog/:year/:month/:day/:slug/"

  # for drafts
  - scope:
      path: "_drafts"
    values:
      layout: "post"
      permalink: "/blog/:year/:month/:day/:slug/"

The drafts now are rendering as expected with the above added to my config.

[MrGreensWorkshop]

Yes it is permanent solution for _drafts folder. or just add layout: "post" in front matter.
I'm glad you manage it.