Use multiple themes on one website jeykll

Viewed 1565

I have recently found out about jekyll, and want to make a project landing page with it. I would like to have a home page using one theme (e.g. ubuild) and have another page for the docs (accessed via a navigation bar at the top) that uses a different theme (e.g. just-the-docs). How can I go about doing this?

EDIT: I want to use Github Pages for this.

4 Answers

Since you plan to use one of the themes on just a single page, I think the best solution would be to use two base layouts instead of two themes.

It will take some minor work initially, but will greatly ease future maintenance.

First set up the site to render just-the-docs theme for all pages including the landing page. Then modify _layouts/home.html to be a parent layout (like the default layout) to render the markup from the ubuild.. theme.

I solved this with help from @JoostS's answer but with a few modifications:

  1. Make an organization on GitHub pages with a repo called <org-name>.github.io. This repo should contain the theme for the home page (ubuild in my case) and all the content for it.

  2. Make another repo with a jeykll site, called docs. This site should have the theme you want for the other page (just-the-docs in my case) and all the content along with it.

  3. In the docs repo, add baseurl: "/docs" to your _config.yml

  4. The <org-name>.github.io repo, should now be hosted at <org-name>.github.io/:

    Site is published

  5. The docs repo should now be hosted at the <org-name>.github.io/docs url:

    Docs repo

  6. To link to the docs page, you should just be able to use /docs now.

The solution is to create two separate websites. The first site contains just the homepage and should be deployed to the root of your web folder. The second site contains all docs and should be deployed to a subdirectory, like '/docs/'. You might want to use baseurl for this: https://byparker.com/blog/2014/clearing-up-confusion-around-baseurl/

I do not think you can use this solution on Github pages. You can TRY to add the same CNAME to both repositories, as I am not 100% sure. Any other static hosting environment should work.

You can link from the docs to the homepage by linking to '/'. You can link from the homepage to the docs by linking to '/docs/pagename/' (assuming you use permalink: pretty).

The simplest way to maintain two layouts on the same site using Jekyll with GitHub Pages is for you to create a new repository for the new layout, so the main site is in a GitHub organization and the pages that need to use a different layout must be in your repositories.

However, if you are not using GitHub, just jekyll, just configure each folder as a new Jekyll project, and direct them to write to the respective subfolders in the _site folder. For everything to work out you need to start Jekyll Server from the main folder, and then build each subfolder separately, so it will update without removing the main one

Related