Original link: https://ourai.ws/posts/doubanized-static-website/
It has been almost three years since the idea came up, and I have been working on it intermittently during this period. The Douban transformation of my personal website is almost over; during the transformation process, several more projects were hatched, and some outstanding problems were discovered. There will be a wave of bigger projects in the future. Big refactoring.
I would like to take this opportunity to write an article to record and introduce the entire system formed after the transformation. Some people may be interested – after all, my personal website is purely static and more complicated than a regular blog.
Douban transformation
The root cause of transforming a personal website that was originally a regular blog into a personal version of Douban is the aversion to public platforms. (For details, see ” Chatting Personal Services: Revolutionizing the Life of “to C” “)
One day in November 2020, I couldn’t sleep at night, and my mind became active——
I had insomnia and lay there for seven hours, thinking about some things, including those related to my personal website——
Several functions need to be added: “Thoughts” or “Talk to oneself”, which is also a very common function nowadays, such as Twitter, Fanfou, and Weibo. When you have an idea, you can write it down immediately. There is no need to It’s as long as writing an article, and you don’t have to think too much about wording, etc.; multi-language support, first (and basically only) English and Japanese versions, and translate my existing articles into the corresponding languages. For English, I need my wife’s help, and for Japanese, I will do it myself. ; The netizen identification system can be considered an account system, but it is only used for netizen identification of services related to my personal website. It uses (multiple) third-party login services and has no password; the comment system is the main reason The Disqus I use now has been blocked, which has a great impact on communication with netizens. I want to build a comment system based on the netizen identification system mentioned above and Git. There are other ideas, but these are the first ones.
What these things have in common is: file storage based on Git, not a database such as SQL; based on the decentralized open web idea, it is individual-centered and provides free tools that can be deployed to your own server.
Ole’s thoughts
The so-called “Doubanization” does not mean that it looks like Douban in appearance, but has some of its functions –
Add “Thoughts” like Weibo and Twitter, “My” to display the books, videos, and videos I read, “Moments” to the dynamic timeline, and “People” to allow people related to me to have independent profile pages. and other modules.
Ole ” Goodbye, Blog!” 》
My website was generated using Jekyll. It would be difficult to manage data and generate a dynamic timeline if I relied entirely on it, so it would require drastic changes.
Just do it and start the next day!
Digital “Ouraiverse”
As the transformation work progressed, the project became more and more complex and took on a systematic prototype. I named it ” Ouraiverse” :
Panorama of “Ouraiverse”
The above figure basically covers all aspects of the current system and briefly indicates the relationship between them——
The right-angled square is an independent website or service, the rounded square is the first-level module of “Oleli Flow”, and the circle is the second-level module.
The colors of those right-angled squares represent:
- Sapphire–various independent websites belonging to “Ouraiverse”;
- Dark blue – own incubation projects that do not belong to “Ouraiverse”;
- Pink – third-party services that provide key functions for “Ouraiverse”;
- Dark Orange – a public platform to increase and expand the influence of “Ouraiverse”.
Among them, several websites of “Ouraiverse” are:
- Ouleliu – the main website that displays works created in the form of graphics, text, audio, video, etc., as well as personal updates;
- Ole’s open source software – specializes in displaying open source software, its official website, documents, etc.;
- Ole’s open life – disclosing what he is doing and his progress, outdoor activity data and footprints, appreciation records, etc.;
- The content shared by Ourei – the “Sharing Center”, local personal knowledge base content shared in public or restricted ways;
- Ouraiverse – records the composition, development and changes of the “Ouraiverse”.
The incubation projects all belong to ” Ole’s Digital World “:
- QiiDB – an open data collection based on file storage and an online database available to anyone;
- LinXoid – Personal Internet business card and platform for connecting with others.
As the core of “Ouraiverse”, the main website “Ouraiverse” is mainly composed of 6 major modules:
- Creation (Light Green) – Summarize my works and fragmented information, such as articles , videos , ideas , notes , weekly reports , Q&A , open source software , etc., and select appropriate public platforms for distribution based on the characteristics of the content to accumulate influence;
- Social (purple) – integrates Disqus to support visitor comments, and uses a unique “character” system to show the relationship between me and others;
- Inspiring feedback (yellow) – “Charge” me and the sustainable development of “Ouraiverse” through regular paid ” sponsorship ” or one-time paid ” funding “, I will post it on the ” Thanks ” page, ” Give feedback by increasing exposure on profile pages and advertising spaces;
- Introduction (orange-red) – Let visitors get to know me on the LinXoid personal page , and learn about the website itself on the ” About ” page and ” Ole Universe “;
- Records (dark green) – Check the books I am reading, have read and want to read on the ” Readings ” page, check the movies and TV dramas I am watching, have watched and want to watch on the ” Drama ” page, and check me on the ” Devices ” page All kinds of equipment owned, their data comes from QiiDB ;
- Moments (light blue) – gathers the dynamics of my creation and sharing to form a timeline.
Architecture
After some arduous transformation, the overall structure is roughly as shown in the figure below:
Overall structure
To put it simply, the data originally generated by Jekyll for static websites is stripped from the website source code and stored according to a consistent structure , making it independent of specific application scenarios like a database and centrally managed as a data source.
The most important data sources are QiiDB, which is regarded as a general knowledge base, and the personal knowledge base “Outer Brain”:
brain ├── build # 数据处理脚本│ └── ... ├── data # 数据源│ ├── blog │ │ ├── answers # 问题的回答│ │ ├── changes # 「欧雷宇宙」的变更记录│ │ ├── drafts # 草稿│ │ ├── media # 转载我文章的媒体│ │ ├── murmurs # 想法│ │ ├── notes # 小红书笔记│ │ ├── posts # 文章│ │ ├── series # 文章系列│ │ └── videos # 创作的视频│ ├── collection │ │ ├── lists # 列表│ │ ├── projects # 项目│ │ └── repos # 知识库│ ├── mine │ │ ├── animations # 动画记录│ │ ├── categories # 设备类别│ │ ├── devices # 拥有的设备│ │ ├── dramas # 影视剧记录│ │ ├── games # 游戏记录│ │ └── publications # 书籍记录│ ├── observation │ │ ├── facts │ │ ├── logs # 每日做事日志│ │ ├── memos # 备忘│ │ ├── people # 人物信息│ │ └── requirements # 工作需求│ └── summarization │ ├── dailies # 日报│ ├── notes # 笔记│ └── weeklies # 周报├── shared # 已共享文档│ └── ... └── readme.md
The source code of each independent website is merged from multiple separate Git warehouses into one Git warehouse for management and unified scheduling:
homepage ├── build # 数据及网站处理脚本│ └── ... ├── src # 网站源码│ ├── life # 欧雷的开放生活│ │ └── ... │ ├── meta # 欧雷宇宙│ │ └── ... │ ├── oss # 欧雷的开源软件│ │ └── ... │ ├── ourairyu # 欧雷流│ │ └── ... │ └── share # 欧雷共享的内容│ └── ... └── readme.md
The scripts in the website source code repository are used to:
- Convert data sources into data needed for website construction, especially for ” moments “;
- Start a local server to debug website functions and styles, and deploy to a cloud server or GitHub Pages.
The scripts in the personal knowledge base and website source code repository are executed using simplified and unified npm scripts:
- Convert data –
npm run build [module]; - Start debugging –
npm start; - Deploy the website –
npm run deploy.
The specific logic is written in the JS file under build folder, and is based on KnoSys to process data sources that comply with QiiDB data specifications and some website source codes of static website generators.
Conclusion
The main problems caused by this transformation are –
Building a website requires data converted from data sources. These “intermediate files” occupy a lot of disk space. The more data and websites there are, the more space is occupied. The remaining space on the disk becomes less and less visible to the naked eye.
There are too many source code files on the website, and the compilation time has become very long. Each deployment of the main website “Oleliu” takes about half an hour…
The basic idea to solve these two problems is to pipeline the website construction process, that is, to directly generate the final web page and related files from the data source through streaming conversion.
This article is reproduced from: https://ourai.ws/posts/doubanized-static-website/
This site is only for collection, and the copyright belongs to the original author.