Use multiple themes on one website jeykll

Question

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.

Jag

Did you manage to get it work? – Spree

Yeah, I just posted an answer. Completely forgot about it, thanks for the reminder! Let me know if the solution works for you. I actually haven't touched Jekyll in a while so I might have missed something :) – Jag

Answer 1

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/:

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

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

Jag

This will only work if you have a single project on GitHub pages if you have multiple projects this is useless because it just hijacks the main GitHub page. – Yanirayank

Answer 2

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.

Shumpert

Good idea! I will try it, and will get back to you. – Jag

Answer 3

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).

Geotectonic

How would I deploy two websites on a service like github pages? Also, if I did it this way could I directly link to the other website with a relative link? If not how could I link to the other website that holds the docs? – Jag

Ok, I would like to make it be able to host on github pages (sorry I should have added it to my question). – Jag

I don't think that that is possible (as stated). – Geotectonic

I might be able to create a website for and organization and use a different base_url for the documentation then link to it as an absolute link (e.g. org_name.github.io/docs and /home as different websites). I think kind of like this with more than one repo under the organization, but thats the sort of thing I want to avoid and seems kinda hacky. – Jag

I think themes in general assume you use them for the whole repo. I see no obvious solution here. – Geotectonic

What I mean is create two different repositories under one organization and host them on different base_names of the organization. For example, if I have a domain org.github.io it could have two basenames org.github.io/home and org.github.io/docs, hosted on different repositories. I'm not quite sure though. – Jag

Answer 4

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

Microvolt

Answer 5

It is possible to use multiple jekyll themes within a single Jekyll based Github Pages site. The approach I used was based on @Delfino's answer to use subfolders as individual Jekyll projects. Settings need to be configured to ensure the site builds properly locally as well as on Github Pages.

The article referenced earlier has all the details. The variables keep_files, exclude, were set in _config.yml in the root folder while destination needs to be set correctly in the subfolders. Then, build the site in the subfolders, commit the generated folders in _site and push changes to gh-pages.

The repository is also available on github and this commit has the required configurations in

• _config.yml
• build_theme_sites.sh - to build the jekyll themes as individual sites
• _data/themes.yml - for switching themes
• tactile/_config.yml - to build the tactile theme
• time-machine/_config.yml - to build the time machine theme

I hope the above helps.

Spellbinder