jsDelivr+Github self-built free CDN

Why use CDN?

The full name of CDN is Content Delivery Network, that is, Content Delivery Network. CDN is a content distribution network built on the network, relying on edge servers deployed in various places, through the load balancing, content distribution, scheduling and other functional modules of the central platform, so that users can obtain the desired content nearby, reduce network congestion, and improve user access. Response speed and hit rate. The key technologies of CDN mainly include content storage and distribution technology.
-- Baidu Encyclopedia

Generally speaking, CDN has two main functions:

• Basic function: can provide static file content
• Main function: Accelerate content acquisition, improve access speed

what is jsDelivr

A free, fast, and reliable Open Source CDN for npm, GitHub, Javascript, and ESM.
-- from https://www.jsdelivr.com/

Simply put, it can provide CDN services for open resources (such as npm/github release, etc.).

Network distribution: https://www.jsdelivr.com/network#map

It can be seen that there are also several servers in China, and you can use it in China without worrying about the speed at all.

What can jsDelivr + Github do?

can load the file content in the github repository through jsDelivr.

Reference resources via jsDelivr

Commonly used: use the contents of the release package

Specify the version:

https://cdn.jsdelivr.net/gh/你的用户名/你的仓库名@发布的版本号/文件路径

For example: https://cdn.jsdelivr.net/gh/specialCoder/cdn@0.1.3/public/jquery/jquery.min.js
It is to load this file under the v0.1.3 version: https://github.com/specialCoder/cdn/blob/main/public/jquery/jquery.min.js

describe	content
username	specialCoder
warehouse name	cdn
relaese version number	0.1.3
file path	/public/jquery/jquery.min.js

Other methods of use

Take jquery as an example: https://github.com/jquery/jquery

// 使用版本范围而不是特定版本
https://cdn.jsdelivr.net/gh/jquery/jquery@3.2/dist/jquery.min.js   https://cdn.jsdelivr.net/gh/jquery/jquery@3/dist/jquery.min.js
 
// 完全省略该版本以获取最新版本
https://cdn.jsdelivr.net/gh/jquery/jquery/dist/jquery.min.js
 
// 将“.min”添加到任何JS/CSS文件中以获取缩小版本，如果不存在，将为会自动生成
https://cdn.jsdelivr.net/gh/jquery/jquery@3.2.1/src/core.min.js
 

Other usage

// 加载任何Github发布、提交或分支
https://cdn.jsdelivr.net/gh/user/repo@version/file

// 在末尾添加 / 以获取资源目录列表（返回以html文件，页面中展示列表）
https://cdn.jsdelivr.net/gh/jquery/jquery/

github section

Through the above we know that jsDelivr can load the content under the github release, then we need:

1. Create a github cdn repository
2. release version
3. Automatically publish version when implementing push

Create a github cdn repository

Visit https://github.com/ to create. Currently, there is no problem in creating public repositories to obtain files (private repositories have not been tried yet).
Then clone the warehouse code to the local, add the files you need to the warehouse, and submit it to the remote.

release version

tag and release [to be added]

On the warehouse home page, click the Release button in the right area:

Click on "Create a new relaese":

Create release:

• choose tag: choose an existing tag or create a new one, about git tag
• target: choose a branch or a commit. It is recommended to choose the master branch
• title: Enter the title, it will be displayed in the version list
• description: enter a version description
• Attach files: ignore
• pre-release: Can be checked when releasing a beta version

Enter and then select "Publish relasese" on it.

auto-publish

Use github actions to automate publishing:

• The mian branch will be released when there are commits
• Use verison in package.json to control tag and version number (tag and version number are the same)
• Release the official version every time

.github/workflow/publish.yml Contents:

# This is a basic workflow to help you get started with Actions

name: release CI

# Controls when the workflow will run
on:
  # Triggers the workflow on push or pull request events but only for the main branch
  push:
    branches:
      - main

# A workflow run is made up of one or more jobs that can run sequentially or in parallel
jobs:
  # This workflow contains a single job called "build"
  build:
    # The type of runner that the job will run on
    runs-on: ubuntu-latest

    # Steps represent a sequence of tasks that will be executed as part of the job
    steps:
      # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
      - name: Checkout
        uses: actions/checkout@v2

      - name: 读取当前版本号
        id: version
        uses: ashley-taylor/read-json-property-action@v1.0
        with:
          path: ./package.json
          property: version

      # Runs a set of commands using the runners shell
      - name: Release
        # uses: softprops/action-gh-release@v1
        # if: startsWith(github.ref, 'refs/tags/')
        uses: actions/create-release@master
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
        with:
          tag_name: v${{steps.version.outputs.value}}
          release_name: v${{steps.version.outputs.value}}
          body: Release v${{steps.version.outputs.value}}
          draft: false
          prerelease: false

At this point, the github part is complete.

Summarize

We have implemented a self-made CDN and can automatically publish. So you can use it happily~
Thinking 🤔 How to make it an interface? ? This saves us the expense of purchasing file storage when there are fewer file needs.

refer to

• Free CDN: jsDelivr+Github How to use