A more "advanced" starter theme, see the Jekyll Starter Theme V1 for a more "basic" version. The V2 includes:
- Shared (common) template/page building blocks using
_includese.g.head.html,header.html,footer.htmletc. - CSS preprocessing using Sass/SCSS e.g.
_settings.scsswith$link-coloretc. - Nav(igation) menu (auto-)built using a configuration / data block
- And more
├── _config.yml # site configuration
├── _includes # shared (common) building blocks
| ├── head.html # page head e.g. meta, stylesheet, etc.
| ├── header.html # header e.g. title, nav menu, etc.
| └── footer.html # footer
├── _layouts
| └── default.html # master layout template
├── css
| ├── _settings.scss # style settings/variables e.g. $link-color, etc.
| └── style.scss # styles in sass/scss
├── three.html # another sample page (in hypertext markup e.g. html)
├── two.md # another sample page (in markdown e.g. md)
└── index.md # index (start) sample page (in markdown e.g. md)
Becomes
└── _site # output build folder; site gets generated here
├── css
| └── style.css # styles for pages (preprocessed with sass/scsss)
├── three.html # another sample page
├── two.html # another sample page
└── index.html # index (start) sample page
Step 1: Configure the CSS Preprocessing using Sass/SCSS. Add in _config.yml:
sass:
sass_dir: css
style: expandedStep 2: Add a new css/_settings.scss partial (where you can add your global style settings) e. g.:
$font-family: Helvetica,Arial,sans-serif;
$link-color: navy;Step 3: Add the required front matter to css/style.scss and include (import) the settings e.g.:
---
### turn on preprocessing by starting with required front matter block
---
@import 'settings';
body {
font-family: $font-family;
}
a, a:visited {
color: $link-color;
text-decoration: none;
}
...
Use shared building blocks to split-up the all-in-one default master layout page e.g.:
<!DOCTYPE html>
<html>
{% include head.html %}
<body>
{% include header.html %}
<div id="content">
{{ content }}
</div>
{% include footer.html %}
</body>
</html>In the new _includes folder, add the new building blocks e.g. head.html, header.html,
and footer.html.
Instead of "hard-coding" the navigation menu e.g.:
<div id="nav">
<a href="{{ '/index.html' | relative_url }}">Welcome</a>
<a href="{{ '/two.html' | relative_url }}">Page Two</a>
<a href="{{ '/three.html' | relative_url }}">Page Three</a>
<a href="http://groups.google.com/group/wwwmake">Questions? Comments?</a>
<a href="https://github.com/henrythemes/jekyll-starter-theme">About</a>
</div>Let's use a configuration / data block e.g.:
nav:
- { title: 'Welcome', href: '/' }
- { title: 'Page Two', href: '/two.html' }
- { title: 'Page Three', href: '/three.html' }
- { title: 'Questions? Comments?', href: 'http://groups.google.com/group/wwwmake' }
- { title: 'About', href: 'https://github.com/henrythemes/jekyll-starter-theme-v2' }And (auto-)build the navigation menu using a macro e.g.:
<div id="nav">
{% for item in site.nav %}
<a href="{{ item.href | relative_url }}">{{ item.title }}</a>
{% endfor %}
</div>See a live demo @ henrythemes.github.io/jekyll-starter-theme-v2 »
See the Dr. Jekyll's Themes directory.
See the Mr. Hyde's Scripts library.
License
The starter theme is dedicated to the public domain. Use it as you please with no restrictions whatsoever.
Questions? Comments?
Post them to the wwwmake forum. Thanks!