Deploying your own Website

with Jekyll and Cloudfare Pages
Posted by Janani Kehelwala on July 31, 2024 · 6 mins read

Back in 2016 or so, I had a quaint little website made in Jekyll and deployed with Github pages. This was great. It’s a professional hazard for some people who worked in or studied cybersecurity to be paranoid even if there is very little risk. So a static site was very low-effort, low-risk, and served the purpose.

But then, I didn’t blog as much as I thought I would. The default status was that I would painstakingly design a website, and deploy it and never look at it again. Unfortunately this hasn’t changed all that much.

So with the help of Oracle Free Tier, I deployed a WordPress site with a beatuiful theme I did not design. But then I had to update it semi-regularly and take backups before updates. It was a lot of maintenance for an infrequent blogger. To make the situation worse, I put a really complicated password and enabled 2FA authentication. While I firmly do believe in both those things (better prepared than sorry), security at the cost of productivity is a problem I struggle with.

However, some months ago, Oracle limited Free Tier capabilities unless you moved to a paid plan. They started shutting down the instances with some notice if the allocated free-tier resources were not utilized to a threshold extent. Personal websites do not get a whole lot of traffic, and I couldn’t afford to have my website down if someone who I’d sent my CV to was checking it out.

So I was back to static websites with a side of blogging features. Since Github pages require public repositories, I am using Cloudfare this time around, which has a neat git integration setup that allows me to keep my blogging content private.

To get up and running, you can look at Jekyll Documentation and Cloudfare Pages.

The great thing is, all of this is free. So you can do personal branding to your heart’s content. You could consider buying a domain and configuring it with your blog, but this is entirely optional.

Setting up jekyll

I had two websites which used the same wordpress theme so I figured I would set up a Jekyll Theme. It would also allow me to reuse it and deploy bugfixes universally.

Feel free to use jekyll-theme-ghostiee, which I only made public because the stock photos used to preview it made it funny. README file describes most of the things you should know, and the rest you’ll have to figure out. I used many open source technologies to set it up, which you can find at the credits page of this site itself.

Jekyll helps you package your themes as ruby gems. But this requires you to get a RubyGems account, which seemed a bit overkill at the moment.

So I made the .gemspec but only put it in Github. Then used the Gemfile of the my jekyll sites pull it from github path.

gem "jekyll-theme-ghostiee", git: "https://github.com/jkehelwala/jekyll-theme-ghostiee.git"

Like so.

This made things very simple for me.

Setting up Cloudfare pages

To start off, remember that if you’re going to use default <repo>.pages.dev domain that cloudfare will assign you, you should have a nice enough repository name.

I already had a cloudfare account, so the steps I had to take to deploy my site are listed below.

  1. Log into cloudfare
  2. Go to Workers & Pages -> Overview
  3. Click the Create button on top
  4. Go to Pages tab
  5. Connect to Git
  6. Select repository - You will be asked to configure repository access for Cloudfare pages app on Github
  7. Set up a jekyll build from default deployment
  8. Deploy site

Once you are done, you will get <repo>.pages.dev website automatically.

The Trinity - Jekyll, Github and Cloudfare

Since my theme wasn’t deployed as a ruby gem, there were some minor things to do to make life easier for myself.

First, for the deployed sites to get my theme updates, you can setup a Webhook at your repository settings. You can generate the link from Cloudfare Pages settings, and simply copy and paste it on Github.

Second, to trigger the jekyll build at cloudfare pages with the updated theme, you may have to change the default Jekyll build command on the cloudfare pages settings to below.

bundle clean --force && bundle update && jekyll build

Now this is highly inefficient. So once the theme is in a stable enough state I will change it back to jekyll build.

And if there is someone who knows how to pull the github theme before building without publishing it as a rubygem, it would be much appreciated if they let me know.

Finally

So, while the battle with CSS was ever present, the sites are finally up. And hopefully with less maintenance burden, I’d be able to write more. I do have half a mind to check out whether Obsidian could be set up to publish things on the go. But that might just be wishful thinking.