It has been less than half a year since the last version of the blog was launched. The Gatsby-based website was the first project I developed, and I stepped on many pitfalls and left many remaining problems. At that time, I said that in the future, I will reconstruct a version with more complex technology to achieve more functions.Now that the development level has improved slightly, especially with the blessing of AI, I finally achieved this goal.
Technology Architecture
The CMS still uses Strapi, but the front-end framework is changed from Gatsby to Next.js. Gatsby only has a static mode, which is fast but needs to be rebuilt every time it is updated; Next.js has multiple modes and can be combined. Its incremental static generation Incremental Static Regeneration function can realize the cache that can still generate new content after construction.Well, there's nothing Gatsby can't satisfy me, I just want to learn a new framework.In addition, the language is Typescript. It is very painful to write, and it can be said that more than half of the debugging time is spent on eliminating type warnings.I continued to use GraphQL, which is also the Gatsby way. After the comparison, I really like this method of requesting on demand, although so many brackets seem really big.In terms of picture display, I did not choose to make my own wheels, because the previous version made by myself was ugly and difficult to use. In this version, I directly used React Photo Album and Yet Another React Lightbox to realize the large image preview effect of the photo card page picture grid, photography details, and article details.
The biggest change this time is that I started to use ChatGPT to help me realize a lot of logic and functions. It is impossible for me to develop this project in such a short time without AI.
Typescript
The most common usage is to help me find out why Typescript reports an error and tell me how to modify it. I don't know if it's because the tutorials I learned were not designed well. In short, the Typescript problems I encountered were not so easy to solve, and I didn't know how to solve them at all. Fortunately, there is ChatGPT, which helped me eliminate all types of warnings.
React Hooks
With AI, I use a lot of high-level (… should count) usage of React. If you want an effect and don't know how to achieve it, just ask it.
Next.js
I have to say that Gatsby's documentation is more detailed than Next.js, and many of the problems I encountered cannot be answered in the official Next.js documentation. Using AI, even if you can't get the correct answer, it's often fine with a little modification.
New changes
The biggest change in design is that the way of writing style is changed from CSS Module to Tailwind. Although a lot of classNames do seriously affect the code reading experience, but this time my style sources are basically taken from tailwindUI, and most of the time I don’t need to write too many styles. The price is that the personality is not so strong, but I am quite satisfied with the overall effect.In addition to the changes in the album browsing and display methods mentioned above, I am quite satisfied with the design of the text. I personally feel that the current text browsing experience is much better than the previous version.I also added some small details, such as article word count and estimated reading time, distinguishing internal and external links in the text for routing support, photography details page supports displaying EXIF and shooting location - only the first one is displayed, because the map is pressed Pay for the number of loads.The biggest change in terms of functionality should be the addition of the English version. I spent a lot of time on this multilingual switch. The future plan is to hope that this website will have greater influence, not only among Chinese speakers.
Ready to do
Because Strapi's query does not support sorting by a certain field and finding adjacent items, there is no "previous/next" function that the previous version had. In the future, I plan to implement a version myself. After all, this function is still very important for retention.Related suggestion. I don't have the ability to write algorithms for automatic recommendations, only manual recommendations. At present, there is already a configuration on the CMS side, which will link articles, photos or videos on related topics. For example, in "The End of an Era - The Ruins of Sandaoling in Hami", the video about Sandaoling will be recommended " Sandaoling Ruins".Search. Before in the last version, I made an algolia based search function. But it calculates the money based on the number of requests. I don’t know if the codes found at the time are correct. In short, every time a key is pressed, a request will be generated. For Chinese, typing a word will generate three or four requests. As a result, the payment threshold is quickly triggered. But after checking the records, I found that the most searched are "search", "test", "test"...Then what is the use of this search function!But in this version, I have already deployed the open source meilisearch and integrated it with Strapi, waiting for the front-end integration. In the future, a real-time search function will definitely be added.
Not going to do
dark mode. Because I get it, I don't like dark mode, I just did it because of the trend. The dark mode has a great impact on reading efficiency, and it takes a lot of effort to design. There is no need to do such a high-cost low-yield thing.Personal sections not related to the blog, such as a portfolio. Blogs should be kept pure and have only one content: output.Portfolios are showcases and should be placed on other personal showcase sites.
The feedback
Because this site contains a lot of pictures, a lot of Vercel's picture processing points have been consumed during the testing phase, and it is estimated that the free resources will be exhausted soon after it goes online. So I put the next service on my server. When accessing, you may occasionally encounter freezes, which is normal, because the server is compressing pictures.The website has just launched and needs your feedback. Whether it is product or design, or performance and network, please leave a message in the comment area if you have any questions or suggestions.
