Blog Address: Shazun Station (kuizuo.cn)

Kuizuo /blog: Zun’s personal blog (github.com)

After nearly half a year, I didn’t arrange my articles well, and I didn’t write my blog like a person. 😂

I haven’t updated my blog for more than half a year. I have been busy writing projects (writing soft ones). Then I happened to see an Up front-end engineer at site B, which recommended a static website generator based on React driver. React Vuepress (mostly document-based). When I first saw it, I was amazed. The code is also open source, so I might as well build a code word, immediately git clone the source code and look through the document, and start to tired and tasteless code word.

But the number of docusaurus users in China is really low. Vuepress is rotting on the streets…

Set up process

Or want to credit the first, based on the big two open on the open source code (actually, that is, in a background, delete the Google ads and B standing video comments, there are also some unnecessary baidu push and statistical plug-in), and then is to spend a little time to sort out these years (actually two years) involved in the technology stack.

The reason why I set up this blog is that the domain name of Kuizuo.cn has just been recorded, but the previous blog is really not able to continue (after all, it hasn’t been updated for half a year), and then my technology stack is preparing to transform. The former technology stack is in Vue2.0 + JavaScript. Vue2 is pretty much exhausted (especially element UI), books are pretty much exhausted, plus Vue3 is more than six months old (the front end technology is getting updated really fast), Just B station is still silicon Valley video out of the [is still Silicon Valley] 2021 latest Vue quick start tutorial | VUe3.0 entry to master _bilibili _bilibili (strongly recommended!!) I found an open source project Vben Admin (VVbin.cn) that uses the latest Vue3, Vite, TypeScript stacks. Then the blog is based on React. So I learned React and started building this blog.

Change the part

background

The first is the background image of the home page. This is an SVG image from the website unDraw – Open Source Illustrations for Any idea, but the illustrations are a little too many, so I tried to edit it myself, as shown below

Anyway, I felt a little awkward (maybe all the screens were blue and it looked like Windows blue screen), so I used the image on the front page for the moment. We’ll redesign it then.

Go to Google Ads

The source code is to add Google ads, although said that if there is a certain number of visits, each month can also have an additional income, but for the sake of simplicity and some tedious advertising, in the corresponding code for annotation. (I don’t know.)

Configuration algolia

Search | Docusaurus

Algolia in the source code is the blog of the original author, so you need to register the Algolia account, apply for the relevant key, and then fill in the corresponding configuration.

I’m going to describe the configuration process (it took a few hours after all).

Select Algolia, create index on the left side of the indices, and obtain Application ID and API Key from API Keys.

The API KEY you fill into docusaurus.config.js is the search-only API KEY

 themeConfig: {
     algolia: {
       apiKey: "xxxxxxxxxxx",
       appId: "xxxxxxxxxxx",
       indexName: "kuizuo",
     },
 }
Copy the code

And then to DocSearch: Search made for documentation | DocSearch (algolia.com) to fill out your web site and email

It would then run a code crawl every 24 hours to generate your site, but I waited and it didn’t work, so I decided to run the crawler code myself and push it to Algolia

Manually crawl

This is document operation Run your own | DocSearch (algolia.com)

The system I choose is Linux, running crawler code in the Docker environment, so Docker must be installed

Install jQ (github.com) I have selected 0Install to install jQ (the installation may take a little bit longer). For details, you can check the documentation and see the installation result on the console

 [root@kzserver kuizuo.cn]# jq --version
 jq-1.6
Copy the code

Then create a. Env file in any directory and fill in the corresponding APPID and API KEY.

 APPLICATION_ID = YOUR_APP_ID;
 API_KEY = YOUR_API_KEY;
Copy the code

Then create a docSearch. json file (name whatever you want) and fill in the corresponding configuration code. Docsearch. json at master · algolia/ docsearch. configs (github.com)

Change the index name and site name

 {
   "index_name": "kuizuo",
   "start_urls": [
     "https://kuizuo.cn/"
   ],
   "sitemap_urls": [
     "https://kuizuo.cn/sitemap.xml"
   ],
   ...
 }
Copy the code

Run the docker command

 docker run -it --env-file=.env -e "CONFIG=$(cat docsearch.json | jq -r tostring)" algolia/docsearch-scraper
Copy the code

Then wait for the container to run and crawl your site

[root@kzserver kuizuo.cn]# docker run -it --env-file=.env -e "CONFIG=$(cat docsearch.json | jq -r tostring)" algolia/docsearch-scraper Getting https://kuizuo.cn/sitemap.xml from selenium Getting https://kuizuo.cn/ from selenium >  DocSearch: https://kuizuo.cn/ 12 records) Getting https://kuizuo.cn/essay from selenium Getting https://kuizuo.cn/resources from selenium Getting https://kuizuo.cn/docs/skill from selenium Getting https://kuizuo.cn/page/2 from selenium Getting https://kuizuo.cn/tags/terminal from selenium Getting https://kuizuo.cn/Windows%20Terminal%E7%BE%8E%E5%8C%96 from selenium Getting https://kuizuo.cn/Js%E6%95%B0%E7%BB%84%E5%AF%B9%E8%B1%A1%E5%8E%BB%E9%87%8D from selenium Getting https://kuizuo.cn/tags/chrome from selenium Getting https://kuizuo.cn/Wappalyzer%E8%AF%86%E5%88%AB%E7%BD%91%E7%AB%99%E4%B8%8A%E7%9A%84%E6%8A%80%E6%9C%AF from selenium Getting https://kuizuo.cn/tags/%E5%B7%A5%E5%85%B7 from selenium Getting https://kuizuo.cn/tags/vscode from seleniumCopy the code

Finally open the Algolia console and the following page will be displayed, indicating success

Env file configuration and the use of Docker. After configuration, the feeling of using full-text search is different. It can accurately locate every word and display the recent browsing record, which also allows me to touch a new skill point.

The deployment of

Because I have personal domain name and the server, so before deployment project is directly to the compiled files directly uploaded to the server, and then through the nginx can directly through the domain name, it is convenient, but the drawback is obvious, each update is a blog, you need to recompile, and get back to the file, You can’t automate compilation and deployment. So I thought about using third-party services for deployment.

webify

5 minutes, from 0 to 1 online personal website! (juejin.cn)

Webify is Tencent cloud’s Web application hosting service that can put native code

I’m going to go with Docusaurus2, because that’s what I’m using

Then choose the hosting platform (Github, Gitlab, Gitee). Here I choose Github, create a new repository, name the project, deploy the application, and wait.

Then access the domain name provided (long, but accessible)

Then you just need to override the local code to the remote repository, or pull the code from Github when you start building. After that, as soon as the code is uploaded to the remote repository (by adding a Webhooks to the repository), Webify automatically pulls the corresponding code and does an NPM build, and you have an automatic-deployable blog.

Add a custom domain name

That’s definitely not what I want, so JUST click Apply Settings and add the domain name in the custom domain name configuration

:::danger

Note that if the domain name is already on the CDN, it needs to be removed, otherwise CDN Resource exist will be prompted

: : :

cost

It works, but it costs money. It’s pay-as-you-go.

However, the cost is really not high, the capacity of 5g is only 2.1 yuan (not enough to buy a pack of snacks), if the site is not a massive traffic intrusion, it is basically enough (in case no one visits, and you don’t even need to pay for the package), I am currently using Webify to deploy the blog, mainly in China. At the same time also provides the corresponding CDN service and can greatly improve the access speed, really much faster.

There are other third-party hosting platforms, like gitHub Actions.

Follow-up consideration added

Resource navigation

I wanted to organize my bookmarks for a long time, but I didn’t have much time to do it (actually, I was lazy). Sometimes WHEN I saw a great resource, it was like looking for a needle in a haystack to find it again a few days later. Bookmarks and favorites are also messy (as is my desktop and display desktop, but I have EveryThing).

Implemented: Resource navigation – Zun station (kuizuo.cn)

comments

Docusaurus configuration Gitalk commenting plugin – Shame Site (kuizuo.cn)

The project of actual combat

Yes, I have written a lot of projects, but most of them are not easy to show. They are either company projects or customized projects, which I can’t show directly. If there is a demo, it will probably be some non-profit, functional project product, certainly with the source code.

Of course, if you have any requirements, you can also ask me to customize (if there is time)

The last

Personally, I is satisfied to the blog search, SEO, diablo mode, blog list, there is no other blog system so fancy, this is a clean and tidy, secondly, I personally don’t like the article background, especially that with articles irrelevant figure, image reading may reduce fatigue, but focus on the content, rather than the background.

And based on Docusaurus, it will be much easier to document a project.

Still want to thank under the big guy open source code, at the same time B station video tutorial is also very good, let me learn some cutting-edge front-end technology. 😄

Also not much waste of breath, since the blog has been built, so the next can concentrate on writing articles.