Jekyll and Liquid

Things for me to contemplate on:

this took me hours to research btw

While I was setting up my fastpages blog, I noticed this interesting line of code in index.html.

And I thought, hey, this is interesting, what does {{site.baseurl}} do?

After some googling, I found that {{site.baseurl}} wasn’t something in Markdown. Turns out it’s actually Jekyll syntax.

So what does {{site.baseurl}} do?

Basically, baseurl is the directory under the URL of the website. ¹ So for example, this blog’s URL is lwu1822.github.io, and the baseurl is fastpages.

So I can just do ![]({{site.baseurl}}/images/diagram.png). Saves a lot of typing.

Pretty cool, huh? 😊

Something else I encountered while making this post

To type {{site.baseurl}} in this Markdown file, apparently you have to use the {% raw %} and {% endraw %} template around {{site.baseurl}} . ²

Like this:

{% raw %}  {{site.baseurl}}  {% endraw %}

Also something I encountered just as I was writing the line above

Notice how I was able to write {% endraw %} above? Unfortunately, it’s not that simple to just type it directly into your IDE, like this:

Warning: Don’t do this, it will break your code:

{% raw %} {% endraw %} {% endraw %}

The reason is because the first {% endraw %} will be interpreted as ending the {% raw %} template.

So if you want to be able to type {% endraw %} in Markdown, you need to do the following ³:

Create a variable, in this example, I’ll name it openTag, and assign it to {%:
```
 {% assign openTag = '{%' %}
```
Use the {{ openTag }} variable anytime you want to type text that contains {% in it.

For example, to type the text {% endraw %}, you would do:
```
 {{ openTag }} endraw %}
```

Even more something that I learned

Apparently, you also can’t type {% directly in the IDE, which would also break your code (took me a long time to debug （ꐦ𝅒_𝅒）)

Instead, you have to type: {{ openTag }}

Things for me to contemplate on:

I noticed on the provided Fastpages Notebook Blog Post, you can add an image without the baseurl. For example, you can specify an image with ![](images/diagram.png). Not sure why that works, but I’m guessing it has something to with Jupyter Notebooks.