WEBVTT

00:00:00.080 --> 00:00:03.120
Adolfo: Okay, excellent.

00:00:03.120 --> 00:00:06.960
Hello, everyone and

00:00:06.960 --> 00:00:10.080
nice meeting you. Let me

00:00:10.080 --> 00:00:12.400
thank the the organizer for all the

00:00:12.400 --> 00:00:13.920
organization and all the work they are

00:00:13.920 --> 00:00:15.200
doing to support us.

00:00:15.200 --> 00:00:18.400
My name is Adolfo Villafiorita.

00:00:18.400 --> 00:00:20.733
I'm teaching at the University of
Trento.

00:00:20.733 --> 00:00:24.480
I will shortly be working at

00:00:24.480 --> 00:00:26.240
shared.tech, which is

00:00:26.240 --> 00:00:29.359
a non-profit organization developing

00:00:29.359 --> 00:00:30.530
applications to

00:00:32.399 --> 00:00:35.680
recover surplus food.

00:00:35.680 --> 00:00:38.600
The reason of the talk today

00:00:38.600 --> 00:00:40.079
and the reason I'm here today

00:00:40.079 --> 00:00:42.719
is to talk about my experience in moving

00:00:42.719 --> 00:00:47.200
from Jekyll static website generator to
Org Mode.

00:00:47.200 --> 00:00:50.700
The reason I moved to Org Mode

00:00:50.700 --> 00:00:53.100
is to have better support for

00:00:53.100 --> 00:00:56.800
literate programming on the websites

00:00:56.800 --> 00:00:58.399
at the University of Trento, where we

00:00:58.399 --> 00:01:00.480
make available the content for the

00:01:00.480 --> 00:01:04.720
the students.

00:01:04.720 --> 00:01:08.900
First of all, what is a static
website generator?

00:01:08.900 --> 00:01:10.080
It is basically a tool which

00:01:10.080 --> 00:01:11.360
allows you to

00:01:11.360 --> 00:01:15.360
generate HTML files out of text files

00:01:15.360 --> 00:01:17.439
containing basically two types of

00:01:17.439 --> 00:01:20.700
information: metadata and content.

00:01:20.700 --> 00:01:23.119
Metadata is a

00:01:23.119 --> 00:01:26.159
set of key pairs describing the

00:01:26.159 --> 00:01:28.560
content of the file, such as the title,

00:01:28.560 --> 00:01:31.733
author, tags, and so on and so forth.

00:01:31.733 --> 00:01:34.560
The content is what you actually
want to

00:01:34.560 --> 00:01:37.040
get published on the Internet in

00:01:37.040 --> 00:01:38.880
the HTML file.

00:01:38.880 --> 00:01:41.439
Usually the content is written in

00:01:41.439 --> 00:01:45.800
some kind of markup language,

00:01:45.800 --> 00:01:49.759
such as Markdown or possibly

00:01:49.759 --> 00:01:53.200
Org Mode. Jekyll is a very

00:01:53.200 --> 00:01:57.900
popular static website generator.

00:01:57.900 --> 00:01:59.840
It is written in Ruby.

00:01:59.840 --> 00:02:03.280
What it does: it systematically

00:02:03.280 --> 00:02:06.840
transforms all the input files

00:02:06.840 --> 00:02:09.440
by making the content into

00:02:09.440 --> 00:02:11.599
HTML and systematically applying a

00:02:11.599 --> 00:02:14.000
template in order to generate the

00:02:14.000 --> 00:02:17.120
HTML files, which you can then deploy

00:02:17.120 --> 00:02:19.840
on your server of choice to make them

00:02:19.840 --> 00:02:22.160
available on the Internet.

00:02:22.160 --> 00:02:26.160
One of the features most--

00:02:26.160 --> 00:02:27.500
well, I would say all

00:02:27.500 --> 00:02:30.239
static website generators have

00:02:30.239 --> 00:02:32.560
is that of being able to

00:02:32.560 --> 00:02:34.879
collect the metadata information

00:02:34.879 --> 00:02:38.400
of the files being part of

00:02:38.400 --> 00:02:39.440
your project.

00:02:39.440 --> 00:02:45.280
The reason they do that is because

00:02:45.280 --> 00:02:47.840
you sometimes want to generate pages

00:02:47.840 --> 00:02:49.280
based on the content

00:02:49.280 --> 00:02:53.200
of your projects,

00:02:53.200 --> 00:02:56.239
such as, for instance, the list of

00:02:56.239 --> 00:02:59.040
posts you have recently published, or

00:02:59.040 --> 00:03:00.400
maybe the list of tags

00:03:00.400 --> 00:03:03.840
you have defined for your post,

00:03:03.840 --> 00:03:07.280
and so on and so forth.

00:03:07.280 --> 00:03:09.760
Jekyll gives the possibility of

00:03:09.760 --> 00:03:12.400
generating this kind of dynamic

00:03:12.400 --> 00:03:14.400
content by using Liquid,

00:03:14.400 --> 00:03:18.800
which is a templating language which

00:03:18.800 --> 00:03:21.840
looks like this.

00:03:21.840 --> 00:03:24.879
So basically, you have all the

00:03:24.879 --> 00:03:26.879
constructs you can

00:03:26.879 --> 00:03:28.800
expect in a programming language.

00:03:28.800 --> 00:03:29.920
This, for instance,

00:03:29.920 --> 00:03:33.360
is a for cycle which

00:03:33.360 --> 00:03:37.440
iterates over all the posts or the

00:03:37.440 --> 00:03:39.599
files in a specific directory of the

00:03:39.599 --> 00:03:41.040
Jekyll project.

00:03:41.040 --> 00:03:45.040
For each post, it takes the title

00:03:45.040 --> 00:03:48.400
and the URL and generates a link.

00:03:48.400 --> 00:03:52.867
So Jekyll is nice and sweet,

00:03:52.867 --> 00:03:55.200
but over the years

00:03:55.200 --> 00:03:57.760
I started using more and more

00:03:57.760 --> 00:03:59.519
systematically

00:03:59.519 --> 00:04:02.000
Org Mode to write all my files.

00:04:02.000 --> 00:04:04.833
I moved from Markdown to Org Mode

00:04:04.833 --> 00:04:07.200
I am a long time Emacs user.

00:04:07.200 --> 00:04:09.167
I've been using Emacs for 30 years now,

00:04:09.167 --> 00:04:12.799
so Org Mode is a more recent discovery,

00:04:12.799 --> 00:04:17.033
but it is a very nice discovery I made.

00:04:17.033 --> 00:04:19.680
The reason I like Org Mode

00:04:19.680 --> 00:04:22.320
is because, for instance, you can write

00:04:22.320 --> 00:04:24.933
formulas using MathJax

00:04:24.933 --> 00:04:26.639
and you can generate diagrams

00:04:26.639 --> 00:04:30.320
or plots with Gnuplot.

00:04:30.320 --> 00:04:32.240
Also important is the fact that you have

00:04:32.240 --> 00:04:34.080
the possibility of publishing

00:04:34.080 --> 00:04:39.520
your documents to multiple backends
such as PDF,

00:04:39.520 --> 00:04:43.600
or maybe a Reveal presentation,

00:04:43.600 --> 00:04:47.199
or HTML. This is all made possible

00:04:47.199 --> 00:04:50.479
by Babel, which is

00:04:50.479 --> 00:04:52.560
exactly what we just saw in the

00:04:52.560 --> 00:04:54.639
previous talk:

00:04:54.639 --> 00:04:57.440
Namely, the possibility of executing a

00:04:57.440 --> 00:04:59.520
snippet of code

00:04:59.520 --> 00:05:02.560
embedded in in your pages.

00:05:02.560 --> 00:05:06.400
Our model can also be used

00:05:06.400 --> 00:05:09.600
within Jekyll. In fact,

00:05:09.600 --> 00:05:13.667
there is a a nice gem, a nice library,

00:05:13.667 --> 00:05:17.233
called jekyll-org which allows you

00:05:17.233 --> 00:05:19.680
to use Org Mode files directly

00:05:19.680 --> 00:05:22.880
into jekyll. But when you start using

00:05:22.880 --> 00:05:26.560
Org Mode... When I started using

00:05:26.560 --> 00:05:30.560
Org Mode, I realized I could move

00:05:30.560 --> 00:05:34.240
all my workflow, all my publishing

00:05:34.240 --> 00:05:36.840
workflow to Emacs.

00:05:36.840 --> 00:05:41.100
In fact, Org Mode is also a

00:05:41.100 --> 00:05:42.880
static website generator because

00:05:42.880 --> 00:05:46.240
it has got the possibility of publishing

00:05:46.240 --> 00:05:50.880
projects made of Org Mode files.

00:05:50.880 --> 00:05:53.840
One of the nice things about

00:05:53.840 --> 00:05:56.479
the publishing features of Org Mode

00:05:56.479 --> 00:05:58.880
is that it allows you to define in the

00:05:58.880 --> 00:06:01.300
org-publish-project-alist,

00:06:01.300 --> 00:06:03.199
all the the components

00:06:03.199 --> 00:06:05.367
which are part of your project.

00:06:05.367 --> 00:06:07.520
In a sense, it is

00:06:07.520 --> 00:06:10.479
also more flexible than Jekyll,

00:06:10.479 --> 00:06:12.880
because it also allows you, for instance,

00:06:12.880 --> 00:06:15.120
to publish a single file rather

00:06:15.120 --> 00:06:17.440
than having to recompile everything

00:06:17.440 --> 00:06:20.080
every time you want to publish your

00:06:20.080 --> 00:06:22.333
your project to your website.

00:06:22.333 --> 00:06:25.333
However, there are some short comments

00:06:25.333 --> 00:06:29.520
I would say, or some areas
of improvement.

00:06:30.400 --> 00:06:33.600
The first is that support for
templating

00:06:33.600 --> 00:06:36.639
is not so obvious as it is

00:06:36.639 --> 00:06:39.280
in Jekyll, even though there are some

00:06:40.560 --> 00:06:44.560
nice extensions such as org-thtml,

00:06:44.560 --> 00:06:48.400
for instance, which allows you to use
templates.

00:06:48.400 --> 00:06:51.840
More important to me was the fact that

00:06:51.840 --> 00:06:54.080
apparently, there is little support for

00:06:54.080 --> 00:06:56.133
the creation of dynamic content

00:06:56.133 --> 00:06:57.900
So I was very curious

00:06:57.900 --> 00:06:59.360
and very keen to use

00:06:59.360 --> 00:07:02.800
Org Mode for publishing my blog

00:07:02.800 --> 00:07:05.440
and the courses at the university,

00:07:05.440 --> 00:07:08.720
but then I had to find a way

00:07:08.720 --> 00:07:11.440
to being able to publish these

00:07:11.440 --> 00:07:13.599
dynamic pages, finding some kind of

00:07:13.599 --> 00:07:16.000
replacement, so to speak,

00:07:16.720 --> 00:07:17.900
for the liquid engine.

00:07:17.900 --> 00:07:24.160
The solution was there at hand,
actually, because

00:07:24.160 --> 00:07:27.280
basically, I realized I could use Babel

00:07:27.280 --> 00:07:30.800
for exactly this purpose. Rather than

00:07:30.800 --> 00:07:32.720
using Babel for generating

00:07:32.720 --> 00:07:35.759
plots or my other computations

00:07:35.759 --> 00:07:37.919
or whatever I was using them for,

00:07:37.919 --> 00:07:41.039
I realized I could use Babel to

00:07:41.039 --> 00:07:45.120
generate HTML which could be

00:07:45.120 --> 00:07:49.967
then published in the project

00:07:49.967 --> 00:07:53.680
All I needed to do then

00:07:53.680 --> 00:07:56.100
was defining some kind of functions,

00:07:56.100 --> 00:07:58.319
some kind of code in order to read

00:07:58.319 --> 00:08:01.840
the metadata of all

00:08:01.840 --> 00:08:04.767
the Org Mode files of my web project,

00:08:04.767 --> 00:08:09.680
so that I could then publish--

00:08:09.680 --> 00:08:13.280
generate the dynamic content.

00:08:13.280 --> 00:08:18.080
This is a snippet taken from

00:08:18.080 --> 00:08:21.759
one of my HTML projects,

00:08:21.759 --> 00:08:24.800
which basically shows the way in which

00:08:24.800 --> 00:08:27.599
I generate the list of posts on

00:08:27.599 --> 00:08:32.560
my page. It is exactly how the
Liquid that we saw

00:08:32.560 --> 00:08:35.680
a couple of slides earlier that
looks like

00:08:35.680 --> 00:08:39.200
in Org Mode.

00:08:39.200 --> 00:08:42.320
Basically, what I'm doing...
I'm using...

00:08:42.320 --> 00:08:46.720
I wrote a Ruby script which

00:08:46.720 --> 00:08:49.680
reads all the metadata. So this

00:08:49.680 --> 00:08:51.040
highlighted code

00:08:51.040 --> 00:08:53.100
basically loads the script

00:08:53.100 --> 00:08:55.300
which is stored externally.

00:08:55.300 --> 00:08:56.800
Then it collects all the

00:08:56.800 --> 00:08:58.320
metadata from the

00:08:58.320 --> 00:09:00.880
Org Mode files in the

00:09:00.880 --> 00:09:02.240
current directory.

00:09:02.240 --> 00:09:04.800
And then the following... The code

00:09:04.800 --> 00:09:06.480
you can see here

00:09:06.480 --> 00:09:09.839
basically iterates over all the

00:09:09.839 --> 00:09:12.959
posts read at the previous step.

00:09:12.959 --> 00:09:16.399
It generates

00:09:16.399 --> 00:09:19.519
a list with the title

00:09:19.519 --> 00:09:22.959
and the URLS, basically

00:09:22.959 --> 00:09:27.440
replicating what Jekyll does.

00:09:27.440 --> 00:09:30.240
There are some other things

00:09:30.240 --> 00:09:32.399
I have to deal with in order to

00:09:33.200 --> 00:09:36.480
accommodate my workflow. But that was

00:09:36.480 --> 00:09:39.200
relatively easy in the sense that one of

00:09:39.200 --> 00:09:43.279
the problems, one of the issues I had to

00:09:43.279 --> 00:09:45.360
solve was that of having

00:09:45.360 --> 00:09:48.480
a common navigation on all my

00:09:48.480 --> 00:09:51.040
pages. That was easily solved

00:09:51.040 --> 00:09:53.867
using the #+INCLUDE feature.

00:09:53.867 --> 00:09:54.959
So I basically

00:09:54.959 --> 00:09:56.000
made available

00:09:56.000 --> 00:09:57.839
an #+INCLUDE with all the navigation

00:09:57.839 --> 00:10:00.560
which is embedded in all the pages of

00:10:00.560 --> 00:10:01.839
my websites

00:10:01.839 --> 00:10:03.733
through the #+INCLUDE.

00:10:03.733 --> 00:10:06.160
Another nice feature which

00:10:06.160 --> 00:10:08.560
Jekyll has is the possibility of

00:10:08.560 --> 00:10:12.800
previewing a website before deploying it.

00:10:13.200 --> 00:10:16.079
Emacs also has got a node which allows

00:10:16.079 --> 00:10:21.200
you to launch a web server. In fact,

00:10:21.200 --> 00:10:24.320
I wrote a quick hack

00:10:24.320 --> 00:10:26.959
which allows you to

00:10:26.959 --> 00:10:31.519
invoke a node on an Org Mode

00:10:31.519 --> 00:10:34.720
project, start a local preview,

00:10:34.720 --> 00:10:37.920
and then use rsync

00:10:37.920 --> 00:10:44.839
in order to deploy the the website.

00:10:46.240 --> 00:10:48.720
Five minutes left. More than

00:10:48.720 --> 00:10:51.200
enough. Okay.

00:10:51.200 --> 00:10:52.967
Thanks. Thank you, thank you very much.

00:10:52.967 --> 00:10:56.480
I'm nearly done. So then I can take
some questions.

00:10:56.480 --> 00:11:00.560
Just to give you maybe

00:11:00.560 --> 00:11:03.680
a slightly more in-depth

00:11:03.680 --> 00:11:06.480
view of what the pages look like,

00:11:06.480 --> 00:11:07.200
so these are

00:11:07.200 --> 00:11:11.120
one of the pages, or the source files

00:11:11.120 --> 00:11:14.720
of one of the websites. It is

00:11:14.720 --> 00:11:18.480
in literate programming. Basically,

00:11:18.480 --> 00:11:20.399
you see there is some metadata here.

00:11:20.399 --> 00:11:22.640
I mean this is a regular Org Mode file.

00:11:22.640 --> 00:11:26.640
This part here

00:11:26.640 --> 00:11:29.920
basically defines some common options

00:11:29.920 --> 00:11:31.519
for publication.

00:11:31.519 --> 00:11:35.920
These two includes here

00:11:35.920 --> 00:11:41.120
put some extra HTML in the head part and

00:11:41.120 --> 00:11:44.480
the navigation. Here, as you can see,

00:11:44.480 --> 00:11:48.079
is the code generating the

00:11:48.079 --> 00:11:50.160
the list in chronological order. It is

00:11:50.160 --> 00:11:52.240
slightly more complex than the example I

00:11:52.240 --> 00:11:53.839
made in the slide

00:11:53.839 --> 00:11:56.240
because there is some more

00:11:56.240 --> 00:11:59.760
elaboration to do, including
putting some

00:11:59.760 --> 00:12:01.839
Javascript to identify

00:12:01.839 --> 00:12:05.120
according to the tags.

00:12:05.120 --> 00:12:08.160
To go back to the presentation...

00:12:11.200 --> 00:12:13.067
I managed this migration

00:12:13.067 --> 00:12:14.560
a few months ago,

00:12:14.560 --> 00:12:17.680
and then all my workflow is within

00:12:17.680 --> 00:12:20.399
Org Mode and within Emacs.

00:12:20.399 --> 00:12:23.079
I'm very happy with it because it's

00:12:23.079 --> 00:12:26.800
simplified quite a bit

00:12:26.800 --> 00:12:28.480
my publication process.

00:12:28.480 --> 00:12:31.839
One of the advantages... Another

00:12:31.839 --> 00:12:34.240
advantage... So the first advantage is that

00:12:34.240 --> 00:12:36.959
everything is in Org Mode and Emacs.

00:12:36.959 --> 00:12:38.160
Second advantage

00:12:38.160 --> 00:12:41.680
is that everything is based on the

00:12:41.680 --> 00:12:44.880
standard machinery provided by Org Mode.

00:12:44.880 --> 00:12:47.760
So in a sense, it is

00:12:47.760 --> 00:12:50.079
more robust with respect to

00:12:50.079 --> 00:12:53.040
dependencies, possible errors, and so

00:12:53.040 --> 00:12:54.320
on and so forth.

00:12:54.320 --> 00:12:56.639
The fact that Org Mode

00:12:56.639 --> 00:12:58.240
allows you to publish

00:12:58.240 --> 00:13:00.880
a single file in a project is also

00:13:00.880 --> 00:13:03.839
very interesting because

00:13:03.839 --> 00:13:07.839
it allows to be more robust to

00:13:07.839 --> 00:13:11.040
problems you might introduce when

00:13:11.040 --> 00:13:14.959
you're changing--when I'm changing the
setup.

00:13:14.959 --> 00:13:16.880
Another interesting thing which I

00:13:16.880 --> 00:13:21.519
realized that I could have is that

00:13:21.519 --> 00:13:23.600
in a sense, the specification of the

00:13:23.600 --> 00:13:28.480
website can be embedded in the website
itself.

00:13:28.480 --> 00:13:30.800
In a sense this is some kind of

00:13:30.800 --> 00:13:31.839
self-documenting...

00:13:31.839 --> 00:13:35.120
It's a way of self-documenting

00:13:35.120 --> 00:13:36.600
what I'm actually doing.

00:13:36.600 --> 00:13:44.133
For instance, here on my website,

00:13:44.133 --> 00:13:46.399
you can see the

00:13:46.399 --> 00:13:48.240
specification of the

00:13:48.240 --> 00:13:51.519
project which is loaded

00:13:51.519 --> 00:13:53.933
from my initialization file,

00:13:53.933 --> 00:13:56.320
but then it is also published

00:13:56.320 --> 00:13:59.440
together with my home page. It lives

00:13:59.440 --> 00:14:01.360
with the repository where

00:14:01.360 --> 00:14:05.360
I keep all the sources of my website,

00:14:05.360 --> 00:14:08.079
which is kind of nice because it

00:14:08.079 --> 00:14:09.839
basically isolates

00:14:09.839 --> 00:14:14.079
everything in a single place.

00:14:14.079 --> 00:14:16.880
So there are some examples. I'm

00:14:16.880 --> 00:14:19.433
showing them more because of the

00:14:19.433 --> 00:14:21.760
source code which

00:14:21.760 --> 00:14:25.519
you can grab from the git repositories

00:14:25.519 --> 00:14:26.933
if you are interested.

00:14:26.933 --> 00:14:28.399
Of course I'm also available

00:14:28.399 --> 00:14:31.600
to provide some support and help

00:14:31.600 --> 00:14:32.959
if you are interested

00:14:32.959 --> 00:14:34.480
in this kind of stuff.

00:14:34.480 --> 00:14:37.760
The the next step for me will be that of

00:14:37.760 --> 00:14:41.600
trying, making this kind of
machinery available

00:14:41.600 --> 00:14:45.199
for more general use at the moment.

00:14:45.199 --> 00:14:47.120
If you are interested in trying out my

00:14:47.120 --> 00:14:48.800
suggestion, grabbing the

00:14:48.800 --> 00:14:51.933
sources for one of the websites

00:14:51.933 --> 00:14:54.700
to seehow they look like,

00:14:54.700 --> 00:14:56.720
and maybe try and

00:14:56.720 --> 00:15:00.160
customize it for your purposes...

00:15:00.160 --> 00:15:03.839
This is basically the content of my talk.

00:15:03.839 --> 00:15:06.959
I'm open to questions and thank you

00:15:06.959 --> 00:15:10.880
for your attention.

00:15:10.880 --> 00:15:12.880
(Amin: Thank you very much, Adolfo, for your

00:15:12.880 --> 00:15:14.480
awesome presentation.

00:15:14.480 --> 00:15:17.360
I think we have time for maybe like

00:15:17.360 --> 00:15:19.360
one or two questions,

00:15:19.360 --> 00:15:21.279
and then the rest maybe you could

00:15:21.279 --> 00:15:26.639
take up after the stream.)

00:15:26.639 --> 00:15:28.033
Adolfo: What should we do?

00:15:28.033 --> 00:15:30.000
(Amin: Would you like me

00:15:30.000 --> 00:15:31.839
to read you the questions?)

00:15:31.839 --> 00:15:35.199
Adolfo: Yeah, probably better because

00:15:35.199 --> 00:15:36.700
I'm kind of lost there.

00:15:36.700 --> 00:15:40.399
(Amin: Okay, no problem.

00:15:40.399 --> 00:15:42.480
So someone asks, "Do you have any

00:15:42.480 --> 00:15:45.440
opinion on Firn?")

00:15:45.440 --> 00:15:48.639
Adolfo: Firn. I don't know Firn,

00:15:48.639 --> 00:15:51.839
so I'll give it a try

00:15:51.839 --> 00:15:55.040
and check it out.

00:15:55.040 --> 00:15:57.839
(Amin: Thanks. People are also asking,

00:15:57.839 --> 00:15:59.680
do you discuss this, for example, in a blog

00:15:59.680 --> 00:16:01.279
or anywhere else they could find more

00:16:01.279 --> 00:16:02.800
about it?)

00:16:02.800 --> 00:16:05.600
Adolfo: Oh yes. I'm going to publish the

00:16:05.600 --> 00:16:08.560
the talk and the content

00:16:08.560 --> 00:16:11.120
on my website, and then I'll link it from

00:16:11.120 --> 00:16:13.067
the EmacsConf conference

00:16:13.067 --> 00:16:14.720
so that it will be easier for

00:16:14.720 --> 00:16:16.533
people to to reach it

00:16:16.533 --> 00:16:19.040
I will shortly make it

00:16:19.040 --> 00:16:22.880
available right after the conference.

00:16:22.880 --> 00:16:26.160
(Amin: Wonderful. I think that's all
for the questions.

00:16:26.160 --> 00:16:27.667
Thank you very much.)

00:16:27.667 --> 00:16:29.600
Adolfo: Thank you very much. Thank you.

00:16:29.600 --> 00:16:34.800
(Amin: Cheers.) Adolfo: Bye, cheers. (Amin: Bye.)