Jekyll - Generate pages for items in a collection (similar to posts) - jekyll

I'm making a website/blog that catalogs DIY projects, currently I have each project as a post, and recent posts are displayed on the home page.
What Im trying to do is have a separate page with project/post categories (projects.html). This page lists a collection of post categories that manually I've made, and will not show any actual posts.
I would then like these categories/collection items to be generated into a page that links to a layout where I can specify a FOR loop that will display each post specific to that category on the page.
I've tried many ways to generate pages from a collection of .md files as jekyll does for posts but I can't get this working. Is this possible to do? or is there a way to automatically generate an html page for every .md file in a folder?
Here is a link to the page I'm working with. http://happy-swallow.cloudvent.net/
Thanks!

You can use Collections and specify to render each file in the collection folder as a page:
tell Jekyll to render individual collection pages, in _config.yml:
collections:
my_collection:
output: true
Then create a folder named _my_collection (the folder name must start with an underscore) and every markdown file inside it will have a single page.

Related

how to configure jekyll with netlify cms to edit & create pages

I have a simple jekyll site and am trying to get netlify cms to work as the editor for the pages aswell as the posts.
If I tryt o move the pages into a pages folder in the the custom collections folder then it doesn't seem to build them unless they have an .md extension but the pages have plenty fo custom html in them and using .md appears to render the html on the page as text not html.
If I leave the pages in the root then netlify cms doesn't pick them up however I configure it.
There are 3 main kinds of page, Home page, a second level gateway type page, content pages
and then blog posts.
How should I configure this so that netlify can edit my pages and users can create new pages?
Site is here:
https://github.com/tofuwarrior/sites-clearspringacupuncture
Thanks.
Netlify CMS is a great system. However, if you want a WordPress-like experience that is also very forgiving for the developer, I recommend CloudCannon. This is a paid CMS, but it supports visual editing, which means any static page with <div class='editable'></div> can be edited within their system. It also supports image resizing. Creating new pages in CloudCannon is as simple as cloning old ones and renaming them. It is absolutely worth checking out.
Back to your question... It seems like you wrote 'page' instead of 'pages' in your config.yml file. Here is a working config file for Netlify, in which you can see that the correct name is 'pages'.
PS. I noticed you have a 'customcollections' folder. This seems odd to me. Aren't all collections custom collections in Jekyll?

How to for Jekyll site create "default" page or redirect for the folder?

I'm migrating my site to Jekyll. I put articles to .md files and set permalink for all of them. Historically all articles have `/notebook/article_name' URL. It works:
https://fervent-dijkstra-11077c.netlify.com/notebook/2000-01-02-one-two-three
But the /notebook/ itself has no index page.
https://fervent-dijkstra-11077c.netlify.com/notebook/
I'd like to put there redirect to the root page with list of articles. How to do it?
Sources are here: https://github.com/tseglevskiy/jekyll-test

generate subpages from template in jekyll

Is it possible to have a template in Jekyll, that will be filled for each subpage of a certain category with different data..
Say I have portfolio page, then I link to my works from there, each separate work page is using the same template, just the text and pics are changing.
So what I would like to have is portfolio/work1, portfolio/work2 generated from the same template and then I would iterate over _data yml files to fill in details for each work...
Is that possible in Jekyll? I couldn't find any articles on that topic.
You can use default setup for your portofolio folder.
1. In _config.yml, set :
defaults:
-
scope:
path: "portofolio"
type: "pages"
values:
layout: "work"
2. Create a _layouts/work.html template.
_
3. In your portofolio/indexhtml page
If you want to override layout, just do :
---
layout: page
...
---
This can be done with 'Collections' which is a function in Jekyll. See Jekyll Collections. If you are not sure what Collections is for then maybe Ben Balter's explanation could help.
In your situation: You want a portfolio page with subpages for each piece of work. Create a collection named Portfolio in your _config.yml like below:
# Collections
collections:
portfolio:
output: true
Then create a folder called _portfolio in your jekyll files. You then can clarify in your front matter on each piece of work i.e. work1.md inside _portfolio which could display images, tags etc along with content like you would write a post in Jekyll. In your front-matter for each work example, you can define what template/layout you would want to use for the work examples.

A static blog generator with multiple image directories

Question: what software should I use to achieve a static site generator like described below?
I'm looking for a static blog generator, which... generates static blogs, of course :). However I need something more, like a nice set of themes to choose from, and, what is even more important, a specific way of managing assets.
When I write articles/posts/text, I create a new directory. Then inside I have a file like article.md, or article.textile. I also have files with code, and pictures, and charts etc. Everything is inside this one directory. Then I used to run a tool to convert it to html, and copy the html to a website for publishing. However there was always a problem with images. I had to copy the images somewhere e.g. to Wordpress and then change the image urls in the html. This is not the best way to do it.
I'd like to have a static blog generator, which would let me keep my normal structure: one directory per post, and keep all the images from the directory in generated structure, so I can have relative paths to the images.
I really don't like the idea to keep all articles in one global directory, and all images in another global one.
I've checked jekyll, and pelican so far, and read about couple others, but I haven't found any solution to that problem. I know that, as usually, you will have many nice ideas to check.
And of course I know that most probably this post will be "closed and not constructive", or with any other funny explanation, but maybe someone will manage to post any solution before that.
Hugo can do this. cd to empty folder of your choice, then
create the scaffolding:
hugo new site .
After that you can put your content in content, example:
content
post
alpha
index.md
1.jpg
2.jpg
bravo
index.md
1.jpg
2.jpg
Build site:
hugo
Result is generated in public folder:
public
post
alpha
index.html
1.jpg
2.jpg
bravo
index.html
1.jpg
2.jpg
Jekyll does not explicitly enforce a rule about where to put your assets like images with the exception that Jekyll will not copy files directly in a folder beginning with an underscore. Although the general practice would be to put all images in the \assets\ directory, you can put it anywhere else other than the _posts\ directory, which is what you wanted.
This is the default behavior, but there are ways to get around this:
Have your posts live outside the _posts directory
Put all your posts outside the default _posts folder along with the images (this will copy all the files without any YAML frontmatter, and preprocess all the files with the YAML frontmatter). However, any other function you can do with posts automatically in Jekyll won't work anymore. This may or may not be an issue.
Plugins
Here's a plugin (link to SO question) written specifically for making Jekyll copy files in the post directory. If you do use this you can definitely just write the following Markdown and it'll link relative to the post as it should. :
![Image title](my_image_filename.png)
Jekyll asset path plugin is another robust plugin that does something similar, but does not keep your images in one directory, it does however link images relative to your post title though.
Jekyll asset pipeline is another another plugin that handles CSS and JS, which might be something you want to have in conjunction with plugin 1.
Do note however that the use of third party plugins is not supported with GitHub Pages site generation, meaning you will have to generate them in another branch or locally, and then pushing the static HTML files to master. This might be an issue for you if you're planning to host with GitHub Pages, else on your own server instance you're good to go.
I also want my posts to be "self contained", text content and image assets being in one single folder. I'm using Jekyll.
I have made this possible with a Pull Request on the great jekyll-picture plugin.
I can then use the simple {% picture my-image.png %} syntax to show the image in my post that is in the same folder.
Here is an example: https://github.com/nhoizey/nicolas-hoizey.com/tree/master/_posts/2015/06/19-mon-jeu-esviji-integre-a-framagames
One year after my previous answer, I have now developed a Jekyll plugin that helps keep posts assets alongside the Markdown file, it might fill your needs: https://nhoizey.github.io/jekyll_post_files/

Having html and wordpress on the same directory

I have a WordPress site with a couple of posts on it. To this site I need to add a few HTML pages (including index.html). I need both of them to work properly.
The home page should be the index.html page, and all its links(HTML pages).
The previous site URL's i.e. WordPress URL's should also work.
I put them together and the index.html page displays as home page, the subpages(HTML) also work fine. Although all WordPress URL's are re-directing to the index.html itself.
Is this possible? How do I make the old WordPress URL's work fine (i.e. not redirect the index.html page)?
When dealing with issues like this, I like to create page templates in Wordpress (with page names like About, Projects, etc.) And then I create a .php file using the slug title of it (so a projects page will correspond to a .php file called 'page-projects.php'
One example being I make a page called 'about', then I create 'page-about.php' in my Wordpress directory. The Wordpress Template Hierarchy will, along the way, look for a .php file called 'page-about.php'
A solution like this is great because those pages are linked through your site, so using /about or /projects will bring you to the proper pages instead of redirecting to the main page (because it redirects to your index when Wordpress can't find any other suitable template to display)