First page using Jekyll

Testing out Jekyll and figuring if it would be useful for my blogging adventure. It also make sense for me to prepare an about page to share professional details. I tried wordpress to actually do this some time ago. It was good and all but it was just not a right fit for me. In the end I didn’t really like using wordpress as a blog tool as I discovered I would be more comfortable with having more control on the page.

It’s already pretty cool to have an offline tool to build my stuff, seems I’m already ready to go,

# Quick-start Instructions
gem install bundler jekyll
jekyll new my-awesome-site
cd my-awesome-site
# Run auto build/reload process to see your changes live in browser
bundle exec jekyll serve --livereload
# => Now browse to http://localhost:4000

Maybe I can also describe my relatively easy process to install jekyll and ruby in another blog post.

So, the next thing I tried was to figure out what can I do with template variables in general and also javascript variables. Jekyll offers server side generated variables which determined at build time of the frontend files. Such options can be found in here. Here’s a test run for template variable called site.time, evaluated as “2026-01-02 22:50:15 +0100” *[1].

I just can’t help myself but wonder, can I use javascript to render values? This way I would add more functionality to my toolbelt and access values my javascript code generates on client side. It seems liquid templates does not really allow to have javascript code to render DOM directly. But instead, it is still possible to just add some HTML tags to the page and use script tag to evaluate javascript code and attach its details to the element. Here’s an example:

<!-- Placed right after this code snippet -->
<span class="test-time">hi</span>

<!-- Placed at the end of this markdown file - yes this page is written on a markdown file and jekyll is building it into an html file -->
<script>
  const currentDate = new Date();
  console.log(currentDate);
  const spanElement = document.querySelector('.test-time');
  spanElement.textContent = currentDate;
</script>

Here’s the evaluated value of <span class="test-time">:
hi *[2]

* Notice that [1] and [2] are different. [1] is evaluated by Jekyll when I built this page. [2] is evaluated using javascript when you load the page. I ignored the formatting of the dates as they are not relevant to my point.

Of course, this means it is also possible to insert new DOM elements using javascript.

I tried bunch of stuff on the run which I do not go very much into the detail. In the end, I find this practise is a good start to document minor frontend practices. There is always an option to demonstrate more complex stuff (stuff that are not possible to do it using templates) in an iframe anyway. Let me try one,

I might tweak this iframe URL in future a bit, so in case I break it I should fix it (note to myself).

My overall experience with this setup is a go. I will be keep adding new updates in future.