Welcome to Jekyll! (2025)
You’ll find this post in your _posts directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run jekyll serve, which launches a web server and auto-regenerates your site when a file is updated.
Jekyll requires blog post files to be named according to the following format:
YEAR-MONTH-DAY-title.MARKUP
Where YEAR is a four-digit number, MONTH and DAY are both two-digit numbers, and MARKUP is the file extension representing the format used in the file. After that, include the necessary front matter. Take a look at the source for this post to get an idea about how it works.
a post with image galleries
The images in this post are all zoomable, arranged into different mini-galleries using different libraries.
Lightbox2
PhotoSwipe
Spotlight JS
Venobox
a post with tabs
This is how a post with tabs looks like. Note that the tabs could be used for different purposes, not only for code.
First tabs
To add tabs, use the following syntax:
{% raw %}
{% tabs group-name %}
{% tab group-name tab-name-1 %}
Content 1
{% endtab %}
{% tab group-name tab-name-2 %}
Content 2
{% endtab %}
{% endtabs %}
{% endraw %}
With this you can generate visualizations like:
a post with typograms
This is an example post with some typograms code.
```typograms
+----+
| |---> My first diagram!
+----+
```
Which generates:
+----+
| |---> My first diagram!
+----+
Another example:
```typograms
.------------------------.
|.----------------------.|
||"https://example.com" ||
|'----------------------'|
| ______________________ |
|| ||
|| Welcome! ||
|| ||
|| ||
|| .----------------. ||
|| | username | ||
|| '----------------' ||
|| .----------------. ||
|| |"*******" | ||
|| '----------------' ||
|| ||
|| .----------------. ||
|| | "Sign-up" | ||
|| '----------------' ||
|| ||
|+----------------------+|
.------------------------.
```
which generates:
a post that can be cited
This is an example post that can be cited. The content of the post ends here, while the citation information is automatically provided below. The only thing needed is for you to set the citation key in the front matter to true.
a post with pseudo code
This is an example post with some pseudo code rendered by pseudocode. The example presented here is the same as the one in the pseudocode.js documentation, with only one simple but important change: everytime you would use $, you should use $$ instead. Also, note that the pseudocode key in the front matter is set to true to enable the rendering of pseudo code. As an example, using this code:
```pseudocode
% This quicksort algorithm is extracted from Chapter 7, Introduction to Algorithms (3rd edition)
\begin{algorithm}
\caption{Quicksort}
\begin{algorithmic}
\PROCEDURE{Quicksort}{$$A, p, r$$}
\IF{$$p < r$$}
\STATE $$q = $$ \CALL{Partition}{$$A, p, r$$}
\STATE \CALL{Quicksort}{$$A, p, q - 1$$}
\STATE \CALL{Quicksort}{$$A, q + 1, r$$}
\ENDIF
\ENDPROCEDURE
\PROCEDURE{Partition}{$$A, p, r$$}
\STATE $$x = A[r]$$
\STATE $$i = p - 1$$
\FOR{$$j = p$$ \TO $$r - 1$$}
\IF{$$A[j] < x$$}
\STATE $$i = i + 1$$
\STATE exchange
$$A[i]$$ with $$A[j]$$
\ENDIF
\STATE exchange $$A[i]$$ with $$A[r]$$
\ENDFOR
\ENDPROCEDURE
\end{algorithmic}
\end{algorithm}
```
Generates:
a post with code diff
You can display diff code by using the regular markdown syntax:
```diff
diff --git a/sample.js b/sample.js
index 0000001..0ddf2ba
--- a/sample.js
+++ b/sample.js
@@ -1 +1 @@
-console.log("Hello World!")
+console.log("Hello from Diff2Html!")
```
Which generates:
diff --git a/sample.js b/sample.js
index 0000001..0ddf2ba
--- a/sample.js
+++ b/sample.js
@@ -1 +1 @@
-console.log("Hello World!")
+console.log("Hello from Diff2Html!")
But this is difficult to read, specially if you have a large diff. You can use diff2html to display a more readable version of the diff. For this, just use diff2html instead of diff for the code block language:
a post with advanced image components
This is an example post with advanced image components.
Image Slider
This is a simple image slider. It uses the Swiper library. Check the examples page for more information of what you can achieve with it.
Image Comparison Slider
This is a simple image comparison slider. It uses the img-comparison-slider library. Check the examples page for more information of what you can achieve with it.
a post with vega lite
This is an example post with some vega lite code.
```vega_lite
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "A dot plot showing each movie in the database, and the difference from the average movie rating. The display is sorted by year to visualize everything in sequential order. The graph is for all Movies before 2019.",
"data": {
"url": "https://raw.githubusercontent.com/vega/vega/main/docs/data/movies.json"
},
"transform": [
{"filter": "datum['IMDB Rating'] != null"},
{"filter": {"timeUnit": "year", "field": "Release Date", "range": [null, 2019]}},
{
"joinaggregate": [{
"op": "mean",
"field": "IMDB Rating",
"as": "AverageRating"
}]
},
{
"calculate": "datum['IMDB Rating'] - datum.AverageRating",
"as": "RatingDelta"
}
],
"mark": "point",
"encoding": {
"x": {
"field": "Release Date",
"type": "temporal"
},
"y": {
"field": "RatingDelta",
"type": "quantitative",
"title": "Rating Delta"
},
"color": {
"field": "RatingDelta",
"type": "quantitative",
"scale": {"domainMid": 0},
"title": "Rating Delta"
}
}
}
```
Which generates:
a post with geojson
This is an example post with some geojson code. The support is provided thanks to Leaflet. To create your own visualization, go to geojson.io.
```geojson
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {},
"geometry": {
"coordinates": [
[
[
-60.11363029935569,
-2.904625022183211
],
[
-60.11363029935569,
-3.162613728707967
],
[
-59.820894493858034,
-3.162613728707967
],
[
-59.820894493858034,
-2.904625022183211
],
[
-60.11363029935569,
-2.904625022183211
]
]
],
"type": "Polygon"
}
}
]
}
```
Which generates: