I have always had the habit of taking notes, both at work and at study. However, with the replacement of note-taking software and frequent migration of data in recent years, the notes’ content has gradually become scattered and decentralized, lacking systematicity and integrity. In order to better accumulate and reuse this knowledge, I decided to build a document website, sort out and integrate past notes, and gradually build a knowledge database with clear structure and complete content.
Below are some of the attempts and practices I have made in this process.
K8s: Set up a cluster without doing anything
Driven by a "hand itch", I deployed a K8s cluster on the server (interested friends can read this article:Build a CI/CD system with a server bought at 99 yuan). Although this is not a necessary step to build a document website, as a static website, it is actually usedhttpdorIISThat's enough. Deploying K8s on servers is mainly to learn more about K8s.
Currently, my cluster consists of two servers: one is Alibaba Cloud's ECS of 99 yuan per year, and the other is Huawei Cloud's lightweight application server (the original Tencent Cloud experience version has expired). Both servers are configured with 2 cores and 2G, forming a cluster across public networks. It should be noted that this architecture will be significantly affected in terms of access speed, especially when bandwidth is not ideal. If possible, it is recommended to use the same cloud service provider's host to reduce network latency.
The main operating node is actually the server of Huawei Cloud. Although useK3sThe server in the built cluster is both a Master and a Worker, but because I deployed it on this machineArgo CD, coupled with the already tight memory resources, it makes it difficult to run. It was closed laterkdump, barely squeeze out about 200MB of memory, which is considered stable operation.
Argo CD: A lightweight and easy-to-use GitOps implementation
Considering that I don’t need a complete DevOps platform and have no enterprise-level resources, I chose the open source and good reputation GitOps tool —Argo CD. Its main function is to automatically deploy the document website: after each document is updated and pushed to the Git repository, the CI process is completed and built.Argo CDThe new version will be automatically pulled and deployed.
Although there is a slight learning cost in the early stage of configuration, the convenience brought by getting started is very obvious: deployment automation, version rollback, and configuration tracking are all available. As for the current results, I am personally quite satisfied. Every time I add a document and push it to the Git repository, I don’t care. The program will automatically update and deploy after the CI execution is completed.
## Github Actions: Free Automated Build Tool
I originally usedHarness CI, but since the website source code is hosted on GitHub, it is used directlyGithub ActionsReplaced the originalHarness CI. Here is a small surprise - for front-end projects,GitHub ActionsInstallationnode_modulesExtremely efficient. And it runs inGitHubIn the hosting environment, I don’t need to worry about insufficient server memory. After all, it’s just a joke, and if I struggle a little more, I won’t be able to continue playing.
The core process of CI is as follows:
- Install dependencies and build static resources;
- Package the build results into
DockerMirror; - Push the mirror to Alibaba Cloud container repository;
- Update the mirror version number in the deployment configuration, triggering
Argo CDAutomatic deployment.
The only disadvantage is that the overall operation isGithubThe access is not stable, resulting inArgo CDSometimes the latest configuration cannot be pulled. However, this does not affect overall use, because I don't have high requirements for real-time updates on online document, and usually it can return to normal within a few minutes.
Docusaurus: Open Source Documentation Framework
To organize these notes, I chose the open source documentation framework developed by FacebookDocusaurus. It is basedMarkdownandReactThe static website generator is designed for building document websites. It is both simple and easy to use and highly customized. compared toVuePress, I preferDocusaurusFlexibility in custom page development, it supports MDX by default, allowing inMarkdownUse directly inReactComponents, this brings great convenience to front-end developers.
at the same time,DocusaurusSome official plug-ins and functional modules are provided, such as:
- Search (the number of related plugins should be the largest)
- Internationalization (i18n)
- PWA Support
- Multi-version documentation
- Blog System
Although the plug-in ecosystem is not as good asVuePressRich, but the core functions are already very complete, especially suitable for structured and systematic technical knowledge sorting.
Performance optimization measures
In order to improve the access speed of the website, under the conditions of limited resources, I mainly did two optimization tasks:
- Configure HTTPS: This is the prerequisite for enabling HTTP/2. The use of HTTP/2 is mainly to break through the browser's concurrent connection restrictions and thereby improve website loading speed.
-
Enable content compression:pass
TraefikMiddleware implements content compression. In the event of bandwidth limitations, enabling compression can significantly speed up content transmission.
at last
The website has been deployed for a while and some documents have been sorted out. If interested, you can visitView related content.