title: Getting Started tagline: Your Web in a Day description: Modern Jekyll
Web site in a Day
tags: [ Kickstarter, Introduction, Web, Day, Jekyll
] index: [] categories: [ pages ]
permalink: /pages/public/start/kickstarter/web_in_a_day/getting_started/ regenerate: false
resources: [ lightbox, carousel ] resource_options:
- toccer: collapseDepth: 2
// Enable the Liquid Preprocessor // :page-liquid:
// Set other global page attributes here // ——————————————————————-
{% comment %} Liquid procedures ————————————————————— {% endcomment %} {% capture set_env_entry_document %}themes/{{site.template.name}}/procedures/global/set_env_entry_document.proc{%endcapture%}
// NOTE: Initialize entry document paths // {% include {{set_env_entry_document}} init_folders=all %}
// Load tags and urls // include::{includedir}/attributes.asciidoc include::{includedir}/attributes.asciidoc
// Additional Asciidoc page attributes goes here //
*J1 Web in a Day* is the first in a series of tutorials to learn how to create modern web sites using Jekyll
. This Kickstart focuses on the basics of Jekyll
and J1
Template which all people needs to know for a successful way to Jekyll
.
It is highly recommended to read and work on this tutorial by everyone - independly from what level of knowledge they begin. Jekyll
is different in compare to classic Content Management Systems (CMS) like Joomla, Wordpress or Drupal. No surprise: J1
Template is different as well.
To not waste time, get through the turorial and find out what is the *Jekyll Way*. And if this the way you want to go.
Have a good time, a good day learning Jekyll
.
Web in a Day¶ ↑
It sounds much, spending a whole day to get Jekyll
to know - yes, it is much. You'll find a lot of Blog articles like *Jekyll in 15 minutes*. But what can be learned in 15 minutes?
To be fair, most of these blogs are intended to help *installing Jekyll* and get the very first steps managed. If you run Jekyll
out of the box, the resulting web site (from the build-in theme scaffold) might somewhat disillusioned. You'll get a very simple site created based on Jekyll's theme minima.
And it is what the name of theme suggets.
:theme-minima-data: “pages/kickstarter/web_in_a_day/jekyll-minima-theme.png, Web site based on Jekyll's Theme minima”
.Web site based on Jekyll's Theme minima lightbox::pages/kickstarter/web_in_a_day/jekyll-minima-theme.png[ 700, {theme-minima-data} ]
For good reasons, the default theme for a base Jekyll
installation is minima. Jekyll
is the core engine to create Webs but not a tool set to design a site. Not that much different to the CMS mentioned earlier as they provide very basic templates from a base installation as well.
To have fun exploring Jekyll
a whole day, a template is needed that give a good impression what can Jekyll
do and what you can expect what is achiveable by an engine creating so-called static web sites.
:theme-uno-data: “pages/kickstarter/web_in_a_day/j1-template-theme.png, J1
Theme Uno” .J1 Theme Uno lightbox::theme-uno[ 700, {theme-uno-data} ]
J1
QuickStart¶ ↑
For a better start, J1
QuickStart can be used to install all the software components needed for Jekyll
on Windows. It's done in *15 minutes*. And J1
Template pre-configured for your one-day-journey to Jekyll
as well.
:quickstart-windows-data: “pages/kickstarter/web_in_a_day/j1-quickstart-windows.png, J1
Quickstart for Windows” .J1 Quickstart for Windows lightbox::quickstart-windows[ 700, {quickstart-windows-data} ]
- TIP
-
¶ ↑
If have'nt done already, you can download the
J1
QuickStart package from the {quickstart-download}[J1 download page].J1
QuickStart for Windows supports all modern Windows versions from Windows 7 and above.QuickStart versions for Linux and MacOS are being developed but not available, yet.
For the time being, MacOS users can use e.g. homebrew-home-en as a package manager to install OpenSource software on Apple PC's. Install and brew the current versions of Ruby and Python needed to run the latest version of
Jekyll
(at the time of writing version 3.3.0) and you'done.Linux users, a current Linux distribution assumed, can use
J1
Template out of the box. Follow the installation instructions from the {quickstart-download}[J1 download page] described with chapter *InstallJ1
Template only* and you're done.¶ ↑
Install
J1
QuickStart¶ ↑++++
<div id="quickstart-setup-oneslide" class="owl-carousel margin-bottom-20"></div>
++++
Initialize
J1
environment¶ ↑++++
<div id="quickstart-initialize-oneslide" class="owl-carousel margin-bottom-20"></div>
++++
J1
Page Layout¶ ↑:j1-page-layout-data: “pages/kickstarter/web_in_a_day/j1_layout.png,
J1
Page Layout” .J1 Page Layout lightbox::theme-uno[ 700, {j1-page-layout-data} ]Layout Inheritance¶ ↑
:layout-inheritance-data: “pages/kickstarter/web_in_a_day/layout_inheritance.png, Layout Inheritance” .Layout Inheritance lightbox::layout-inheritance[ 700, {layout-inheritance-data} ]
Content Inheritance¶ ↑
:content-inheritance-data: “pages/kickstarter/web_in_a_day/content_inheritance.png, Content Inheritance” .Content Inheritance lightbox::content-inheritance[ 700, {content-inheritance-data} ]
Lane Inheritance¶ ↑
:lane-inheritance-data: “pages/kickstarter/web_in_a_day/lane_inheritance.png,
J1
Lane Inheritance” .J1 Lane Inheritance lightbox::lane-inheritance[ 700, {lane-inheritance-data} ]