Over a month ago, I embarked on a bold venture: to completely revamp my blog site with the aid of artificial intelligence. Now, as the bells of 2024 are about to ring, this brand new version of my blog has finally launched. This article will briefly revisit the journey of this blog update, documenting the key steps and personal insights.
The Role of AI
In my article, ”Pair Programming with AI,” I detailed the core objectives of this blog’s reconstruction: mastering a brand new programming language and framework while completely overhauling the blog. Looking back at the entire project, I can confidently say that these goals have been successfully achieved.
Throughout this process, AI played multiple roles, including that of a collaborator, mentor, assistant, and designer. It is certain that without the aid of AI, it would have been impossible for me to create such a new blog platform in just over a month. This reconstruction not only deepened my understanding of current front-end technologies but also enriched my knowledge and experience.
AI demonstrated its powerful capability to help us easily venture into previously unknown territories, accelerating our learning and development process. Although AI’s functionalities are robust, it has not yet reached the point where it can completely replace developers. At present, the relationship between developers and AI is more collaborative than competitive.
Astro
In pursuit of a better experience and understanding of new front-end development technologies, I deliberately did not choose the static site generation framework commonly used by mainstream blog platforms. Instead, I turned to Astro.
Astro is a modern front-end framework designed to create faster and more efficient websites. My reasons for choosing Astro include:
- Astro is a contemporary front-end framework with extensive documentation and an active community.
- It offers excellent support for static sites, meaning there was no need for me to upgrade my server configuration.
- The framework provides good integration with Markdown files.
- Astro can be used in conjunction with any other front-end framework, offering broad possibilities for future development.
- Compared to other frameworks, Astro simplifies data flow management and interactivity, making it more user-friendly for beginners.
- It includes advanced development tools and optimization features, fulfilling my desire to experience current front-end development technologies.
In summary, Astro offers an efficient, flexible, and high-performance solution, making it highly suitable for creating static blogs. It ingeniously combines the advantages of static site generators with the flexibility of modern front-end frameworks, and I am very satisfied with this choice.
Starting from Scratch
Despite the numerous excellent templates available in the community based on Astro, I decided to build the blog from scratch, aiming for a deeper learning and hands-on experience with the framework.
During this reconstruction process, the assistance of AI, the official Astro documentation, and the AstroWind template code were immensely helpful. Astro offers comprehensive official documentation in multiple languages, including Chinese, which not only facilitates developers’ learning but also provides a rich corpus of resources for AI. As a result, during the learning and development phase, AI demonstrated a high success rate in addressing questions related to Astro. This underscores the importance of choosing a framework that AI is familiar with when collaborating.
AstroWind, being a full-featured website template based on the Astro framework, allowed me to quickly grasp the structure and functionalities of a complete and mature Astro project.
Of course, starting a project from zero is undeniably a challenging process, especially when adopting a completely new language and framework. Only after more than 20 days of building sufficient foundational code did the blog development enter a phase of rapid progress.
Implementing Blog Internationalization (i18n)
Given that my blog needed to support both Chinese and English, my initial hope was to use a framework that provided native internationalization (i18n) support. However, when I started working on this blog reconstruction project, I discovered that only a limited, experimental version of i18n support was available in Astro version 3.5. More critically, its approach to handling different language paths did not meet my expectations. As a result, I decided to implement this functionality myself within the Astro framework.
Fortunately, the difficulty of implementing this part was not significant. It primarily involved configuring routing, formatting dates, and retrieving localized strings. The current implementation has successfully met my needs.
TailwindCSS
In the realm of front-end development, TailwindCSS seems to have elicited mixed reactions. Some developers praise it for boosting efficiency, while others view it as somewhat unconventional. As a developer primarily using SwiftUI, I found myself quite accustomed to and fond of the unified approach to structure and style that TailwindCSS offers.
Especially when it comes to building page details, I found it incredibly convenient to directly extract code from other TailwindCSS template libraries, eliminating the need to handle style files separately. This allowed me to quickly visualize the initial layout of a page and then make necessary modifications or restructuring.
Many of the components in my new blog were prototyped using resources from Flowbite and Mamba UI, and I also utilized some of Flowbite’s interactive JavaScript code.
Furthermore, the @tailwindcss/typography plugin provided elegant basic styling for Markdown content. With just a few adjustments, it met my design needs perfectly. For a blog site primarily based on Markdown content, this significantly enhanced the efficiency of the design process.
MDX
Following the reconstruction of my blog, I decided not to synchronize my articles on other platforms anymore. This decision was partly made to facilitate easier maintenance of existing articles. On the other hand, I also wanted to utilize capabilities beyond the normal Markdown functionalities in my future article creations. To achieve this, I converted all previous articles into files with the .mdx extension.
During this conversion process, I found that Astro has stringent requirements for the .mdx file content during the build phase. Many previously unnoticed details (mainly characters that MDX could interpret as directives) led to build failures. This process demanded considerable effort, especially since the compiler’s error indications often differed from the actual error locations.
With the switch to MDX format, certain issues that were difficult to address in the previous blog version created with Publish have now become much simpler. For instance, automatically adding specific content to articles. In the previous version, I had to create an Ink plugin to implement a custom Markdown directive. Now, with MDX, I can insert a JSX directive into the file and write a remark plugin, enabling greater flexibility and functionality.
TypeScript
Reflecting my preference for strongly typed languages, I opted for the strictest checking mode of TypeScript while building the Astro project. Although this approach provided clearer error messages in many instances, it also increased the complexity of starting a project from scratch.
In terms of writing server-side code, TypeScript offered a programming experience similar to Swift, which I greatly appreciate. However, when collaborating with front-end code, especially certain JavaScript codes, the stringent type requirements and Astro’s special handling of code in .astro files did present some initial challenges.
Despite encountering a few anomalies during development (mostly resolved by clearing the project cache), the overall experience of developing and debugging in VSCode with TypeScript was quite smooth and efficient.
On-Site Search
Providing an effective static search function for a static blog site has always been a challenge. In my previous version, I tackled this by creating a search dictionary during the construction of static pages. When users performed a search, it was actually conducted by downloading this dictionary to the local system and utilizing JavaScript to execute the search. However, as the content of the blog expanded, the dictionary file grew larger, leading to a less than ideal first-time search experience for users.
In this latest update, I decided to experiment with web-based search services. Algolia, a search solution provider for businesses, offers free file search services for technology-sharing websites. My blog met their criteria, so the application process went smoothly.
Although integrating Algolia’s DocSearch service into the blog was relatively straightforward, achieving the desired search results was not as easy. The current search results appear too fragmented, necessitating further adjustments to the server-side crawler settings to yield more effective search outcomes.
Deployment, CDN, and SEO
To simplify the workflow for publishing new articles, I decided to implement automated deployment. As Astro generates a new and complete output version during the build process (without differential comparison), I developed a series of small tool scripts with AI’s help. These tools automated a range of tasks, from the deployment process to generating a list of files for CDN updates, and submitting new URLs to search engines.
With changes in the directory structure and filenames (Astro automatically generates all-lowercase filenames) in the new version, I also used AI to create a path map conversion list for Nginx. This list ensures the stability of SEO through 301 redirects.
Overall, AI played a significant role in this aspect, greatly enhancing work efficiency. Notably, breaking down the tasks and allowing AI to generate specific tool scripts for each operation increased the success rate of AI-generated code.
See You in 2024
As 2024 draws nearer, I’d like to extend my sincerest wishes to all my readers at the conclusion of this article. May you enjoy good health and prosperity in the new year. Let’s embrace a 2024 filled with hope and opportunities together.
If you have any suggestions or comments about the new version of the blog, please feel free to share them in the comments section below.