Use Jekyll for github blog

zagfox
3 min readJun 13, 2024

--

I created a github blog using hand-written HTML, there are many shortcomings. 1.old style and not pretty 2.different html needed for various pages and I don’t have enough bandwidth for them 3.data is embedded in html, which makes style changing and blog migration hard.

With those shortcomings, I decided to try Jekyll for blogging https://jekyllrb.com/. I didn’t choose this approach before because my laptop is windows. I decided to use Amazon EC2 for web development.

About Jekyll

Jekyll is a static site generator with built-in support for GitHub Pages and a simplified build process. Jekyll takes Markdown and HTML files and creates a complete static website based on your choice of layouts. Jekyll supports Markdown and Liquid, a templating language that loads dynamic content on your site.

Installation

I logged in to my EC2 instance and followed this site

https://jekyllrb.com/docs/installation/

Ruby is a high-level, interpreted programming language known for its simplicity and productivity.

sudo apt-get install ruby-full build-essential zlib1g-dev

Ruby gems is a package manager for Ruby. Ruby 1.9 and newer ships with RubyGems built-in but you may need to upgrade for bug fixes or new features. The installed ruby version is 3.0, I don’t need to install gem manually.

https://guides.rubygems.org/rubygems-basics/#installing-gems

Then install jekyll

sudo gem install jekyll bundler minima

Create blog and serve

jekyll new myblog

cd myblog
bundle exec jekyll serve

It started to serve the website at port 4000.

Cannot connect

I tried to connect on the ssh in EC2 with

telnet localhost 4000

That works and could print the html text page.

But on the EC2, same telnet with

telnet 54.215.125.243 4000

Where I use this machine’s public IP address. It doesn’t work.

So I suspect this is caused by jekyll settings. That it doesn’t allow connection from public IP.

net stats shows that port 4000 is being listened

netstat -an
Active Internet connections (servers and established)
Proto Recv-Q Send-Q Local Address Foreign Address State
tcp 0 0 127.0.0.1:4000 0.0.0.0:* LISTENOkay, it get resolved when I add –host=0.0.0.0

sudo bundle exec jekyll serve — host=0.0.0.0

Previously, the server only listened to 127.0.0.1, but now it can listen to all connections.

Local result

The page looks clean. I can change it to other styles. The posts are stored in markdown format, which is separated from the styles.

Publish site

I cloned the original site to the jekyll directory and added all the files. Note that the _site dir is generated from other contents and will be ignored by git. After committing and pushing the change, github will update the site automatically.

There is a “Page” tab for more information about the publishing. If I choose not to use Jekyll, it may need to configure customized rollout steps.

Overall, I am satisfied with this blog setup. It is not 100% handwritten, and it is not that fancy/complicated like the ones built from wix/wordpress. And note that although the initial testing uses EC2 linux, I won’t need to preview the website for all the posts. So I can continue using Windows VSCode for future posts. I like this setup and use it for quite a while.

--

--