Tip:
Highlight text to annotate it
X
Jekyll...
about two months ago
we decided to
rewrite the
Flatterline blog
and before we were on Wordpress
and that was fine
worked for us, but
when we decided to do this rewrite we said
do we want to stick with WordPress?
is it too much? Is it
stuff we don't care about,
is it...PHP?
so after asking all those questions we said, what are the alternatives? So there are a few
ruby-based options
uh... out there,
you used one,
refinery cms
and radiant
and uh...
we found Jekyll
and what it is is
a static site
generator
it's not going to dynamically create pages
which can be a good thing
uh... but
you also have to know the limitations
as well
of what that's going to give you
it's ruby-based
it also has liquid tags so you
can do replacement
when you're generating
you can also access quite a few different things on the page
in those Ruby tags
there are built in filters
for Jekyll
and you get
basic liquid filters
YAML is also used
for both configuration
well...
global configuration
and page configuration
together combined
I think those are all awesome.
It's pretty basic how it all works.
It has a pretty simple directory structure; anything with an underscore in front of the
directory
is meant to be invisible to Jekyll
uh... in terms of what gets generated to the site.
so this is usually where you're going to put
the unrendered stuff
or any YAML data files or anything you don't want to be
displayed in your site
but is going to use in the generation phase.
It takes all those things, pulls them together
applies a template, so there's a layouts directory
where you can add as many of these things as you want specified
which what do you want used for
different pages, different posts.
It converts any markdown or textile...
that's all built in
converts it to HTML, then
runs liquid
converters
and all that gives you
your static HTML pages.
so it dumps all that into a directory
and that directory is then ready for deployment.
One of the things that I really like about Jekyll
its highly
configurable
right at the box with the things that I wanted,
from blogging
or content management system
but not with all the overhead like what WordPress gives you.
So some of the things you have are
global configuration options, things like
pagination
which you can specify the
number of items that show per page in the global configuration.
There's also
a way in the global configuration to exclude certain files, maybe they don't follow the same
format
like the underscore
file naming convention,
you would be able to exclude those from actually being generated.
Then you have
the per page in post configurations
and that's called YAML front matter
and that's just
a little chunk of YAML that sits on the top of every page or post
and you can essentially put whatever you want in there but there are some basic things
that
Jekyll uses automatically
like the layout
so in that YAML you might specify by layout default, layout post, layout page
whatever it happens to be
Or you can add your own key value
and you can use those however you want.
so one of the uses we used if for
was...
page meta data
because he's really into SEO,
so he said
"You need to have
...
unique titles for each page
and post.
You need to be specifying the description,
and you need an exerpt,
so we wrote that exerpt in the YAML front matter
and then...
when we had the layout for the posts,
or the index page, we were
actually able to grab the data from YAML
and output it.
The nice thing about all this is...it's Ruby,
so if you want to do something different...do it!
It's really easy to extend
it's really
easy to modify
so just like any other Ruby,
if you find that there's something in Jekyll, you don't like the way it does it...
just open up the class and modify the method or overwrite it.
So some of the built-in things are really nice,
like pagination,
a cystin permalink structure, which again
if you're worried about SEO,
that's something that you want to pay attention to,
to make sure that
you're outputting things that are human
and robot readable that are going to effect your ranking
for keywords that you're going for.
It's pretty cool that they have related
posts
extraction
in there as well.
That's one of the global configuration options to called LSI.
So if you set that to true,
you will get
a page.related posts
that you can use
when you are
on the
post layout
at the bottom of a post
you might loop through that
and output the related posts,
five related post, or something like that.
The way that works is
it goes through the content and analyzes the content.
But there's one caveat there...
If you have a lot of posts,
you definitely want to use
the GSL library.
So brew install GSL,
because otherwise,
it gets really, really slow
as it's trying to find relations
based on the data tha's in there.
But that's pretty easy to setup.
Syntax highlighting
because it was built by
Tom Preston-Werner
of GitHub.
They deal with code,
so one of the things that was very important to them
was built-ins syntax highlighting
and they use this for
their own blogs as well,
their personal blogs,
as well as the GitHub pages.
And then, of course, markdown
textile conversion,
so if you prefer to write in
html abstraction,
go for it. It's gonna generate it for you.
So all of those great things, plus a plugin architecture,
and this is where Jekyll starts to get really interesting.
is that
there are a lot of people writing plugins for it right now.
Since it's not new,
I think it's about two years old,
it's still in its infancy in terms
people using it,
it being more prolific on the web.
So you've got some plugins that are coming out
pretty recently that cover almost everything that you want for
either a site or a blog.
So things like
sitemaps,
if you have a company,
you can do team page generation, or portfolio generation if you're a
freelancer or
a web development company.
And those are things that we used
on our own blog and found very useful.
And
if you want to write your own plugins
all you have to do is put them in the
plugins directory
_plugins
and they're just Ruby files.
But let's say you needed a custom generator,
if you wanted,
say like that team page generation,
you had some
YAML data about each person that's in your company
and you wanted to go through all that
and generate
one overall team page
and then a single page for each person.
That's really really easy to do
by extending generator
so they have this all built-in. The only thing you need
is
to
implement the generate method,
and have it do whatever it is you want it to do, like reading all the YAML files and going through each one.
It's super easy.
It's the same thing with custom liquid tags.
If you want
more than what's available through Jekyll or through Liquid tags,
you can extend
liquid tags
as well
to find the render method,
and registry the tags so it's available for use on your pages.
So this one for instance,
if you had a liquid tag
you would say render time and then pass it in whatever arguments it needed.
Deployment is really easy
Heroku is what we use for our deployment, we're on the free instance,
and that works very well for us.
especially because its free.
But Github pages you can actually deploy directly from your GitHub repository
You can set that all up through
the GitHub
configuration admin section
where
they allow you to set up CNAME records
so you can actually have
your own domain name,
but it's the jekyll
site in the GitHub repository that's being served up.
There are people who have deployed directly to Amzona S3
because it's all static,
you're just serving up static pages.
If you have a site
that's getting hit a lot
that might be your best bet in terms of infinite scalability.
And then, of course,
anywhere that can serve static pages.
So I got asked this question...
by Ralph.
What about blog comments?
There's no such thing in Jekyll.
That's not
what it's for.
You'll see a lot of people that
have Jekyll blogs,
don't have comments or they just imbed
javascript
comment system like Disqus, Intense Debate or Facebook comments.
One caveat
here is
if you're thinking about SEO,
and comments, and links,
and how that content effects your page,
you might want to research
which is going to best support you.
I think right now,
Google is indexing Facebook,
but I'm not sure about the others.
And then there's the question...
What if I need something more than static?
I need something dynamic as well.
And that's where Sinatra comes in handy.
For instance let's say you have
your company site
and it's great that's it's static but you need a contact form.
So there are a couple of options you can do,
like embed a form from some third party site that
emailed you.
Or you can simply deploy
a Sinatra application along with your static site
and that sinatra app could accept a post
from your contact form,
and do whatever it is you needed...
store it somewhere,
say you store it in a
Mongo database,
or email it to you.
That's just one use.
The workflow is
something that I really liked,
because whenever I went into WordPress,
it change up the way I did things,
it wasn't really for developers.
Jekyll is for developers.
So if you're used to doing
...
a pull from the repository, make a change, commit it,
that's how you'd be blogging.
Or how you'd be changing content on your site.
It's exactly like you would with a normal repository.
We use Formen.
Foreman
is a
way of running
multiple
instances locally,
that's what it's made for.
So...
with this for the Flatterline site
we have Jekyll that needs to generate the static files
and...
they have
an executable that you can run
that watches your directories,
and then it re-generates each time there's a change.
So that's one of the things we run under Foreman.
Another one
we run is compass.
Compass watcher.
Compass is like
a CSS, SASS,
any of those CSS abstractions.
Compass has a watcher that
watches for changes to those files and generates them to CSS.
and the last thing we have is the Sinatra application.
So with formen,
what it expects is proc file
that sits in the root of your directory
and the proc file specifies
the name
and command you want
for each
instance that you want to run,
whether that's
a rails app, plus some other things,
or like what we have
Sinatra, Jekyll, Compass.
So foreman, if you don't know about it,
check it out, it's great for local development.
Heroku is also proc file aware.
So if you have a proc file locally,
that you're using with Foreman, and you
deploy
to Heroku,
it's going to pick that up
or run those commands you have in that proc file.
In that proc file,
if you needed two versions of rails,
you could say, web 1, web 2,
and kick it off with the different port numbers
but you just need to say Formen start
in order to start everything you have,
so you've probably run into this, if you have solar running,
and you've got this
search index
and you'll have multiple windows open
where you've got your
solar servers started
maybe you have a couple other services
in conjunction with that
this is an easy way for you to start all those things at once.
It combines all logfile output
and
instruments it with the name of
the process
so you can see
what's happening
across the all the processes.
In this case right here,
creating a new post
under the _post directory,
you notice
the format
of a post is date
followed by name.
That's something that's configurable in Jekyll
but in general
it's going to
create a directory for
each part of the date.
Inside of that would be a Jekyll
blogging presentation
at rubyAZ.html once it was generated.
On your site,
when someone navigates to that,
that would be the structure of the URL,
as defined in the configuration.
Add your content to the file,
add it to Git
commit it, push it, push it to Heroku.
This fits in well with how I normally work
on rails applications,
or Ruby apps in general.
I know it sounds weird,
but I actually had fun.
Couple gotchas we found.
The YAML front matter
is like an indicator
that its a special file and something things to be done
by Jekyll to that file.
If you don't have it in there,
it might get really frustrating, cause you'll wonder why this isn't working.
So if you don't have the YAML at the front,
even if it's just empty YAML,
like three dashes,
just
make sure that you
know that
it's not going to process this in a special way if you don't have that.
The pagination also, I tried to use markdown,
for a lot of the files
and uh...
that did not work.
It does not like markdown
or textile when you're working with pagination.
It will only work with HTML files.
The pre-generated files need to be HTML.
So the index of the blog
would need to be HTML
if you have pagination running.
One of the things I found bizarre coming from the Rails world
is that
there was no generator that i could run
when I installed Jekyll
that would create a base project.
Those are a couple things we found that were kinda weird.
And then, a few stats,
as of today,
there are about
four hundred sites on
the Jekyll wiki
documented
that are using Jekyll right now
to generate their site,
and most of those also link to their source.
So it's kinda
a movement amongst
Jekyll people
that they should just
open-source their blog as well.
So we have ours up there
if you ever want to take a look at it.
It's a great resource for
how someone did something on their site
cause you can just go to this
wiki sites
find the source link to someone's site,
peruse the source code and figure out how to do it.
Then there are about 50 plugins
and it's growing. Since the time we started
there have been
8 new plugins added.
A couple of those are ones we wrote.
On the Github repo itself,
there are about forty five hundred people watching
the repo.
That's quite a few people.
So I imagine the 400 documented sites is actually lower than
the number of people actually using it.
And there about
700 forks.
So people are taking it, modifying it
and contributing back
those changes
which of course, is great.
So the final question is...
how do I get started?
It's simple
gem install jekyll
hahaha (laughing)
Thanks for listening to me as I rant about Jekyll
and if you have any questions....?
It's looks pretty fast.
It is.
Have you heard of a site called
Blitz.io?
It mimicks a certain number of users hitting your site
you can configure it, both based on time
and number users.
We tried it out
the average
page load time was
thirteen milliseconds.
Very fast.
search engines like this
not to mention users,
it decreases frustration
of people having to wait for your site.
Can you show some code?
Absolutely.
This is the link to
our repository
You can see the underscored directories there.
Includes are like
additional files, think of them like
partials from rails.
There are other files that contain
code or snippets of code
that you may want to pull into multiple pages
you can do that from anywhere
Layouts, of course, we have
a bunch of different layouts for different pages
those are all HTML files
This is an include,
and that automatically looks in the include directory for a file of that name
Plugins...
these are all the ruby files.
This is one that we wrote
for creating a portolio index
then a page for each project.
The way this works is
there's a projects directory
that contains a bunch of YAML files.
If you go into one, it just looks like YAML.
We defined this ourselves,
that's how flexible it is.
So we defined, what are the things we want to know about
a project we worked on in the past.
When the portfolio generator
is run,
it reads in all these files, extracts the relevant information
and creates pages, then uses a layout
as specified in here.
Is this for blogging?
It is definitely for blogging.
The site stuff,
like the portfolio and team page,
those are things we had to add
The original intent was for blogging.
You have the team index,
which is a page,
but you also have a person,
which is a page,
and then finally,
this is the generator, to generate the team page,
and each member of the team,
but then we added this thing called an author tag,
which is a liquid tag
uses the same information as the team
but it creates the author bio
that might see at the bottom
of a blog post
It looks at
the author key
and then grabs names from that.
You may notice
non underscored
directories.
If it finds
a directory like that
and it's not specifically excluded
it just copies it intot the site directory
but it will handle any
markdown textile
generation that needs to happen
in those directories but the directory itself becomes
a new path.
Here's the proc file we were talking about.
So we do a Foreman start
and see it starts each of those things.
and now
three we have three processes,
they're telling you what they're doing.
Once you're done,
ctrl C stops all the processes.
Sinatra?
This is like a really basic
single file
Sinatra app.
There are other wasy you could
create Sinatra applications but
this one was
two hundred with white space
so not really large,
mostly redirects
so we didn't lose any pages
when we moved the blog.
When you render the files,
do you have to render the entire thing?
It renders the whole thing again.
So if you make just a small change,
you'll see
twenty-five files
if you changed the footer
it effects every single page.
The related posts
will
update with new
posts.
You can push directly to Heroku
and bypass Github
because Heroku gives you a repository.
I prefer to contribute to Githug because that's where
people are going to be able to see your code.
That's the social coding aspect.
I do it locally, so
As I run foreman
its generating it
the whole time
so when i write a check I have all
the freshly generated files.
It's all locally
You can look under their wiki
to see how to set it up for GitHub pages.
The wiki is pretty nice
Mojombo is the GitHub user
Given all the source that's available
you can figure out
what people are doing.
I think they are filtering it
through what GitHub pages need
If they don't need that,
they will wait to make a change.
Unless it's a submitted issue.
Have you heard of Octopress?
Yes, it's a step above Jekyll.
It's trying to create more like a wordpress type site
on top of Jekyll.
It's more than just he bare bones Jekyll.
but it's really
like a layer on top of Jekyll.
It really whittles down what you need.
I always felt WordPress was really big.
Had a lot of things I never looked at.
Anyone looking to create their new site with Jekyll?
Maybe some Octopress?
I might redo my personal blog in 2012.
Seems to make sense
for the way I work.
So you thought this was less work?
No...
(Laughing)
I thought it was more fun...
And I wanted to do something
which was Ruby based.
I've been really impressed with
what Jekyll does.
The workflow is what I normally do
day to day.
Now I just treat it like
any other product
When I write a blog post,
I don't want to have to deploy,
I just want to write a blog post.
(laughing)
This is the performance testing
Blitz.io