Output multiple .html pages for one post

Help
1

I’m working on a project that has 2 different styles. So env 1 and env 2 such that the site structure is;

index.html

  • env 1

    • submenu of env 1

  • env 2

    • submenu of env 2

But I want ALL _post to be generated in to each env's submenu so that they have the correct styling.

Is there a way to generate two pages from a single post?

So I would have,

_post/my-post.md

which would build to

_site/env 1/posts/my-post.html AND _site/env 2/posts/my-post.html

2

Have a look at Generator section of plugins page on Jekyll docs.

It won’t work on GH Pages, but you can make a ruby file in _plugins which can generate output from say a .md page (or data file as input). If the existing post is flow is fine, then you need a plugin which also make the file get outfitted to the other path. Your links will need fixing though do all env 2 pages link to each other and not env 1

That is the only way I know. As normally Jekyll has a 1-to-1 mapping of input pages to output pages.

3

Another way would be to use a command to copy the files before a build.

cp env\ 1/* env\ 2/ && jekyll build

What is the reason for duplicating content on different pages? It sounds like a bad idea esp for SEO ranking.

4

Thanks @MichaelCurrin, it was just so I could apply a different stylesheet for each environment, but after reading your comments I started to think more and i’m now considering JS to switch stylesheet depending on referring url (with a fallback for bookmarks).

5

Okay I see.

It would be weird I think to show different styling depending on the referral URL.

As it means if I click through to the site I get a different appearance to if I enter the URL directly.
And what happens when navigating between pages on the site where referral URL is your own domain? You might go from custom styling on arrival and the next page click goes back to default styling.

If you do want the referral URL you can get it in JS and update your CSS link tag appropriately. Such as look by ID and then update its href. I say update not create, so that your default behavior with JS disable is to use a default CSS file.

document.referrer
6

What do you mean by environment?

If you want to have a prod and staging version of your site on different domains and have different background color for instance, this better done using the identical code and something like an environment variable flag to switch the CSS.

Say you get your environments deploy as staging or production value for JEKYLL_ENVIRONMENT. This can be GitHub Actions or Netlify as env variable.

Then you have an if-else block like this to set your CSS URL.

{% if jekyll.environment == 'production' %}
...

You can also you two config files