Turns a bunch of files e.g.
into ready-to-serve, ready-to-use (static) web sites.
Turn text such as:
_posts/2015-09-30-what-s-javascript.md
:
## What's Javascript?
JavaScript (/ˈdʒɑːvəˌskrɪpt/) is a high level, dynamic, untyped, and interpreted
programming language. It has been standardized in the ECMAScript language specification.
Alongside HTML and CSS, it is one of the three essential technologies
of World Wide Web content production; the majority of websites employ it and
it is supported by all modern web browsers without plug-ins.
Using some “magic” into a ready-to-serve blog (static site).
Just kidding ;-) not yet another awesome blog; let’s try something new e.g. let’s build a single-page book (static site).
Turns text such as:
01.md
:
## Story of the Door
Mr. Utterson the lawyer was a man of a rugged countenance, that was
never lighted by a smile; cold, scanty and embarrassed in
discourse; backward in sentiment; lean, long, dusty, dreary, and
yet somehow lovable. At friendly meetings, and when the wine was to
his taste, something eminently human beaconed from his eye
...
02.md
:
## Search for Mr. Hyde
That evening Mr. Utterson came home to his bachelor house in sombre
spirits and sat down to dinner without relish. It was his custom of
a Sunday, when this meal was over, to sit close by the fire, a
volume of some dry divinity on his reading-desk, until the clock of
the neighbouring church rang out the hour of twelve, when he would
go soberly and gratefully to bed. On this night, however, as soon as
...
(Source: worldclassics/dr-jekyll-and-mr-hyde
)
Add your chapters to the classics books theme (static site). For example:
├── _config.yml # book configuration
├── _chapters # sample chapters
| ├── 01.md
| ├── 02.md
| ├── ...
| └── 10.md
├── _layouts
| └── default.html # master layout template
├── css
| ├── _settings.scss # style settings (e.g. variables)
| └── style.scss # master style page
└── index.html # all-in-one page book template
Using:
$ jekyll build
Will result in an all-in-one single page book (static site):
└── _site # output build folder; site gets generated here
├── css
| └── style.css # styles for pages (copied 1:1 as is)
└── index.html # all-in-one book page
Example:
(Live Demo: drjekyllthemes.github.io/jekyll-book-theme
)
Strange Case of Dr Jekyll and Mr Hyde by Robert Louis Stevenson
Q: Last Update In (Static Since) __ ?
The Biggies (PHP Rules!)
On your live production site requires
Fast, Faster, Fastest
Simple, Simpler, Simplest
Pretty, Prettier, Prettiest
Bonus: Secure - invite all the hackers - basically unbreakable!
There are only static files on your server. If an attacker hacks your server, there’s “just” some “temporary” data loss. To recover - Regenerate your site on your local machine. - Upload it again to the server or shutdown the old “hacked” server and use a new server and you’re back in action.
Back to the future. Build sites like it’s 1995.
Q: Any Vim Users? Anything like that in Vim?
Q: Written by ____ ?
Q: Last Update in _____ ?
Started in 2015 by Kyle Mathews - Gatsby is - surprise, surprise - (yet another) static site generator in JavaScript that turns plain text into dynamic blogs and sites using Webpack modules and React.js components and routing machinery.
Find out more @ gatsbyjs/gatsby.
The Biggies
Q: What static site generators (in JavaScript) do you use? Anyone?
What’s an anchor link?
Let’s you (deep) link a heading or paragraph inside a page.
Example - link to the “License” section - use: README.md#license
Example - link to “Automate, Automate, Automate” section - use: README.md#automate-automate-automate
Step 1: Add id attribute to heading
Before
<h2>Search for Mr. Hyde</h2>
After
<h2 id="search-for-mr-hyde">Search for Mr. Hyde</h2>
Step 2: Use the anchor
Now you can use #search-for-mr-hyde
to link to
the “Search for Mr. Hyde” heading.
That’s it.
What’s new?
#
Step 1: Add id attribute and a “permalink” marker to heading
Before
<h2>Search for Mr. Hyde</h2>
After
<h2 id="search-for-mr-hyde">
Search for Mr. Hyde
<a href="#search-for-mr-hyde">#</a>
</h2>
That’s it.
What’s new?
Step 1: Add id attribute and a “permalink” marker to heading
Before
<h2>Search for Mr. Hyde</h2>
After
<h2 id="search-for-mr-hyde">
Search for Mr. Hyde
<a href="#search-for-mr-hyde" class="header-link">
<i class="fa fa-link"></i>
</a>
</h2>
Step 2: Add some CSS (styling)
/* Let's use font awesome */
@font-face {
font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.eot?v=4.1.0');
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.1.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=4.1.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.1.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.1.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
.fa {
display: inline-block;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.fa-link:before {
content: "\f0c1";
}
.header-link {
position: relative;
left: 0.5em;
opacity: 0;
font-size: 0.8em;
-webkit-transition: opacity 0.2s ease-in-out 0.1s;
-moz-transition: opacity 0.2s ease-in-out 0.1s;
-ms-transition: opacity 0.2s ease-in-out 0.1s;
}
h2:hover .header-link {
opacity: 1;
}
What’s new?
Turn
<h2 id="search-for-mr-hyde">Search for Mr. Hyde</h2>
into
<h2 id="search-for-mr-hyde">
Search for Mr. Hyde
<a href="#search-for-mr-hyde" class="header-link">
<i class="fa fa-link"></i>
</a>
</h2>
on page load e.g.:
$(function() {
return $("h2").each( function(i, el) {
var $el, icon, id;
$el = $(el);
id = $el.attr('id');
icon = '<i class="fa fa-link"></i>';
$el.append($("<a />").addClass("header-link").attr("href", "#" + id).html(icon));
}
});
});
What’s new?
What’s Anchor.js?
<script src="anchor.js"></script>
anchors.add('h1');
That’s it.
placement
right
(default) => right appends the anchor to the end of the elementleft
=> left places it to the left, in the marginvisible
hover
(default) => hover displays the anchor when hovering over the elementalways
=> always will always display the anchor linkicon
class
Example 1:
anchors.options.visible = 'always';
anchors.add('#post h1, #post h2, #post h3');
Example 2:
anchors.options = {
placement: 'left',
visible: 'always',
icon: '¶'
};
anchors.add('.story > p');
October
Late October. “Joint” meetup with Vienna.rb at Sektor 5.
“Dr. Jekyll and Mr. Hyde” -
All about drjekyll/drj
- the missing static site package manager
and mrhyde/mrh
- the missing static site configuration script wizard.
November
First “regular” meetup in November at Sektor 5.
Talks, talks, talks!
Present about a great JavaScript static site generator, tool, or practice, for example.