Search code examples
githubjekyllgithub-pagesblogsposts

Creating two blogs on same website (Jekyll GitHub) without altering layout/formatting


I have recently tried creating a website using the Jekyll GitHub template here. One major alteration I hope to make to this template is to have two "blogs" in the format provided in the Blog tab of that template specifically shown here.

I (sort of) successfully created two blogs in my website and named the associated tabs (Media) and (Blog). I achieved this by reorganizing the file structure to have a "media" folder and a "blog" folder separately that each contain a _posts folder and index.html file. Now, when I add .md files in the _posts folder, these posts seem to get added to the correct tab (Media or Blog).

Even though that functionality works, both the Blog and Media tab lost their aesthetics compared to the style in the original template blog. Namely, 1) the banner image at the top is now gone; 2) the text formatting with the title in one line followed by the date in the "pretty" format (gray colored and in the format 29 Aug 2016) is now in a less-attractive bullet format with date first and in the format Aug 29, 2016; 3) the introductory excerpt text (in the example: "A pot still is a type of still used in distilling spirits such as whisky or brandy. Heat is applied directly to the pot containing the wash (for whisky) or wine (for brandy).") is now gone.

It is unclear to me why my separation of the _posts folder into two separate folders seems to cause these unwanted layout side effects. Since all three of these layout issues changed at once, I am assuming they can all be solved in the same solution. Whether or not that is true, any advice on how to solve these layout issues could be very helpful. Thank you for sharing any ideas!


Solution

  • You've removed the posts collection from your _config.yml which was setting the default feature_image for all posts. Unless you add that back in or include the overrides in each individual post it will not display the header (it may or may not also affect the rest of the styles):

    collections:
      media:
        title: Media # Needed for Siteleaf
        output: true
        description: "Recent discussions with the media." # The post list page content
        feature_text: |
          Sharing our motivations and  
          opinions with the media.
        feature_image: "https://picsum.photos/2560/600?image=866"
    

    You're not actually using a media collection in either blog/index.html nor media/index.html, you're using the post.categories for filtering in the end, which will still causes some weird pagination once you start getting things rolling.

    You may want to look at using the separate collections and then pre-building your site using paginator v2 (https://github.com/sverrirs/jekyll-paginate-v2/blob/master/README-GENERATOR.md) which will allow for pagination of different collections.

    Edit 2020-01-23

    Taking a new look at your repository, you still only have one (posts) collection. Therefore the logic for reading feature_* is being shared. If you look at the include site_feature.html you can see how the feature_image is being parsed out of the collections.

    {% assign collectiondata = site.collections | where: "label", page.collectionpage | first %}
    

    Which in your case is why Blog and Media both have the second image ?image=213. Your blog.html and media.html still have the front matter collectionpage: post.

    I still think you're going down a slippery slope which will result in things not working exactly as you want them once you get more and more posts by doing it this way.