The introduction believes that many developers are no strangers to jsDelivr and GitHub. Many WordPress webmasters may not know how to use static resources to realize free CDN acceleration scenarios through jsDelivr. Today, Huige will teach you how to use jsDelivr+Github to realize free CDN acceleration. Note: This idea and idea is only Huige's personal idea and implementation. The final operation and implementation depends on the technology. If you think this content is useless or too simple, please read more articles about this related content by yourself. PS, But after all, there are other websites running on the server, and the concurrency will be very high when users visit at the same time. Even if CDN can help solve most of the requests, there is still some content that needs to be returned to the source. In addition, CDN traffic packets are used up, and old users are very expensive to buy, what should we do? So Huige came up with the idea of jsDelivr and Github. Usually when developing front-end content, many Js need to be loaded, such as JQuery. At that time, many developers will directly reference from jsDelivr, so Huige came up with the idea that if you put the static files of WordPress on GitHub, use jsDelivr for caching, and then use the CDN link of jsDelivr for reference, So when users visit the website, they only load a small amount of dynamic resources from the server, and a large number of static resources are loaded through the CDN of jsDelivr. This can reduce both the server's requests and the use of CDN traffic. Why not! Why use jsDelivr? JsDelivr is a service that provides static resources frequently used on the Web, including JavaScript libraries, jQuery plug-ins, CSS frameworks, fonts, etc. It uses global CDN acceleration to ensure that users in every region can get the best link speed. Using domestic CDN acceleration in mainland China, jsDelivr can use different JavaScript or CSS libraries together, JsDelivr provides image services for projects such as package buckle npm GitHubWordPress. The most important thing is that jsDelivr uses low latency CDN nodes of the network host in China. Here is a screenshot of the domestic delay of the jsDelivr test.
Official website: //www.jsdelivr.com Acceleration address: //cdn.jsdelivr.net Example: Just like using the bootstrap. min. js file in the GitHub repository to accelerate the original GitHub address with jsDelivr //github.com/twbs/bootstrap/blob/main/dist/js/bootstrap.min.jsjsDelivr Acceleration address //cdn.jsdelivr.net/gh/twbs/bootstrap @Main/list/js/bootstrap. min.js If you classify by version, release a version of v4.6.1, and the connection address in GitHub is //github.com/twbs/bootstrap/blob/v4.6.1/dist/js/bootstrap.min.jsjsDelivr The acceleration address of is //cdn.jsdelivr.net/gh/twbs//dist/js/bootstrap.min.js If there are multiple versions in GitHub and you want to ignore the version and load the latest version directly, you can use the latest tag jsDelivr to ignore the version and load the latest version //cdn.jsdelivr.net/gh/twbs/bootstrap @Latest/list/js/bootstrap. min.js Preparation Note: Huige uses the WordPress+b2 theme. Other themes operate similarly to this theme. The following Huige operations and demonstrations are based on the WordPress+b2 theme. Git and WebStorm tools can use other tools instead. WordPress website b2 theme Git (optional) Windows installs Git convenience version and configures environment variables: //www.haah.net/archives/6383.html Add ssh keys to your GitHub according to the following article. The process is to copy the contents of the generated ssh keys file and open //github.com/settings/keys , click New SSH Key, enter the name, and paste the key in to complete the detailed tutorial of IDEA configuration code cloud Gitee: //www.haah.net/archives/6395.htmlWebStorm (Not required) IntelliJ WebStorm 2021.3 Green Easy Edition: //www.haah.net/archives/7020.html Huige Final Effects Tutorial (the content may be too long, please read patiently) PS: The content of jsDelivr cache cannot exceed 50MB, please carefully check whether the resources uploaded by yourself are greater than 50MB, if it is larger than 50MB, please delete useless files by yourself, jsDelivr can only cache static resources, note that it is static resources, if you do not know what is static resources, please Baidu! If you encounter Git errors in this process, please Baidu to solve them! 1. Create a GitHub repository. 2. Download the website root directory/wp content/plugins folder and themes folder to the computer. 3. Pull the GitHub repository 3.1 in WebStorm. Find the code in the repository. SSH>Copy the link at the beginning of the git 3.2. Open WebStorm, click Get from VCS in the upper right corner, select git for version control, and fill in the URL with the link copied in step 3.1 above, The directory can be customized, and then click Clone 4. Copy the website file downloaded in step 2 to 4.1 under WebStorm. Select the locally downloaded website file, and then Ctrl+C copy 4.2. Click the warehouse name in the upper left corner, and then Ctrl+V paste 5. Add the file to the Git local cache warehouse. If the file pops up automatically after pasting and you can add it, click Add directly, At that time, you can ignore this step 6. Submit the modification to GitHub7. Check whether the submission is successful in 7.1. The easiest way is to refresh the Github page to see 8. Get the jsDelivr link. The reason why jsDelivr is used is mentioned in the above example. Let's demonstrate again. The example file is smartideo.css8.1. Find and open the smartideo.css file. Here we see the link is: //github.com/haahs/Res/blob/master/wp-content/plugins/smartideo/static/smartideo.css8.2 The link to jsDelivr is: //cdn.jsdelivr.net/gh/haahs/Res @Master/wp content/plugins/smartideo/static/smartideo.css9. Replace the links in the website file. Here is a simple example 9.1. PHP replacement example 9.2. CSS replacement example PS: Other files can be replaced according to the above example. In fact, the principle of the end is very simple. Pfigo uses simple operation methods and omits some unnecessary operations, You may encounter various problems during the operation. You can leave a message in the comment area below, and I will try my best to help you solve them! If the theme used is not B2, it can be operated, even any program can use this operation (as long as static resources are loaded). If you still don't understand, you can leave a message or contact Huige!
