by Željko Filipin
How it works
How to deploy it
You can host the HTML files anywhere, if you choose.
There’s a simpler way. Host Markdown files at GitHub. There is no need to host HTML files. The code for my blog is at zeljkofilipin/filipin.eu, if you want to see how I do it. GitHub supports Jekyll via GitHub Pages. I will not go into detail about that in this post. In short, you push Markdown documents to Github, it renders the HTML files.
Local development environment
I’ve recently made some optimizations to my local development environment. It works great for me and I wanted to share it. When I work on a post, I have two windows open. In one window is the HTML of the post opened in a browser. In another window is Markdown in VSCode. See screenshot at the top of the post for an example. As I type the text in VSCode, it is saved every second. Jekyll needs 2-3 seconds to update the HTML. The post automatically updates in the browser.
I have written about my editor setup in Visual Studio Code + Neovim. I will not go into detail about that part here. Important part is that your editor automatically saves the files. I have set my editor to save every second. If you’re using VSCode, add this to
If you prefer, you can set it up in the GUI too.
Start a local web server with
bundle exec jekyll serve. To automatically refresh the HTML file in the browser, use
--livereload. By default, Jekyll will rebuild the entire site. That can take a while. 10-20 seconds, depending how big your blog is. To speed things up, use
--incremental. Jekyll will only rebuild changed files. It should take only 2-3 seconds. I’m sure there are further optimizations, but that is fast enough for me.
In short, use this.
This video shows how it all works. In this example, I delete an image from the top of the article and move it under the first paragraph. The post in the browser automatically refreshes after a few seconds.tags: blog - code - featured - photo - video - youtube