Предисловие
Vercel — отличная бессерверная платформа. Мы можем использовать её для создания простой фотохостинговой службы.
| Тариф | Размер базы данных | Чтение | Запись | Количество запросов | Длительность запроса | Нужны ли проекты |
|---|---|---|---|---|---|---|
| Hobby | 250 МБ/мес | 100 млн/мес | 100 млн/мес | 100 млн/мес | 1 час/мес |  |
Инструкция
-
Зарегистрируйтесь в Vercel, можно войти через GitHub
-
Создайте репозиторий (кликните «Create» для быстрого создания): Создать
-
На следующей странице укажите имя и добавьте Blob Store, затем нажмите «Done»
Внимание: каждому пользователю разрешено создать только один Vercel Blob Storage!
-
Дождитесь анимации успешного развёртывания и нажмите «Continue to Dashboard».
-
Перейдите в Settings → Environment Variables, найдите переменную BLOB_READ_WRITE_TOKEN в самом низу, нажмите «Copy» — она будет выглядеть так:
vercel_blob_rw_*************************************
-
Вернитесь в Settings → Functions и измените регион на Hong Kong (East) – hkg1 или Tokyo, Japan (Northeast) – hnd1
-
Вернитесь на главную страницу Dashboard и нажмите кнопку, чтобы перейти в созданный GitHub-репозиторий:
- Откройте файл .env.example и вставьте скопированное значение в конец, формат такой:
BLOB_READ_WRITE_TOKEN=vercel_blob_rw_*******************************
- Откройте [Main Blob Storage] / app / page.tsx и измените содержимое на китайский язык (рекомендуется сохранить ссылки на оригинальный сайт), можно ориентироваться на мою конфигурацию:
import Image from 'next/image'
import Link from 'next/link'
import ExpandingArrow from '@/components/expanding-arrow'
import Uploader from '@/components/uploader'
import { Toaster } from '@/components/toaster'
export default function Home() {
return (
<main className="relative flex min-h-screen flex-col items-center justify-center">
<Toaster />
<Link
href="https://vercel.com/templates/next.js/blob-starter"
className="group mt-20 sm:mt-0 rounded-full flex space-x-1 bg-white/30 shadow-sm ring-1 ring-gray-900/5 text-gray-600 text-sm font-medium px-10 py-2 hover:shadow-lg active:shadow-sm transition-all"
>
<p>可自改内容这是一个横幅</p>
<ExpandingArrow />
</Link>
<h1 className="pt-4 pb-8 bg-gradient-to-br from-black via-[#171717] to-[#575757] bg-clip-text text-center text-4xl font-medium tracking-tight text-transparent md:text-7xl">
可自改这是大标题
</h1>
<div className="bg-white/30 p-12 shadow-xl ring-1 ring-gray-900/5 rounded-lg backdrop-blur-lg max-w-xl mx-auto w-full">
<Uploader />
</div>
<p className="font-light text-gray-600 w-full max-w-lg text-center mt-6">
<Link
href="https://vercel.com/blob"
className="font-medium underline underline-offset-4 hover:text-black transition-colors"
>
可自改这是标题
</Link>{' '}
Web. Built with{' '}
<Link
href="https://nextjs.org/docs"
className="font-medium underline underline-offset-4 hover:text-black transition-colors"
>
Next.js App Router
</Link>
.
</p>
<div className="sm:absolute sm:bottom-0 w-full px-20 py-10 flex justify-between">
<Link href="https://vercel.com">
<Image
src="/vercel.svg"
alt="Vercel Logo"
width={100}
height={24}
priority
/>
</Link>
<Link
href="https://github.com/vercel/examples/tree/main/storage/blob-starter"
className="flex items-center space-x-2"
>
<Image
src="/github.svg"
alt="GitHub Logo"
width={24}
height={24}
priority
/>
<p className="font-light">Github</p>
</Link>
</div>
</main>
)
}
- После сохранения система выполнит повторное развёртывание. Затем вернитесь в Settings → Domains, добавьте свой домен (убедитесь, что у вашего регистратора доменов есть запись типа A: 76.76.21.98, и просто добавьте её).
- Готово!
Подсказка: на странице Storage можно посмотреть статус репозитория, например размер, статистику чтения/записи и т. д.
Демонстрация
Заключение
Эта страница может выглядеть не очень красиво, но если есть навыки, можно доработать самостоятельно! Этот метод подходит для блогеров, которые только что запустили свой блог, однако при длительном использовании скорость может быть низкой, поэтому можно использовать CDN для ускорения.
{width=“690” height=“81”}