Take-home message: I described my recent experiences, my plans for posts, and how I built this homepage with the help of AI.
1. A cosy moment for writing #
It’s 10 o’clock, 19 August 2025, and I just finished my breakfast and took out the trash. It’s pouring /pɔː/ and thundering outside, but just Amber Rain (as shown on the Hong Kong Observatory website), not Black Rain, so people still need to go to work as usual, but not me, because I have applied for a vacation leave for the whole week. Can you imagine how cosy it is to write in my homely flat when it is raining outside in the morning?☕️
2. On the brink of the new semester #
In short, my contract as a research assistant will end on 31 August, and I will start my PhD study right after that, and the programme briefing and orientation session are on 3 September. The problem is that I am currently living in Shenzhen and need to commute to Hong Kong on weekdays by using my Hong Kong entry card, so I need to extend the entry card in order to continue to use it for my future study. I applied for a new card at the Shenzhen Luohu Entry/Exit Service Centre last Saturday. They cut my previous card and informed me that the new one will be sent to me within five working days. So, I cannot commute to Hong Kong without an entry card, which is why I am staying at home.
It’s good, because I can take a rest before the new semester. I can play video games, read manga books, practice the piano, etc. I can work for a while if I want when I have inspiration /ˌɪn.spɪˈreɪ.ʃən/. I can also manage my homepage, like adding a new post, which is what I am doing.
3. Posting in English and Chinese #
I write in English because I want to further improve my English to an advanced level. I think my current abilities are not terrible /ˈter.ə.bəl/, especially after so much time and effort I have spent, but I guess I just enjoy learning, which is also one of the reasons why I chose an academic career. I also enjoy reading and writing, not just academic writing (which is a job that can be routine sometimes), but also creative writing (such as online posts). You can see I have underlined some words/phrases; this is how I mark the expressions I am learning from AI during the writing of these posts. After writing, I can also use AI to proofread my work to avoid grammatical errors. I believe this is an effective way to gradually improve my language skills.
But still, I will post in Chinese, as I have built two language versions for my homepage. Maybe I will translate some of my original English posts into Chinese using AI first and then proofread them to avoid mistakes, if I have time. Large Language Models (LLMs) are powerful these days, and I can use them to facilitate some processes. However, I don’t think I will translate some Chinese posts to English since some of my thoughts can be very trivial and culturally specific.
4. Digital age self-expression #
So, why a homepage? My friend Jiaao, who is studying for a PhD at Northeastern University, showed his academic homepage to me and recommended I do this too when I travelled to Hangzhou and Shaoxing this June. I like exploring new things, and I will definitely need a website to show myself in the future, especially when seeking a job after my PhD. The eventual goal is to use it as a lab website when I become a PI (hope this will happen one day🙏).
I also found that people in distinct areas prefer different website building tools. My girlfriend, Bblythe, a designer who graduated from the University of Washington (Why has everyone studied in the USA except for me😫), builds and deploys her homepage using Webflow (https://webflow.com) or Figma (https://www.figma.com/sites/). I don’t remember which of them, but both are popular tools for designers and require no coding. Instead, Jiaao and I use GitHub (https://github.com), which is typically a git nerd’s choice🤓️.
5. Hugo & Blowfish: easy-to-use framework #
There are many uses of GitHub, which serves as a platform to deploy your homepage. You can search for some templates and change the content to yours, and follow the tutorials to deploy it. Yes, it looks technological, but it is easy.
I decided to build my homepage via Hugo (https://gohugo.io), the world’s fastest framework for building websites, as asserted on its website. Hugo supports a multilingual homepage, thereby allowing me to edit English and Chinese content. It also supports both light and dark appearance. I browsed some templates and became obsessed with Blowfish (https://blowfish.page), a powerful, lightweight theme for Hugo.
Let me tell you how easy it is. First, I downloaded template files from the Blowfish website and unzipped and renamed the folder as ziqian_website. Then, I opened some files (i.e., configuration, parameters, menu, post, etc.) to change the content to mine. To inspect the changes simultaneously, I opened the terminal on my laptop and input the following syntax to go to this folder.
cd ziqian_website
And then I typed:
hugo server
It provided a temporary link (e.g., http://localhost:1313/) for me to check how the website looks. This link can update immediately every time I make changes to the files. Some configuration files are HTML, and content files (i.e., posts) are written in Markdown (https://www.markdownguide.org). I have used Markdown to post some blogs on Chinese platforms, such as Jianshu (http://jianshu.com) and Zhihu (https://www.zhihu.com), so I am already familiar with it. Markdown is simple, and you can learn it in two minutes.
So, I completed the content for my homepage using the Blowfish template. The next step is to build it. Following the tutorial, we usually build the static website in a subfolder called public, so just go to this subfolder first.
cd public
Then, use this very concise syntax to build it.
hugo
After that, I created a new repository on my GitHub called ziqianworld.github.io, which would also be the link to the homepage (i.e., www.ziqianworld.github.io). I uploaded the files to this repository via the terminal and set up some GitHub Pages things. Boom! It automatically built and deployed my homepage. It was done!
6. Waterfall: My painful AI lesson #
What is a waterfall layout? Well, it is the layout used by Xiaohongshu (https://www.xiaohongshu.com/explore), a popular social media platform in China, similar to Instagram. The difference is that Ins has a fixed grid layout, while Xiaohongshu (aka RedBook) utilises a more eye-catching waterfall layout (the professional term is the Masonry layout). I also got this inspiration from Inter-Knot, which is a function in the video game I am playing called Zenless Zone Zero (ZZZ), made by HoYoverse, the company that created Genshin: Impact. If you also play it, you can add me as a friend. My UID is shown in the screenshot.
Let me show you the differences between them on social media. Here, the figure on the left is Ano’s Instagram profile (note: Ano is a Japanese pop singer), and the figure in the middle is Adrien Brody’s Xiaohongshu profile. You can directly inspect what grid and waterfall layouts are. The figure on the right shows a shortcut to the Apple Store app, which is discussed later in this post.
In my opinion, the magic of the waterfall layout is that you can always glimpse subsequent posts at the bottom, which attracts you to browse more. I like it, so after successfully deploying the initial version of my homepage, I wanted to change the default tedious layout to the waterfall layout. I prompted DeepSeek (https://chat.deepseek.com) to do so, which is a popular AI chatbot made by a Chinese company. When it was done, posts were ordered vertically from left to right, which was not what I wanted. I wish the posts could be organised in rows (i.e., the latest ones are on the first row), just like Xiaohongshu.
I prompted DeepSeek to alter the order again and again, wasting the whole day😫, until I searched online and realised that the current version of CSS does not support the real Masonry layout like Xiaohongshu, even though people have requsted this update in recent years. For example, I found a news article saying that the community is asking coding professionals to recommend and discuss the final Masonry syntax used in future versions of CSS. It is almost ready, but not available for now.
So, I was asking AI for an impossible mission (not that AI is Tom Cruise)! I didn’t realise it because I was just a website coding newbie! Here I learned an important lesson: you cannot just use AI to do everything you want if you are not an expert in the domain. You need to be an expert first, then utilise AI to enlarge your abilities and facilitate the creation.
7. Cursor: An amazing AI code editor #
I then decided to return to the conventional grid layout because I found that it looks smart on a small screen (e.g., smartphone) if you design well, just as you can see in the Apple Store figure above. At that moment, I had to learn a lot of stuff about HTML, CSS and JS if I wanted to redesign the layout. Fortunately, Bblythe told me that there is a state-of-the-art, powerful, influential AI code editor called Cursor (https://cursor.com). It fundamentally redefines how people code—no joke!
Before I used Cursor, I modified my homepage design like this.
- Ask AI how to change somthing on the browser
- Copy AI’s code, back to VS Code and paste
- Open other files to edit when needed
- Test the website and iterate steps 1-3
In Cursor, you do things like this.
- Create a new agent
- Ask it to do something
- Supervise how it browses and changes files, click Enter when needed
- Test the website and iterate steps 1-3
When working with Cursor, I felt like I was a boss, watching my employees working and giving approvals for their decisions. I don’t need to work by myself. How amazing! Someone may ask, if AI can do so many things for us, why are we still working? I think, at least, for me, I can do many interesting things with AI. That is enough. I have explored things and have fun. This is the purpose of life.
I also learned some lessons when using Cursor. First, when I asked Cursor to upload the completed static website files (i.e., the files under the public folder) to GitHub, it did so but also deleted all the source files! I believe the logic here is that once you install an app, the system usually prompts you to delete the installation package to free up storage space. I didn’t notice it because I was mindlessly pressing the Enter button at the time😅. Importantly, you cannot recover files deleted by Cursor. I had saved copies, so it wasn’t a problem. However, I never used Cursor to upload the website afterwards, instead, I always did it manually.
Second, I decided to archive posts by year. I already have several temporal testing posts in 2025, and I created one more testing post in 2026. I believe this function has been embedded in Blowfish, but I didn’t inspect the success of archiving in 2026. I asked Cursor to check the issue again and again (just like when I asked DeepSeek to make a waterfall layout!), eventually, Cursor went into a self-repetition. I then realised that you cannot archive a post in the future of 2026 because it is now just 2025😅. Another good example of how people use AI inappropriately.
Also, if you want to make some minor changes (e.g., slightly enlarge the font size) but don’t know the corresponding syntax, you can ask Cursor to guide you to that place. I think if you are really doing something with the help of AI, instead of asking it to do it for you, you will finally become an expert because you are actually learning by doing something.
If you like my post, please share my homepage with others!