As you may already know, Windows is my preferred operating system. Ever since Windows 10, the UI has been super slick and Microsoft as a company has been making moves in the right direction.
This blog was initially written to be used with Ghost, but I found that managing a Ghost service was way too much overhead for what I wanted to accomplish. I never ever wrote anything and spent most of my time tweaking the darned thing (hence the reason this is the second post). However, because it was just Node.js, it was fairly trivial to run on Windows. Still, I wanted out and that’s when I turned to Jekyll.
Ruby on Windows
Right off the bat, I hit a wall trying to get Jekyll to work on my machine. Installing Ruby is no longer an issue with package managers like Chocolatey, yet installing some of the gem packages require the Ruby development libraries to be built so setting up an environment that I could work with was turning out to be challenging.
In the past, I’ve been a big fan of Vagrant, but as I kept using Vagrant I started creating an explosion of VMs that small things. Usually that’s not an issue, but then disk space starts to run out. Fortunately, there’s an alternative – Docker!
Jekyll Docker Container
Thanks to the community around Docker, one can go to Docker Hub and quickly search for a container that does includes the technology you’re seeking to use, in this case it’s “Jekyll”.
I was able to locate the Jekyll Docker Github repository, which points to three available Jekyll images:
jekyll/jekyll: Default image.
jekyll/minimal: Very minimal image.
jekyll/build: Includes tools.
The minimal build only contains Jekyll which is good, but some of the dependencies in my
Gemfile require that I have the Ruby development libraries available, which aren’t included with the minimal Docker container. These libraries are in the default image. So we’ll stick to using that one. The build image contains other dependencies that we will not be using.
Creating a Jekyll Blog
Before we get started, Docker for Windows must be installed with access to the drive that will contain the blog source.
Let’s get started by
cding into the directory in which we want to create the blog, then let’s run the container with a few flags:
docker run --rm -it --name jk -p 4000:4000 -e POLLING=true -v %cd%:/srv/jekyll jekyll/jekyll:3.5.0 bash
Let’s dissect this command:
--rmwill remove the container when stopped, stopped containers remain on disk if not removed
-itrun the Docker container in interactive mode
--namesets a name for the container instead of having Docker create a name for us
-p 4000:4000binds host port to container port, so that we can view the blog locally
-e POLLING=trueenables force polling on Jekyll
- More on this on the Caveats section of Docker Jekyll
%cd%is the way Windows gives you the current working directory
/srv/jekyllis the default directory used by the container
jekyll/jekyll:3.5.0the name of the container that we’ll be creating an image for along with the version
bashthe command that the container should run when created
These are quite a few flags, but it’s much more tenable than having to create a Jekyll environment on Windows.
Now that you have a
bash shell in the Jekyll container, we can start executing commands, so let’s create a Jekyll blog and serve it:
> jekyll new . Running bundle install in /srv/jekyll... ... New jekyll site installed in /srv/jekyll. > jekyll serve Configuration file: /srv/jekyll/_config.yml Configuration file: /srv/jekyll/_config.yml Source: /srv/jekyll Destination: /srv/jekyll/_site Incremental build: disabled. Enable with --incremental Generating... done in 0.945 seconds. Auto-regeneration: enabled for '/srv/jekyll' Configuration file: /srv/jekyll/_config.yml Server address: http://0.0.0.0:4000/ Server running... press ctrl-c to stop.
This should create a blog from a template and serve it on http://localhost:4000. Since we bound the port in the container to our host machine, we should have no issues opening the link in our browser.
You can go ahead and open the
_posts directory on Windows using your favorite editor and edit away!
On a separate post, I’ll go over deployment to an S3 bucket using
Bonus: Live Reload!
POLLING enabled, you’ll notice that when you edit a file, you’ll still need to reload your browser to see any changes. For a much more enjoyable experience we can use BrowserSync. On a separate command line session run:
> browser-sync start -s %cd%\_site -f %cd%\_site --reload-delay 300 --no-open [BS] Access URLs: ---------------------------------- Local: http://localhost:3000 External: http://10.0.75.1:3000 ---------------------------------- UI: http://localhost:3001 UI External: http://10.0.75.1:3001 ---------------------------------- [BS] Serving files from: C:\Users\jvtrigueros\workspace\blog.jvtrigueros.com\src\_site [BS] Watching files...
This will create another server that will listen on changes on the
_site directory and reload after 300 ms of a change. So instead of visiting the blog on port 4000, you should instead go to http://localhost:3000.