De-CDN (localization) of CSS libraries
This article is a translation of the following my article:
Original: CSSライブラリの脱CDN（ローカル化）
* Translated automatically by Google.
* Please note that some links or referenced content in this article may be in Japanese.
* Comments in the code are basically in Japanese.
by bokumin
De-CDN Strategy for CSS Libraries
Introduction
When creating a website using popular libraries such as Tailwind or Font Awesome, many developers choose to load these resources from a CDN (Content Delivery Network). There is also a way to manage these libraries on a local server, which has many benefits. Up until now, this server had been using a CDN, but I thought it would be more convenient to manage it locally, so I decided to do that this time.
I will explain the advantages and disadvantages.
Advantages of moving from CDN to local management
The first advantage is that external dependencies are eliminated. If you rely on a CDN service, the appearance and functionality of your website may be affected if that service goes down. In 2019, Cloudflare CDN major outage affected many websites. By managing locally, you can completely eliminate this risk (although you can’t say that your own server will never stop)
Secondly, stable performance can be expected. Resources can always be loaded at a constant speed, regardless of the connection status to the external server. This improves the user experience, especially in environments and regions where connection speeds are unstable.
The third is Enhanced privacy and security. This is better from a privacy perspective since the viewer’s browser does not need to connect to an external CDN server. It also reduces the risk of third-party cookies and tracking.
The fourth thing is that versions can be managed freely. Unexpected library updates on the CDN side can change the appearance and behavior of your site. Local management lets you apply updates at your own pace.
Disadvantages of moving from CDN to local management
First, Everyone may cache CDN-managed libraries. If you change to local hosting, it may take a while for the page to display, although it is only the first time it loads.
Secondly, regular maintenance is required. If a vulnerability is discovered in a library, you must immediately update it to the latest version. You will need to regularly check security-related information on each library’s official website and GitHub repository. Also, you will need to plan regular updates, which is a hassle.
I personally decided that the advantages outweighed the disadvantages and moved to local management, but I think the best choice will depend on the size and requirements of the project. Please consider it according to your own situation.
Next, I will introduce the implementation method.
How to implement
To migrate the library locally, follow the steps below
First, use the curl command to obtain the library from the cdn.
# 必要なディレクトリを作成
mkdir -p css/fontawesome/webfonts
# Tailwind CSSを取得
curl -o css/tailwind.min.css https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css
# Font Awesome CSSを取得
curl -o css/fontawesome/all.min.css https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css
# Font Awesomeのフォントファイルを取得
curl -o css/fontawesome/webfonts/fa-brands-400.woff2 https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/webfonts/fa-brands-400.woff2
curl -o css/fontawesome/webfonts/fa-regular-400.woff2 https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/webfonts/fa-regular-400.woff2
curl -o css/fontawesome/webfonts/fa-solid-900.woff2 https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/webfonts/fa-solid-900.woff2
Just to be sure, use the sed command to format all.min.css.
sed -i 's|../webfonts/|/css/fontawesome/webfonts/|g' css/fontawesome/all.min.css
Then update the link reference in the HTML file
CDNの場合
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
<ローカル管理の場合
<link href="/css/tailwind.min.css" rel="stylesheet">
<link href="/css/fontawesome/all.min.css" rel="stylesheet">
If the site is displayed without any problems, it is complete.
Change versioning
Using a version control system such as Git to record the library update history will make it easier to identify the cause of a problem when it occurs.
# 例：Gitでの変更記録
git add css/tailwind.min.css css/fontawesome/
git commit -m "Update Tailwind CSS to v2.2.19 and Font Awesome to v6.0.0"
A more efficient management method is to centrally manage external libraries in a dedicated directory (e.g. ~/lib/css/ or /usr/local/share/web-libraries/) and reference them from each project using symbolic links.
# ライブラリを共通ディレクトリで管理
mkdir -p ~/lib/css/tailwind
mkdir -p ~/lib/css/fontawesome
# 最新バージョンをダウンロード・配置
curl -o ~/lib/css/tailwind/tailwind-2.2.19.min.css https://cdn.example.com/tailwind-2.2.19.min.css
curl -o ~/lib/css/fontawesome/fontawesome-6.0.0.min.css https://cdn.example.com/fontawesome-6.0.0.min.css
# プロジェクト内にシンボリックリンクを作成
ln -s ~/lib/css/tailwind/tailwind-2.2.19.min.css /srv/www/yourweb/css/tailwind.min.css
ln -s ~/lib/css/fontawesome/fontawesome-6.0.0.min.css /srv/www/yourweb/css/fontawesome.min.css
# 変更をGitで記録<
git add css/
git commit -m "Link Tailwind CSS v2.2.19 and Font Awesome v6.0.0"
By using symbolic links, you can easily change the version, and you can use different versions for each project, which is useful in many ways.
Summary
While managing CSS libraries locally can be an effective way to increase the reliability, performance, and security of your site, you should be aware that without regular updates and maintenance, you may not be able to take full advantage of these benefits and may even increase vulnerability risks.
End
Continued (2025 09/09)