About jekyll

This is a post about how to use Jekyll projects like React.

While building a blog with Jekyll, I found myself frustrated with the traditional React development environment, so I decided to learn more.

What is Jekyll?

Jekyll is a static site generator. A static site generator creates pre-compiled static files and deploys them on a web server. It doesn’t use any dynamic elements like server-side scripts or databases to generate dynamic content. This makes it a very useful tool for building and hosting websites.

What are the benefits of making #### static?

They are: fast loading speed, security, and ease of hosting and deployment. Static files are cached, so they don’t put a lot of load on your server, and they pose fewer security risks. Also, you don’t need any special server setup or database connections to host a static site, as you simply need a web server. (firm)

Why was I frustrated as a React developer?

As I realized while exploring Jekyll, React uses a virtual DOM to provide efficient UI updates. This means that the UI dynamically changes based on the user’s interaction with it, and that’s what I found frustrating about Jekyll.

So isn’t there a way to make it as React-like as possible?

The answer is to use Guard! Guard is a tool for monitoring filesystem events and executing specific actions in Jekyll (i.e. Ruby-based projects). It detects file system events such as source code changes, file creation and deletion, and executes user-specified actions in response. It is mainly used to automate development tasks!

You can learn more about it here: #### I know what Guard does, but how do I apply it to my Jekyll project?

Application example. In a terminal or command prompt, run the bundle install command to install the dependencies.

gem 'jekyll'
gem 'guard-jekyll-plus'

Run the following command to create a Guardfile in your project directory:

bundle exec guard init jekyll_plus

Create the Guardfile and add the settings related to Guard Jekyll Plus.

guard :jekyll_plus, command: 'bundle exec jekyll serve' do
  watch %r{^.*\.(md|markdown|html)$}
  watch %r{^_config\.yml$}
  # you can add other file watch rules
end

Run Guard and start Jekyll. Jekyll is now able to detect changes in real time and dynamically update your site.