Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

_pages Directory, like _posts Directory? #920

Closed
jhauraw opened this issue Apr 4, 2013 · 32 comments

Comments

@jhauraw
Copy link
Contributor

commented Apr 4, 2013

Thank you @mojombo for an awesome project. I used to build sites like Jekyll produces years ago, but now with Jekyll we get automation and pre-processing, awesome-sauce.

I've got a project with quite a few pages and it would be great if there was a way to store them in a _pages directory, like we do with _posts. Having Pages clutter up the top-level Jekyll dir makes it a bit messy.

I created a _pages dir and added it to _config.yml with include = ['_pages'], so that Jekyll processes and copies them into _site.

Problem is, it also copies them nested in the _pages dir, no fault of Jekyll, that's how it works. Just not how we would like it to work in this case.

Is there a way, maybe with a plugin, to have Jekyll do everything it does but modifying the copy process to move the Pages out of the _pages dir to top-level _site when generating? Just like how it happens with Posts?

If you have a snippet or plugin known, please point me in the right direction. I'd rather not use a third-party process (such as Grunt or copy:). I'd like it to be with a Jekyll option or plugin.

BTW. I posted this to the Google Group, but it looks like that has died out and my message never went through.

@zachgersh

This comment has been minimized.

Copy link
Contributor

commented Apr 9, 2013

I like the idea of having a pages directory but I am assuming (@parkr correct me here) that having a ton of pages goes against the blog concept that jekyll is trying to stay within and more towards building a full site.

Having seen a plugin that will automatically move the pages out of a specified directory but I imagine it wouldn't be too hard for someone to whip up. @parkr what do you / @mojombo think about having something like this in jekyll versus being a plugin?

@brainkim

This comment has been minimized.

Copy link
Contributor

commented Apr 9, 2013

I struggled with this too! Instead of creating a _pages directory, you could just create a plain old pages directory in which you keep all your non-post pages. Jekyll defines a page as any file in the source directory that has YAML front matter (even if it's just two lines of ---). Then, you could create an index.html file in the pages directory so yourwebsite.com/pages refers to a nice index of all your non-post pages ({{ site.pages }} as described here might be helpful). It's a bit of a kludge, but it works, and this solution has the added benefit of keeping your base url clear.

An alternative solution is the one found in the new jekyll site. The documentation "pages" are actually just posts in _posts. Jekyll moves them into the /docs/ directory when the site is built by setting the permalink in _config.yml to /docs/:categories/:title. They also have a dummy /docs/ directory with an index.html file that redirects to /docs/home/, which is another post. I'm pretty sure you can also set the permalink using YAML frontmatter as well.

There are a lot of ways using jekyll to build a website with "pages" instead of "posts." The important thing to remember is that you're just building a static site, so any directories you create in the source will be copied over into your site, and you can give each directory a corresponding page by creating an index.html. You can use meta redirects and permalinks to make your site as sophisticated as you need it to be. Lemme know if anything's unclear.

@jhauraw

This comment has been minimized.

Copy link
Contributor Author

commented Apr 10, 2013

@zachgersh, @dracula2000: Thanks for your input.

Don't get me wrong, there's still plenty o' bloggin' going on. It's not a "pages" only site at all. But it's easy for 5-10 pages to clutter up the WD. Not everybody only has an "about.html" page :-)

It's mainly just a working directory organizational feature and not something I would want to affect the output in _site, which is pretty much what the _posts folder does for posts, i.e., we don't end up with a /posts/ folder in _site.

Anyway, yeah, my Ruby is getting better (I'm a PHP dev), so a plugin is most likely the best option. All you would need to do is hook into the copy file over process and copy everything in _pages to _site root after processing.

Just need a plugin to point me in the right direction to use as a starting point. No biggie.

@parkr

This comment has been minimized.

Copy link
Member

commented Apr 11, 2013

The wiki has a page on plugins, as will the new docs.

Closing this, as it's not something we'll bring into the core.

@millerpils

This comment has been minimized.

Copy link

commented Sep 18, 2014

Guys,

I want to simply put my pages into a pages folder to tidy things up. What I don't want is the URLs to be root/folder-name/page. Instead I just want root/page, even though the pages are in a subfolder. Is this possible?

Cheers.

@kleinfreund

This comment has been minimized.

Copy link
Contributor

commented Sep 18, 2014

@millerpils Set permalink: /[page]/ in the front matter.

@millerpils

This comment has been minimized.

Copy link

commented Sep 18, 2014

Doesn't appear to make any difference?
I restarted the server too.

@parkr

This comment has been minimized.

Copy link
Member

commented Sep 18, 2014

I want to simply put my pages into a pages folder to tidy things up. What I don't want is the URLs to be root/folder-name/page. Instead I just want root/page, even though the pages are in a subfolder. Is this possible?

If you make _pages a collection in your _config.yml, you can set its permalink attribute to be /:path:output_ext or something.

Doesn't appear to make any difference?
I restarted the server too.

Did you re-run the build? Running jekyll serve on Jekyll 2.4 should do this automatically.

@steinsag

This comment has been minimized.

Copy link

commented Oct 2, 2014

Using a collection as done on Jekyll's official documentation site has the big disadvantage that those pages are not added to the site.pages variable. This of course breaks a lot of plugins like sitemap, which will not include those collection pages.

@budparr

This comment has been minimized.

Copy link
Contributor

commented Oct 2, 2014

I'd echo what @kleinfreund already said and add that when I do that I add this to the config:

include: ['_pages']
@millerpils

This comment has been minimized.

Copy link

commented Oct 6, 2014

Ok thanks guys, I'll try that.

@joshuapowell

This comment has been minimized.

Copy link

commented Nov 14, 2014

For anyone looking for this same solution of have a _pages directory that holds your pages.

  1. The first thing you need to do is edit _config.yml as menionted above to include this line:
include: ['_pages']
  1. The next thing you'll need to do is create the actual _pages directory in your project root like so:
your-jekyll-site
.
|-- _pages
|-- _config.yml
|-- _includes/
|-- _layouts/
|-- _posts/
|-- _site/
|-- index.html 
  1. Finally you can add your .md files into the newly created _pages directory.
your-jekyll-site
.
|-- _pages
    |-- about.md
    |-- new_page.md
|-- _config.yml
|-- _includes/
|-- _layouts/
|-- _posts/
|-- _site/
|-- index.html 

Errors
If you receive this error jekyll 2.4.0 | Error: Is a directory while attempting to do this, make sure that your permalink in your Front Matter looks like this with a trailing slash:

---
permalink: "/about/"
layout: page
title:  "About Us"
---
@liaocs2008

This comment has been minimized.

Copy link

commented Jan 15, 2015

It would't work but I did exactly as you explained. I mean I can only access "new_page" by the permalink set in my markdown file. It didn't show up in the index page like "about" page did. May I ask why about.md in the root directory can be detected but "new_page.md" in root directory can't?

@joshuapowell

This comment has been minimized.

Copy link

commented Jan 15, 2015

The solution above describes how to use a _pages folder to organize/house all of your static pages. You said you put new_page.md in the root ... that kind of goes against everything the above code says. Note that the directory tree in step 2 doesn't show about.md? That's because all page files should be placed under the _pages folder .. step 3 is what you missed.

Like so:

screen shot 2015-01-15 at 9 20 17 am

If you have any other questions about it, just let me know.

Edit: Also updated the above comment to be more clear with a second example under Step 3

@liaocs2008

This comment has been minimized.

Copy link

commented Jan 15, 2015

Well, I should say that I tried creating _pages directory and configuring it in _config.yml. But new_page.md in _pages directory didn't show up in the index page. So I tried moving it to the root directory. Maybe I should start it over. BTW, do you know how jekyll searches for post.md and page.md? Just by "include" variable in _config.yml?

@joshuapowell

This comment has been minimized.

Copy link

commented Jan 15, 2015

Yeah, try the above steps with a brand new Jekyll site, it definitely works.

Regarding the .md files, the default functionality is that it looks in _posts for posts and the root for pages See http://jekyllrb.com/docs/posts/ and http://jekyllrb.com/docs/pages/

When you're including the include variable in your config.yml your telling Jekyll "Hey Jekyll there's also stuff in here you should process"

@eberkund

This comment has been minimized.

Copy link

commented Jan 22, 2015

Is there a way to do that without specifying a permalink? ie. by using the filename instead?

@joshuapowell

This comment has been minimized.

Copy link

commented Jan 23, 2015

You might just be able to drop the permalink from the front matter, but I'm
not sure.

On Thursday, January 22, 2015, Erik Berkun-Drevnig notifications@github.com
wrote:

Is there a way to do that without specifying a permalink? ie. by using the
filename instead?


Reply to this email directly or view it on GitHub
#920 (comment).

Best,
Joshua Powell

Founder & Managing Director of
Viable Industries, L.L.C.
6101 Penn Ave, Suite 201
Pittsburgh, PA 15206

412-956-3358
www.viableindustries.com

@budparr

This comment has been minimized.

Copy link
Contributor

commented Jan 23, 2015

To my knowledge, no. There's no way to use the method above (putting everything in a folder, like _pages) without specifying the permalink in front matter.

@stevemoser

This comment has been minimized.

Copy link

commented Jan 23, 2015

@joshuapowell I tried your technique and it works well except I can't get relative links to work.

This is my directory structure.

.
|-- _pages
    |-- example.md
    |-- test.md
|-- _config.yml
|-- _includes/
|-- _layouts/
|-- _posts/
|-- _site/
|-- index.html

example.md contents:

---
permalink: "/example/"
---
[test](test.md)

So far so good as this achieves my goal of using relative links with Github.
https://github.com/blog/1395-relative-links-in-markup-files

However this doesn't work with the rendered page. Instead of linking to
http://www.example.com/example/test/
it links to
http://www.example.com/example/test.md

If I change it to test then the link on the rendered jekyll page works but the link on the Github file browser page doesn't work.

Can I maybe make a change to the markdown parsing in _config.yml to get a single link working on both Github and Jekyll?

@stevemoser

This comment has been minimized.

Copy link

commented Jan 25, 2015

I found a solution if the files are in the root directory but not the _pages directory and I don't like it because it feels like a hack and I don't know if it has SEO problems.

The solution is in this SO answer starting at the part that begins with "Relative linking to these documents works if you include the following jQuery function..."
http://stackoverflow.com/a/16389663/142358

Basically @CoryG89's interesting solution runs some javascript when the page loads to change links from .md files to pretty URLs. So using my example above it changes
http://www.example.com/example/test.md
to
http://www.example.com/example/test

Anyone got anything better?

@eberkund

This comment has been minimized.

Copy link

commented Jul 28, 2015

@stevemoser Just add to your _config.xml the line include: ['_pages'] and then make sure to define the permalink in all your pages. It is the easiest solution and it works perfectly. You can look at my repo here for a demonstration of this: https://github.com/eberkund/seniorchairs

@joshuapowell

This comment has been minimized.

Copy link

commented Jul 28, 2015

@stevemoser I second @eberkund comment ... actually it's the first step you need to follow to get this to work right see #920 (comment) above

jonfk added a commit to ssmu-powerlifting/ssmu-powerlifting.github.io that referenced this issue Aug 4, 2015
@stevemoser

This comment has been minimized.

Copy link

commented Aug 5, 2015

@eberkund @joshuapowell Thanks I relative links to work. See http://stevemoser.org/example and https://github.com/stevemoser/stevemoser.org.

My problem was more with relative links and permalinks than with publishing pages. But now with this generator script which removes the .md from links by Partly Cloudy http://stackoverflow.com/a/29234076/142358 and Jekyll 3 (using the --pre) option to use extensionless permalinks I can now get relative links to work on github.com as well as my site.

@CelticParser

This comment has been minimized.

Copy link

commented Jun 23, 2016

For SEO best practices, it's best to have "important pages" at the root level.

e.g. about.html, contact.html, etc should be in the sites root (permalinked as such). Search engines give weight of importance to a page in relation to how deep the link is in the site as a ranking variable for indexing in the SERP's.

With that in mind:

Directory structure:

.
|-- _pages
    |-- about.md
    |-- contact.md
    |-- etc.md
|-- _config.yml
|-- _includes/
|-- _layouts/
|-- _posts/
|-- _site/
|-- index.html
# _config.yml
...
include: ['_pages']
...

In your _pages/[FILE_NAME].md:

---
permalink: "/[FILE_NAME].html"
---
@k-funk

This comment has been minimized.

Copy link
Contributor

commented Jul 29, 2016

I'd still like to see this (taking a page that's organized into a directory, and putting it at the site's root) be possible without explicitly defining a permalink. If I have lots of documentation under /docs/<filename> I don't want to put that path/directory-name in n files. Not very DRY, more room for human error, and if I move from /docs/ to /documentation/ I need to change n files.

An interesting solution could be to have the front matter specify

---
...
permalink_pattern: '/:dir/:title/'`
...
---

or

---
...
prepend_path_to_permalink: true
...
---

Since include: ["_pages"] is already defining the file import "root", the /:dir could traverse the directory structure upwards until that entry point. This would be really powerful because you could specify different entry-points to those directory structures that would also define the path/url/permalink. Example: include: ["_pages/departments", "_pages/root_pages"]

|-- _pages
    |-- departments
        |-- biology.md
        |-- chemistry.md
    |-- root_pages
        |-- about.md
        |-- contact.md
    |-- about.md
    |-- contact-us.md
|-- _site
    |-- biology.html
    |-- chemistry.html
    |-- freddie-mercury.md
    |-- david-bowie.md
    |-- about.md
    |-- contact-us.md
|-- _config.yml
|-- _includes/
|-- _layouts/
|-- _posts/
|-- index.html

Some pages deserve to be at the root of the site, but having a ton of files at project root is rather annoying.

@MattSturgeon

This comment has been minimized.

Copy link
Contributor

commented Jul 15, 2017

As @parkr suggested, I worked around this by adding a pages collection to my config:

_config.yml
-----------

collections:
  pages:
    output: true
    permalink: /:path

Because the collection is named pages, site.pages does get populated, contrary to what @steinsag implied.

Jekyll will look in the directory _pages for a collection named pages, so this seems to work perfectly.

@Rarst

This comment has been minimized.

Copy link

commented Feb 19, 2018

FYI I've tried the last method posted and while it mostly worked:

  • nested pages got generated without trailing slashes on GitHub Pages (with them locally), which broke existing navigation;
  • sitemap plugin picked up root as example.com/index and also included 404.html, so there might be hiccups with site.pages after all.
@philippemarlin

This comment has been minimized.

Copy link

commented Oct 13, 2018

@MattSturgeon @parkr Have question. How we can do hierarchic pages permalink ?
like a strucuture parents and childs pages (each /:path/ are reals pages not fake path)
like in worpdress
http://prntscr.com/l56mtr
http://prntscr.com/l56n3r
ex:
site.tld/mypageparent1/
site.tld/mypageparent2/
ect..
and
site.tld/mypageparent1/child1ofparent1/
site.tld/mypageparent1/child2ofparent1/
site.tld/mypageparent2/childofparent2/
ect...
and
site.tld/mypageparent1/childofparent1/chlid1ofchild1ofparent1/
site.tld/mypageparent1/childofparent1/child2ofchild1ofparent1/

@philippemarlin

This comment has been minimized.

Copy link

commented Oct 13, 2018

@MattSturgeon @parkr Have question. How we can do hierarchic pages permalink ?
like a strucuture parents and childs pages (each /:path/ are reals pages not fake path)
like in worpdress
http://prntscr.com/l56mtr
http://prntscr.com/l56n3r
ex:
site.tld/mypageparent1/
site.tld/mypageparent2/
ect..
and
site.tld/mypageparent1/child1ofparent1/
site.tld/mypageparent1/child2ofparent1/
site.tld/mypageparent2/childofparent2/
ect...
and
site.tld/mypageparent1/childofparent1/chlid1ofchild1ofparent1/
site.tld/mypageparent1/childofparent1/child2ofchild1ofparent1/

have found https://github.com/bbakersmith/jekyll-pages-directory

@jeradrutnam

This comment has been minimized.

Copy link

commented Oct 22, 2018

My requirement was to achieve something like below, with keeping my pages within a _pages folder.

example.com/
example.com/about/
example.com/downloads/archived/

And I was able to achieve it by below structure and configuration.

.
|-- _pages
|   |-- downloads/
|   |   |-- archived.md
|   |-- about.md
|-- _site
|   |-- about
|   |   |-- index.html
|   |-- downloads/
|   |   |-- archived
|   |   |   |-- index.html
|   |-- index.html
|-- _config.yml
|-- ...
|-- index.html

_config.yml

...
collections:
  pages:
    output: true
    permalink: /:path/

permalink: pretty
...

And you can change the permalink according to your url style. Hope this will help someone.

@peter-jerry-ye

This comment has been minimized.

Copy link

commented Mar 6, 2019

...
collections:
  pages:
    output: true
    permalink: /:path/
...

I achieved the same effect but with /:path. In my case, it won't work if there's a slash after the path.

@jekyll jekyll locked and limited conversation to collaborators Mar 6, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
You can’t perform that action at this time.