{"id":4842,"date":"2019-06-24T15:54:33","date_gmt":"2019-06-24T13:54:33","guid":{"rendered":"http:\/\/blog.via-internet.de\/?p=4842"},"modified":"2019-06-24T15:54:33","modified_gmt":"2019-06-24T13:54:33","slug":"build-a-jekyll-template-based-on-bootstrap-4","status":"publish","type":"post","link":"https:\/\/via-internet.de\/blog\/2019\/06\/24\/build-a-jekyll-template-based-on-bootstrap-4\/","title":{"rendered":"Jekyll | Build a Jekyll Template based on Bootstrap 4"},"content":{"rendered":"\n<h3 class=\"wp-block-heading\">TL;DR<\/h3>\n\n\n\n<div class=\"wp-block-columns has-2-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Combine two amazing open source tools: <a href=\"https:\/\/jekyllrb.com\/\">Jekyll<\/a> and <a href=\"https:\/\/getbootstrap.com\/\">Bootstrap<\/a>. The final template is <a href=\"https:\/\/github.com\/jekyll-toolbox\/theme-bootstrap-modern-business\">here<\/a>.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/blog.via-internet.de\/wp-content\/uploads\/2019\/06\/final_result-700x632.png\" alt=\"\" class=\"wp-image-4887\"\/><figcaption>Bootstrap Template and Jekyll: two powerful tools<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Start Point<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">While i want to learn about and work with bootstrap, i decided to build a Jekyll Template, so that i can build a dynamic website.<\/p>\n\n\n\n<div class=\"wp-block-columns has-2-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Asking Google for first inspiration leads me to <a href=\"https:\/\/www.danielsieger.com\/blog\/2019\/01\/12\/creating-jekyll-bootstrap-template.html\">this<\/a> wonderful  Blog entry:<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/blog.via-internet.de\/wp-content\/uploads\/2019\/06\/Bildschirmfoto-2019-06-24-um-14.55.32-700x435.png\" alt=\"\" class=\"wp-image-4845\"\/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Choose a Bootstrap Template<\/h3>\n\n\n\n<div class=\"wp-block-columns has-2-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Quite nice. So I decided to use one of the free templates from <a href=\"https:\/\/startbootstrap.com\/themes\/\">Start Bootstrap<\/a>: <a href=\"https:\/\/startbootstrap.com\/templates\/modern-business\/\">Modern Business<\/a><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/blog.via-internet.de\/wp-content\/uploads\/2019\/06\/Bildschirmfoto-2019-06-24-um-15.01.39-700x369.png\" alt=\"\" class=\"wp-image-4848\"\/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns has-2-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">When i downloaded the template from <a href=\"https:\/\/github.com\/BlackrockDigital\/startbootstrap-modern-business\">Github<\/a> and examine the content, i find out, that for each <em>component<\/em> (Pricing, Service, Contact), there is a corresponding HTML-file with all the content and all the formatting code:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>about.html<\/li><li>blog-home-1.html<\/li><li>blog-home-2.html<\/li><li>blog-post.html<\/li><li>contact.html<\/li><li>faq.html<\/li><li>full-width.html<\/li><li>index.html<\/li><li>portfolio-1-col.html<\/li><li>portfolio-2-col.html<\/li><li>portfolio-3-col.html<\/li><li>portfolio-4-col.html<\/li><li>portfolio-item.html<\/li><li>pricing.html<\/li><li>services.html<\/li><li>sidebar.html<\/li><\/ul>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1628\" height=\"1790\" src=\"https:\/\/i2.wp.com\/blog.via-internet.de\/wp-content\/uploads\/2019\/06\/Bildschirmfoto-2019-06-24-um-15.14.56.png?fit=700%2C770\" alt=\"\" class=\"wp-image-4855\" srcset=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2019\/06\/Bildschirmfoto-2019-06-24-um-15.14.56.png 1628w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2019\/06\/Bildschirmfoto-2019-06-24-um-15.14.56-273x300.png 273w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2019\/06\/Bildschirmfoto-2019-06-24-um-15.14.56-931x1024.png 931w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2019\/06\/Bildschirmfoto-2019-06-24-um-15.14.56-768x844.png 768w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2019\/06\/Bildschirmfoto-2019-06-24-um-15.14.56-1397x1536.png 1397w\" sizes=\"auto, (max-width: 1628px) 100vw, 1628px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\">The Plan<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">My plan was to separate the <em>presentation layer<\/em> (what you will see) from the <em>business layer<\/em> (what creates the content for the presentation layer).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To achieve this with Jekyll, i convert the Bootstrap pages to Jekyll include pages. The final result should look like this:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"> <\/p>\n\n\n\n<div class=\"wp-block-columns has-2-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><strong>The frontpage for the component<\/strong><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><strong>The jekyll include file with the component<\/strong><\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns has-2-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"md\" data-enlighter-theme=\"\" data-enlighter-highlight=\"7\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">---\nlayout: page\ntitle: Services\n---\n&lt;div class=\"container\">\n    &lt;h1 class=\"mt-4 mb-3\">{{ page.title }}&lt;\/h1>\n    {\n&lt;\/div><\/pre>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{\n\n&lt;h2>Services: {{ site.services.title }}&lt;\/h2>\n\n&lt;!-- Image Header -->\n&lt;img class=\"img-fluid rounded mb-4\" src=\"{{ images }}\/header.jpg\" alt=\"\">\n\n&lt;div class=\"row\">\n    {\n        &lt;div class=\"col-lg-4 mb-4\">\n            &lt;div class=\"card h-100\">\n                &lt;h4 class=\"card-header\">{{ item.title }}&lt;\/h4>\n                &lt;div class=\"card-body\">\n                    &lt;p class=\"card-text\">{{ item.text | markdownify }}&lt;\/p>\n                &lt;\/div>\n                &lt;div class=\"card-footer\">\n                    &lt;a href=\"#\" class=\"btn btn-primary\">Learn More&lt;\/a>\n                &lt;\/div>\n            &lt;\/div>\n        &lt;\/div>\n    {\n&lt;\/div><\/pre>\n<\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Next step was to convert every Bootstrap Template Page to a Jekyll Include File<\/p>\n\n\n\n<div class=\"wp-block-advgb-images-slider advgb-images-slider-block\"><div class=\"advgb-images-slider\"><div class=\"advgb-image-slider-item\"><img decoding=\"async\" src=\"http:\/\/blog.via-internet.de\/wp-content\/uploads\/2019\/06\/page-about.png\" class=\"advgb-image-slider-img\" alt=\"Slider image\" style=\"width:100%;height:auto\"><div class=\"advgb-image-slider-item-info\" style=\"justify-content:center;align-items:center\"><a class=\"advgb-image-slider-overlay\" target=\"_blank\" rel=\"noopener noreferrer\"><\/a><h4 class=\"advgb-image-slider-title\">About Page<\/h4><\/div><\/div><div class=\"advgb-image-slider-item\"><img decoding=\"async\" src=\"http:\/\/blog.via-internet.de\/wp-content\/uploads\/2019\/06\/page-faq.png\" class=\"advgb-image-slider-img\" alt=\"Slider image\" style=\"width:100%;height:auto\"><div class=\"advgb-image-slider-item-info\" style=\"justify-content:center;align-items:center\"><a class=\"advgb-image-slider-overlay\" target=\"_blank\" rel=\"noopener noreferrer\"><\/a><h4 class=\"advgb-image-slider-title\">FAQ Page<\/h4><\/div><\/div><div class=\"advgb-image-slider-item\"><img decoding=\"async\" src=\"http:\/\/blog.via-internet.de\/wp-content\/uploads\/2019\/06\/page-portfolio-1-col.png\" class=\"advgb-image-slider-img\" alt=\"Slider image\" style=\"width:100%;height:auto\"><div class=\"advgb-image-slider-item-info\" style=\"justify-content:center;align-items:center\"><a class=\"advgb-image-slider-overlay\" target=\"_blank\" rel=\"noopener noreferrer\"><\/a><h4 class=\"advgb-image-slider-title\">Portfolio Page with 1 Column<\/h4><\/div><\/div><div class=\"advgb-image-slider-item\"><img decoding=\"async\" src=\"http:\/\/blog.via-internet.de\/wp-content\/uploads\/2019\/06\/page-portfolio-2-col.png\" class=\"advgb-image-slider-img\" alt=\"Slider image\" style=\"width:100%;height:auto\"><div class=\"advgb-image-slider-item-info\" style=\"justify-content:center;align-items:center\"><a class=\"advgb-image-slider-overlay\" target=\"_blank\" rel=\"noopener noreferrer\"><\/a><h4 class=\"advgb-image-slider-title\">Portfolio Page with 2 Column<\/h4><\/div><\/div><div class=\"advgb-image-slider-item\"><img decoding=\"async\" src=\"http:\/\/blog.via-internet.de\/wp-content\/uploads\/2019\/06\/page-services.png\" class=\"advgb-image-slider-img\" alt=\"Slider image\" style=\"width:100%;height:auto\"><div class=\"advgb-image-slider-item-info\" style=\"justify-content:center;align-items:center\"><a class=\"advgb-image-slider-overlay\" target=\"_blank\" rel=\"noopener noreferrer\"><\/a><h4 class=\"advgb-image-slider-title\">Services Page<\/h4><\/div><\/div><figure><img decoding=\"async\" src=\"http:\/\/blog.via-internet.de\/wp-content\/uploads\/2019\/06\/page-contact.png\" class=\"advgb-image-slider-img\" alt=\"Slider image\" style=\"width:100%;height:auto\"><\/figure><div class=\"advgb-image-slider-item\"><div class=\"advgb-image-slider-item-info\" style=\"justify-content:center;align-items:center\"><a class=\"advgb-image-slider-overlay\" target=\"_blank\" rel=\"noopener noreferrer\"><\/a><\/div><\/div><div class=\"advgb-image-slider-item\"><img decoding=\"async\" src=\"http:\/\/blog.via-internet.de\/wp-content\/uploads\/2019\/06\/page-pricing.png\" class=\"advgb-image-slider-img\" alt=\"Slider image\" style=\"width:100%;height:auto\"><div class=\"advgb-image-slider-item-info\" style=\"justify-content:center;align-items:center\"><a class=\"advgb-image-slider-overlay\" target=\"_blank\" rel=\"noopener noreferrer\"><\/a><h4 class=\"advgb-image-slider-title\">Pricing Page<\/h4><\/div><\/div><\/div><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">The main challenge in separating the presentation from the business layer was: <em>where to place the data to be displayed?<\/em><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Depending on the type of the component, i choose three different solutions:<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>Place the data in the corresponding include file of the component<\/li><li>Place the date in the page, which calls the corresponding include file of the component<\/li><li>Place the data in a Jekyll collection file<\/li><\/ol>\n\n\n\n<h4 class=\"wp-block-heading\">Data in  corresponding include file of the component<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">I used this approach for components, which are used only once on the website and have a mostly static content, e.g. the FAQ Page<\/p>\n\n\n\n<div class=\"wp-block-columns has-2-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><strong>The component page<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1644\" height=\"1004\" src=\"https:\/\/i0.wp.com\/blog.via-internet.de\/wp-content\/uploads\/2019\/06\/Bildschirmfoto-2019-06-24-um-15.49.31.png?fit=700%2C427\" alt=\"\" class=\"wp-image-4867\" srcset=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2019\/06\/Bildschirmfoto-2019-06-24-um-15.49.31.png 1644w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2019\/06\/Bildschirmfoto-2019-06-24-um-15.49.31-300x183.png 300w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2019\/06\/Bildschirmfoto-2019-06-24-um-15.49.31-1024x625.png 1024w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2019\/06\/Bildschirmfoto-2019-06-24-um-15.49.31-768x469.png 768w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2019\/06\/Bildschirmfoto-2019-06-24-um-15.49.31-1536x938.png 1536w\" sizes=\"auto, (max-width: 1644px) 100vw, 1644px\" \/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><strong>The frontend page<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1072\" height=\"464\" src=\"https:\/\/i1.wp.com\/blog.via-internet.de\/wp-content\/uploads\/2019\/06\/Bildschirmfoto-2019-06-24-um-15.49.02.png?fit=700%2C303\" alt=\"\" class=\"wp-image-4868\" srcset=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2019\/06\/Bildschirmfoto-2019-06-24-um-15.49.02.png 1072w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2019\/06\/Bildschirmfoto-2019-06-24-um-15.49.02-300x130.png 300w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2019\/06\/Bildschirmfoto-2019-06-24-um-15.49.02-1024x443.png 1024w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2019\/06\/Bildschirmfoto-2019-06-24-um-15.49.02-768x332.png 768w\" sizes=\"auto, (max-width: 1072px) 100vw, 1072px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Date in the page, which calls the corresponding include file of the component<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">I used this approach for components, which are used more than once on the website, e.g. a Blog Post<\/p>\n\n\n\n<div class=\"wp-block-columns has-2-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><strong>The component page<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1640\" height=\"1316\" src=\"https:\/\/i0.wp.com\/blog.via-internet.de\/wp-content\/uploads\/2019\/06\/Bildschirmfoto-2019-06-24-um-15.52.45.png?fit=700%2C562\" alt=\"\" class=\"wp-image-4869\" srcset=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2019\/06\/Bildschirmfoto-2019-06-24-um-15.52.45.png 1640w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2019\/06\/Bildschirmfoto-2019-06-24-um-15.52.45-300x241.png 300w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2019\/06\/Bildschirmfoto-2019-06-24-um-15.52.45-1024x822.png 1024w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2019\/06\/Bildschirmfoto-2019-06-24-um-15.52.45-768x616.png 768w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2019\/06\/Bildschirmfoto-2019-06-24-um-15.52.45-1536x1233.png 1536w\" sizes=\"auto, (max-width: 1640px) 100vw, 1640px\" \/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><strong>The frontend page<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1652\" height=\"650\" src=\"https:\/\/i1.wp.com\/blog.via-internet.de\/wp-content\/uploads\/2019\/06\/Bildschirmfoto-2019-06-24-um-15.53.02.png?fit=700%2C275\" alt=\"\" class=\"wp-image-4870\" srcset=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2019\/06\/Bildschirmfoto-2019-06-24-um-15.53.02.png 1652w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2019\/06\/Bildschirmfoto-2019-06-24-um-15.53.02-300x118.png 300w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2019\/06\/Bildschirmfoto-2019-06-24-um-15.53.02-1024x403.png 1024w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2019\/06\/Bildschirmfoto-2019-06-24-um-15.53.02-768x302.png 768w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2019\/06\/Bildschirmfoto-2019-06-24-um-15.53.02-1536x604.png 1536w\" sizes=\"auto, (max-width: 1652px) 100vw, 1652px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Data in a Jekyll collection file<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">I used this approach for components, which are used only once on the website, but needs more configuration information, e.g. the Services- or Portfolio Page.<\/p>\n\n\n\n<div class=\"wp-block-columns has-2-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/blog.via-internet.de\/wp-content\/uploads\/2019\/06\/Bildschirmfoto-2019-06-24-um-16.02.38-700x454.png\" alt=\"\" class=\"wp-image-4877\"\/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/blog.via-internet.de\/wp-content\/uploads\/2019\/06\/Bildschirmfoto-2019-06-24-um-16.02.54-700x297.png\" alt=\"\" class=\"wp-image-4875\"\/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">This step needs an additional configuration task: create the Jekyll Collections.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/blog.via-internet.de\/wp-content\/uploads\/2019\/06\/Bildschirmfoto-2019-06-24-um-16.03.24-700x175.png\" alt=\"\" class=\"wp-image-4876\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Jekyll <a href=\"https:\/\/jekyllrb.com\/docs\/collections\/\">collections<\/a> are a great way to group related content like members of a team or talks at a conference.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To use a Collection you first need to define it in your <a href=\"https:\/\/github.com\/jekyll-toolbox\/theme-bootstrap-modern-business\/blob\/master\/_config.yml\">_config.yml<\/a>.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">#\ncollections_dir: collections # folder, where collections files are stored\ncollections:\n  services:\n    title: \"Services\"\n    output: true # store output files for each item under the collections folder<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Then, you have to create the collection files, for each item in your collection one file:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/blog.via-internet.de\/wp-content\/uploads\/2019\/06\/Bildschirmfoto-2019-06-24-um-16.03.24-700x175.png\" alt=\"\" class=\"wp-image-4876\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">These files look like this:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">---\nimg: 1.jpg\ntitle: Development\nsubtitle: \nfooter: \ntext: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus aut mollitia eum ipsum fugiat odio officiis odit.\n---<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">And the data of this files can be accessed in the Jekyll include file with this code fragment:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>all items of the collection: <code>site.services, {\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"1,4,6\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{\n    &lt;div class=\"col-lg-4 mb-4\">\n        &lt;div class=\"card h-100\">\n            &lt;h4 class=\"card-header\">{{ item.title }}&lt;\/h4>\n            &lt;div class=\"card-body\">\n                &lt;p class=\"card-text\">{{ item.text | markdownify }}&lt;\/p>\n            &lt;\/div>\n            &lt;div class=\"card-footer\">\n                &lt;a href=\"#\" class=\"btn btn-primary\">Learn More&lt;\/a>\n            &lt;\/div>\n        &lt;\/div>\n    &lt;\/div>\n{\n\n\n\n<h3 class=\"wp-block-heading\">The final result<\/h3>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/blog.via-internet.de\/wp-content\/uploads\/2019\/06\/final_result-700x632.png\" alt=\"\" class=\"wp-image-4887\"\/><figcaption>Bootstrap Template and Jekyll: two powerful tools<\/figcaption><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>TL;DR Combine two amazing open source tools: Jekyll and Bootstrap. The final template is here. Start Point While i want to learn about and work with bootstrap, i decided to build a Jekyll Template, so that i can build a dynamic website. Asking Google for first inspiration leads me to this wonderful Blog entry: Choose a Bootstrap Template Quite nice. So I decided to use one of the free templates from Start Bootstrap: Modern Business When i downloaded the template from Github and examine the content, i find out, that for each component (Pricing, Service, Contact), there is a corresponding HTML-file [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":4797,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_crdt_document":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[10],"tags":[],"class_list":["post-4842","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-bootstrap"],"jetpack_featured_media_url":"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2019\/06\/logo-jekyll.png","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/posts\/4842","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/comments?post=4842"}],"version-history":[{"count":0,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/posts\/4842\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/media\/4797"}],"wp:attachment":[{"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/media?parent=4842"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/categories?post=4842"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/tags?post=4842"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}