Linux系统下本地网站CDN资源离线化的便捷实现方案咨询

方法一：用grep+wget+sed手动分步处理 #

适合需要精准控制资源下载和替换的场景：

• 提取CDN链接：递归搜索网站文件夹中所有外部JS/CSS资源链接，去重后保存到文件

  grep -rE 'https?://.*\.(js|css)' /path/to/your/site | grep -v 'localhost\|127.0.0.1' | awk -F '"' '{print $2}' | sort -u > cdn_links.txt
  

  （可调整正则表达式，比如只匹配jquery、datatables相关链接：grep -rE 'https?://.*(jquery|datatables).*(js|css)'）

• 批量下载资源到本地：创建本地资源目录，批量下载所有CDN资源

  mkdir -p /path/to/your/site/assets/lib
  cat cdn_links.txt | xargs -I {} wget -P /path/to/your/site/assets/lib {}
  

• 批量替换网页中的CDN链接：将每个CDN链接替换为对应的本地相对路径

  while read -r link; do
      filename=$(basename "$link")
      sed -i "s|$link|./assets/lib/$filename|g" $(grep -rl "$link" /path/to/your/site)
  done < cdn_links.txt
  

• 清理临时文件：

  rm cdn_links.txt
  

方法二：自动化Shell脚本 #

把上述步骤整合成脚本，一键完成所有操作：

#!/bin/bash
# 配置网站目录和本地资源存储目录
SITE_DIR="/path/to/your/site"
LOCAL_LIB_DIR="$SITE_DIR/assets/lib"

# 创建本地资源目录
mkdir -p "$LOCAL_LIB_DIR"

# 提取并去重CDN资源链接
grep -rE 'https?://.*\.(js|css)' "$SITE_DIR" | grep -v 'localhost\|127.0.0.1' | awk -F '"' '{print $2}' | sort -u > cdn_links.txt

# 批量下载资源
while read -r link; do
    wget -P "$LOCAL_LIB_DIR" "$link"
done < cdn_links.txt

# 批量替换链接为本地路径
while read -r link; do
    filename=$(basename "$link")
    sed -i "s|$link|./assets/lib/$filename|g" $(grep -rl "$link" "$SITE_DIR")
done < cdn_links.txt

# 清理临时文件
rm cdn_links.txt

使用方法：将脚本保存为cdn_to_offline.sh，赋予执行权限chmod +x cdn_to_offline.sh，然后运行./cdn_to_offline.sh。

方法三：用httrack镜像本地网站（更省心） #

通过临时搭建本地HTTP服务，让httrack自动抓取并替换所有外部资源：

• 启动本地HTTP服务器：

  cd /path/to/your/site && python3 -m http.server 8000
  

• 新开终端运行httrack镜像：

  httrack http://localhost:8000 -O /path/to/offline-site --mirror --convert-links --adjust-extension
  

• 镜像完成后，/path/to/offline-site目录下就是完全离线可用的网站，所有CDN资源已下载到本地，链接自动替换为相对路径。

注意事项 #

• 部分动态加载的资源（如通过JS动态插入的CDN链接）可能无法被静态提取工具捕获，需手动检查补充
• 替换路径时确保相对路径正确，避免资源加载404
• 请确认所下载的CDN资源允许离线使用，遵守相关版权协议

内容的提问来源于stack exchange，提问作者Ayush Gupta