https://github.com/zernonia/supabase-cdn-transformation
https://github.com/zernonia/supabase-cdn-transformation
Last synced: 6 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/zernonia/supabase-cdn-transformation
- Owner: zernonia
- License: mit
- Created: 2021-09-10T17:41:11.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2021-09-11T03:06:26.000Z (about 4 years ago)
- Last Synced: 2025-02-14T10:56:32.856Z (8 months ago)
- Language: HTML
- Homepage: supabase-cdn-transformation.vercel.app
- Size: 16.6 KB
- Stars: 14
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
Supabase Storage CDN & Transformation (Alternative Unofficial)
Secured & Simple Supabase Storage CDN & Transformation (Self-hosted).
View Tutorial
·
Report Bug
·
Request Feature
## 🚀 Features
- ☁ CDN
- 🤚 Image Transformation (width, height, quality)
- 🚀 1-Click Deploy!
- 🔒 Hosted on your own Vercel instance
- 👀 No Sensitive info required
## 📇 Inspiration/Showcase
I had a website called [Made With Supabase](https://www.madewithsupabase.com/), which showcase projects that made with Supabase. A problem occurs to me where the images load super-duper slow. Hence, I started to look into this issue.
It turns out that some of the images has around 5MB 🤯, which is too high quality, and wasting data quota as well for all my visitors!
Then, I found out that [Supabase Storage](https://supabase.io/storage)'s CDN and Transformation still Working in Progress. I don't want to wait any longer, and thus, I've created this simple **Serverless CDN and Image Transformation** service for everyone! 🎇✨🎉.
### 🔨 Built With
- [Vercel](https://vercel.com/)
## 🐾 Instructions
1. Click [](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fzernonia%2Fsupabase-cdn-transformation&env=SUPABASE_URL&project-name=supabase-cdn-transformation&repo-name=supabase-cdn-transformation&demo-title=Supabase%20CDN%20Transformation&demo-description=Temporary%20Altnernative%20for%20Supabase%20Storage%20CDN%20%26%20Transformation&demo-url=https%3A%2F%2Fsupabase-cdn-transformation.vercel.app%2F&demo-image=https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1631296527320%2FTH24GsjXyv.png%3Fw%3D1600%26h%3D840%26fit%3Dcrop%26crop%3Dentropy%26auto%3Dcompress)
2. Create a new Git repo.
3. Create a team? You can `skip` it.
4. Key in `SUPABASE_URL` (only support 1 project at once) in the Environment Variables.
5. Wait for deployment
6. Congratulations! Your serverless function is up and running! Enjoy !!! 🎉
7. 🌟 this repo, 🐤 this project, ☕ buy me a coffee?
8. Learn more from this [Blog post](https://blog.zernonia.com/supabase-storage-cdn-and-transformation-with-serverless-function-unofficial).
## How to use
Here are some of the parameter to pass along the new image's url.
```sh
w: width (number of pixel) // optional
h: height (number of pixel) // optional
f: file_name (eg: avatar.png)
b: bucket_name (eg: static)
q: quality (0 to 100) // optional
```
1. Click `Deploy` button above and follow the instruction above.
2. Wrap all the images url in your project's `![]()
` with the following code.
`https://{ url-for-the-serverless-function-you-just-deployed }/api/resize?...`
3. Pass the parameter into the url as query string. (eg:)
`https://.../api/resize?f=avatar.png&b=static&w=1200`
4. Insert the link into `
` and you are done!
## 📜 License
Not Associated with Supabase.
Distributed under the MIT License. See `LICENSE` for more information.
# 📧 Contact
Twitter - [@zernonia](https://twitter.com/zernonia)
Also, if you like my work, please buy me a coffee ☕😳
