CDN_for_blog

Why CND?

放在Github的资源在国内加载速度比较慢，因此需要使用CDN加速来优化网站打开速度，jsDelivr + Github便是免费且好用的CDN，非常适合博客网站使用。

USE CDN

1. 创建一个名为CDN的github仓库
2. 把仓库clone到本地
3. 将图片文件存储到仓库中并上传
   注：jsDelivr不支持加载超过20M的资源
4. 发布仓库

• 点击release发布仓库
  
• 注明版本号后发布
  

5. 通过如下形式来使用

// load any GitHub release, commit, or branch

// note: we recommend using npm for projects that support it

https://cdn.jsdelivr.net/gh/user/repo@version/file

例如：在我的github仓库中有这么一个文件

https://github.com/liuyaanng/CDN/blob/1.02/blog_images/CDN_for_blog/release.jpg

使用jsdelivr加速访问就是：

https://cdn.jsdelivr.net/gh/liuyaanng/[email protected]/blog_images/CDN_for_blog/release.jpg

其中1.02是我发布的版本号，当然也可以使用模糊版本号的方法进行访问，无论哪种形式，都可以明显的感觉到访问速度快了很多。

另外，在我使用的过程中，发现在第一次发布之后，以后在使用图片可将版本号换成master直接访问。

Generate Jsdelivr Link

1. 使用脚本生成 **更优解见2 **

• 我写博客的截图均是由Xnip 生成，截图文件存储目录Pictures/Xnip,故我写了一个小脚本来实现

#!/bin/bash
# @author:liuyaanng

rep_path=~/Github/Myrep/CDN/
blog_photo_folder=blog_images
path=~/Pictures/Xnip
prefix=https://cdn.jsdelivr.net/gh/liuyaanng/CDN@
files=$(ls $path)
check_v=0
check_f=0
help_text="This is a script for move the picture files to github, and get the jsdelivr link quickly. This scripts run with 2 arguments.\n
1. cdn_server.sh -v version -f folder. version is the release version
,folder is the pictures's file folder. \n
for example: cdn_server.sh -v 1.0 -f cdn_for_blog, it will get\n
https://cdn.jsdelivr.net/gh/liuyaanng/[email protected]/blog_images/cdn_for_blog/filename\n
if you do not use version, please use:cdn_server.sh -v master -f foldername.
2. cdn_server.sh -h    Show help content."

while getopts :v:f:h opt
do
    case "$opt" in
        v) version=$OPTARG
             check_v=1;;
        f) folder=$OPTARG
             check_f=1;;
        h) echo -e $help_text
             exit 1;;
        ?) echo "sync error. Use 'cdn_server.sh -h' for help.";;
    esac
done
print_link(){
if [ ! -n "$files" ]; then
    echo "There is no file in Xnip folder."
else
    for filename in $files
    do
        echo $prefix$version/$blog_photo_folder/$folder/$filename
        mv $path/* $rep_path$blog_photo_folder/$folder
        echo "move file $filename success"
    done
    cd $rep_path
    git add .
    git commit -m "upload $folder"
    git push
fi
}

if [ $check_v -eq $check_f ]; then
    print_link
else
    echo "need 2 args but given 1."
fi

该脚本有以下功能：

1. 将截图转到github仓库中并提交
2. 自动生成jsdelivr链接

如果你想使用的话只需修改上面的路径信息就行了。

脚本有两个参数，你可以用cdn_server.sh -h 来查看帮助信息。

1. -a version. -a参数后跟发布的版本号
2. -f folder. -f参数后跟仓库中文件夹名

注意：版本号不是必需的，是为了区分新旧资源，如果不使用版本号，将会直接引用最新资源. 若不想指定版本号（第一次发布之后可用），可以直接使用 -a master.

例如：

cdn_server.sh -a master -f CDN_for_blog

2. 使用PicGO工具实现一键上传并生成CDN链接

PicGo
文档太详细,不想做过多介绍了

推荐文章

• 魔改hexo博客
• hexo大坑