Working with ChatGPT on my blog
No I am not asking ChatGPT to write blog posts for me, I will never do that. I have added “Written by Human not by AI” logo to my blog, which means “Use this badge if your article, including blog posts, essays, research, emails, and other text-based content, contains less than 10% of AI output.”
I asked ChatGPT’s help to add that logo though, to figure out where to insert some HTML tag with a particular image asset. This is an example of how I am working with ChatGPT to make improvements to my blog(thus it’s titled “working” not “worked”). And in this blog post, I will describe how this working relationship look like, the benefits, and the catches.
It helps me add new features to my blog
Here “it” means “Working with ChatGPT”, it doesn’t mean “ChatGPT”.
My blog is based on Jekyll, a blogging Framework, with a CSS Library called Minimal Mistakes, hosted on Github Pages. In 2020 I wrote about the history and all the updates ended up this setting. Since then, I have not made any major changes: it’s not because I don’t have ideas. I’ll touch the reasons later.
In the wake of ChatGPT’s success I decided to ask ChatGPT to help me with such feature requests. My idea is: since I have blog posts either written in Chinese or in English, I want to display miscellaneous buttons and labels on the post page according to language. E.g. at the end of this page you will see “Tags” and “Updated” labels, “Previous” and “Next” buttons, etc. For a post written in Chinese I would like to display “标签”, “更新时间”, “上一页”, “下一页” instead. So I asked:
Can I set locale at individual page level rather than site level? I tried to use zh_CN for one of the post but its HTML still has there
To set the locale for an individual page, you can add a
langattribute to the HTML tag in the page’s layout file.
And they provided example code, explained the code, and kept going:
Additionally, you can set the Open Graph
og:localemeta tag for an individual page by adding it to the page’s front matter.
Of course they gave example code and explanations.
But the code does not magically work: for the first idea, I didn’t know where to change individual post’s HTML(it’s managed my Minimal Mistakes somewhere); for the second idea, I quickly tried: and it didn’t work. So this is rather the starting of a conversation, and aligns with people’s experience with ChatGPT: you can’t expect it works magically, but you need to iterate on prompting.
As you can see, the feature is now implemented, not because of ChatGPT ultimately gave me answer, but rather I leveraged ChatGPT’s help to figure out the ultimate solution. So here brings my next point.
It serves as a pair programmer
Here “It” means ChatGPT.
From the starting conversation, I kept using ChatGPT as a peer programmer and kept finding the proper next steps.
Based on my current blog setting, my framework already handled certain jobs for me, this helps me to keep my maintenance effort minimal. The downside though, is sometimes I do not know where certain implementation is happening. To figure that out, I would have to do online search, read documents(if any), and deploy the sites to try, with no guarantee to work: that’s the reason I did not update my blog for a while. Back to the initial conversation, although the immediate answer doesn’t work, it gave me some hints: since ChatGPT mentioned “page’s layout file”, I probably need to figure out where the layout file is defined.
So firstly I asked ChatGPT directly about it, but made sure I asked it with as much information as I could:
You asked me to add a
langattribute to the HTML tag in the page’s layout file, I cannot find such layout file. I am using a plugin called jekyll-archives, and what I usually do it to just set some metadata like this: … Is there a way to tell this layout to use a different locale?
Then I got this answer:
If you’re using a layout file that’s provided by a plugin or theme, you may need to check the documentation for that plugin or theme to see if it supports customizing the lang attribute for individual pages.
So, ChatGPT didn’t know the answer, but “check the documentation” part was indeed the next step I would like to try. So I went ahead checking the documents of Minimal Mistakes because I believe it has some code somewhere that controls my page layout. And this time, I found some critical information that for some reason I did not realize in the past:
When installing the theme as a Ruby Gem its layouts, includes, stylesheets, and other assets are all bundled in the gem. Meaning they’re not easily visible in your project. Each of these files can be modified, but you’ll need to copy the default version into your project first. For example, if you wanted to modify the default single layout, you’d start by copying it to
Then I took a look at the source code of
_layouts/single.html and this line of code caught my eyes here:
site.data.ui-text[site.locale]! Apparently this piece of code suggests, in theory, I can pass in either language as key, to the
site.data.ui-text dictionary, and get text accordingly! So where is that
site.data.ui-text defined? This time I did not have to ask ChatGPT but just found it on Minimal Mistake’s Github repository here. It already has translations of different UI components.
At this point my action items became much more clear:
- I need to copy over the layouts files to my local repository, and make changes such that instead of using
site.locale, use page’s locale.
- Figure out a way to know each blog post’s language.
At the end of the post I will summarize how it was done. But before that I have another point to make.
It misleads you if you do not ask in a proper way
I decided to followup on first action item myself and consult ChatGPT for the second. Since I have some existing Python script to do certain blog posts manipulations, I asked ChatGPT:
I need a piece of Python code to check if a file is English or Chinese, basically: given a file path, check the content of file, if the content is mostly Chinese, return ‘zh’, otherwise return ‘en’, can you write it for me?
Of course ChatGPT is ready to help and quickly wrote some code:
So far so good! And I did not know
langid library before, I learned something new, yay! But when I tried to embed the code into my script it didn’t work, so I asked a followup:
It seems not working: for every file in my folder, it has same score even though the content is different: is it only reading the first line of file? How to force langid read the full file and classify?
Here is ChatGPT’s answer:
By default, langid reads only the first 1000 bytes of a file to classify its language. If you want to read the full file, you can use the classify method with the
I tried to follow the suggestion by calling
langid.classify(content, full=True), and I immediately got exception:
TypeError: classify() got an unexpected keyword argument 'full'. The fact is,
classify function doesn’t have a
full parameter and ChatGPT just made it up: likely because ChatGPT was thinking following my prompt that “is it only reading the first line of file? How to force langid read the full file and classify?”. langid’s source code shows
full parameter indeed does not exist.
The real issue, later I figured out, is my own mistake. I embedded ChatGPT’s code into my script and my code became:
post = frontmatter.load(f) was called, it read the entire file content and left the file pointer at the end of the file, thus the real fix is to add
f.seek(0)(to move the file pointer back to the beginning) before
text = f.read(). But I did not thought about it, and had a hypothesis, gave the hypothesis to ChatGPT, and ended up with a made-up API. So if I just copy-paste my buggy code and the unexpected results I saw, I should be able to get a correct answer in first try. That’s why proper prompting matters a lot.
Summary: ChatGPT is helpful for side projects
After all, it is pleasant experience to work with ChatGPT on side projects like a personal blog. For bloggers who have some code to write and maintain, ChatGPT helps you understand those code(so that you can make a stale blog active again) and helps you write new code to improve it.
For people who happen to have following situation like mine and want the answer. I am also sharing my solution:
Situation: I have a Jekyll based blog, hosted on GitHub Pages, uses Minimal Mistakes, have blog posts in different languages, want to show labels and buttons based on blog posts’ languages.
- From Minimal Mistake’s GEM installation path(
gem info minimal-mistakes-jekyllto get the installed path), copy several files, including:
_includes/footer.html, etc, over to the corresponding folders(
_includes) into your local blog folder.
- In those files, replace
- For each blog post, add a front matter to indicate its language like
lang:zhetc. I can share my Python script to go through each post to backfill later.
Leave a comment