Table Of Contents

Design

In order to enable switching between the themes, we need a navigation menu of some kind. After some experimentation, I decided to go with a CSS Dropdown for designing the themes navigation menu and this is currently live on Github Pages Site with multiple themes. This navigation component is consistently on the top right corner to ensure minimal modifications to the original jekyll github pages themes, enabling review of the original theme features.

The original motivation for this project was to ascertain if multiple jekyll themes could be integrated and deployed as a single Github Pages site. To facilitate validation and make it usable, we had to take up the navigation component as part of this task. However, this work was interesting and I hope to revisit it.

Do stay tuned for further updates on posts dedicated to design.

Configuration

  • Create a new Jekyll site for each theme required (we created time-machine, tactile for now)
  $ bundle exec jekyll new time-machine
  $ bundle exec jekyll new tactile
  • As per previous post, modify the Gemfiles for each site created above,
# gem "jekyll", "~> 3.9.3"

Comment out the gem jekyll line above, add required modifications as below,

gem "jekyll-theme-time-machine"
gem "github-pages", "~> 228", group: :jekyll_plugins

Now run bundle install as well as bundle add webrick if needed.

  • In each theme folder, we need to ensure appropriate variables are set in _config.yml.

The configuration values for time-machine/_config.yml are provided below,

baseurl: "/pages-themes-previewer/time-machine"
destination: ../_site/time-machine
theme: jekyll-theme-time-machine

Recall that for the main site, baseurl=/pages-themes-previewer is necessary in order for the site to be properly deployed on Github Pages. The jekyll sites are deployed as subfolders within the main site and hence we need to add further subpath to the specific sites. The destination is set as above to enable consistency with the navigation structure that is in turn defined in _data directories in root folder as well as in the jekyll sites that are at the first level subfolders.

  • To make things work properly, we need the following in _config.yml in root folder
keep_files: ['time-machine', 'tactile']

which avoids modifying the theme folders that are to be generated by building the subfolders.

See contents of build_theme_sites.sh for further details (or excerpt below)

echo "Building Time machine ..."
cd time-machine;
bundle exec jekyll build;

The tactile, time-machine subfolders are excluded from main build (at root)

exclude:
  - tactile
  - time-machine

The above avoids overriding build generated at subfolders.

Workflows for Deployment

Local Testing

To test locally, we need to

  $ bash build_theme_sites.sh # Or ./build_theme_sites.sh
  $ bundle exec jekyll serve

The first line builds the theme sites. The second command builds the root site and starts the server. You will then need to run bash build_theme_sites.sh manually each time you modify any file in the theme and hope to investigate further improvements to this approach.

Github Pages Deployment

To deploy to Github Pages we did the following

	$ git add _site/time-machine
	$ git add _site/tactile
	# Added other modifications as needed for the commit
	$ git commit -m 'Test Multiple Themes'
	$ git push -u origin gh-pages

The above push should first commit changes to the remote repository and then automatically trigger a push to the web page with the required changes. However, in my case there were some glitches and it did not deploy automatically. Since there was no deployment activity even after some time, I had to first set the branch to main first in Github Pages in Settings and then reset to gh-pages which finally triggered the build bringing the site live.

Conclusion

Thus, the main objective to ascertain if integrating multiple pages within a single Github Pages Site is feasible was attained. A lot more improvements with Jekyll site is in the works and hope to update them soon. Do Stay tuned for further updates.