Основные функции, деплой контрактов и другие активности проекта Fleek.

Fleek — это платформа для лёгкого деплоя и хостинга фронтендов, серверов, бэкендов и сайтов на Web3-инфраструктуре: IPFS, Filecoin, Ethereum, ENS, Arweave и пр.
Ты можешь использовать её как альтернативу Vercel/Netlify, но в децентрализованной среде.

🎁 Потенциальный дроп от Fleek (и не только):

🧬 Почему это важно:

• Fleek запустил Fleek Network (бета)
• Есть признаки подготовки к токеномике (ранее говорили о FLEEK токене)
• Active builder + GitHub + IPFS + ENS = высокая вероятность попадания в snapshot

📣 Как фармить активность (для airdrop)

✅ 1. Деплой часто

• Делай изменения → коммить → пуш
• Даже мелкие апдейты — плюс в актив

✅ 2. Используй разные типы хостинга

• IPFS
• Storage (buckets)
• CDN

✅ 3. Взаимодействуй в Discord

• Делись ссылками на задеплоенные проекты
• Участвуй в ветках обсуждений

✅ 4. Пиши публично

• Треды в Twitter с @Fleek_xyz
• Mirror-посты: "Как автоматизировать деплой dApp через Fleek + GitHub"

✅ 5. Участвуй в Forum + GitHub

• Задавай вопросы на https://forum.fleek.xyz
• Делай issue/PR в open-source проекты Fleek

📦 Основные функции Fleek

1. Frontend Hosting (Frontend Deployment)

• Что делает: позволяет деплоить сайт/фронтенд на IPFS или через Fleek.xyz CDN.
• Поддерживает: React, Vue, Next.js, Astro, Svelte и т.п.
• CI/CD: можно связать с GitHub — автодеплой при каждом коммите.

🔧 Как использовать:

1. Перейди в app.fleek.xyz
2. Авторизуйся через GitHub.
3. Выбери «Create New Site» → «Connect with GitHub».
4. Выбери репозиторий и ветку.
5. Укажи build-команду (например, npm run build) и папку билда (dist, build и т.п.).
6. Выбери децентрализованный хостинг: IPFS, Arweave, и т.п.
7. Нажми Deploy.

📝 После деплоя сайт получит:

• IPFS hash
• Fleek CDN URL (например, https://yourproject.on.fleek.co)

2. Fleek Storage

• Альтернатива AWS S3, но работает поверх Filecoin/IPFS.
• Можешь загружать файлы, папки, создавать buckets.
• Подходит для хранения картинок, JSON, NFT-метаданных и т.д.

🔧 Как использовать:

1. Внутри Fleek выбери раздел Storage.
2. Создай Bucket (например, my-nft-metadata).
3. Загрузи файлы.
4. Получи публичный IPFS CID или ссылку.

3. Fleek Network (Fleek.xyz Edge) — [в бете]

• Распределённая edge-сеть (аналог CDN), но децентрализованная.
• Позволяет деплоить серверные приложения, API и даже функции.

👷 Пример использования:

• Деплой REST API поверх децентрализованного edge.
• Разворачивание SSR-приложения с Next.js.

4. ENS / IPNS / DNSLink

• Привязка домена к IPFS-хостингу.
• Fleek автоматически настраивает DNS и IPNS, если ты используешь ENS-домены.

📣 Как проявлять активность в проекте?

Если ты хочешь участвовать в развитии проекта или привлечь внимание команды (например, для грантов, баунти, или потенциального дропа):

✅ 1. Деплой проектов на Fleek

• Активно деплой сайты, тестируй все функции.
• Делай open-source репы + деплой через Fleek → делись в X/Twitter + тэгай @Fleek_xyz.

✅ 2. Создание и публикация гайдов

• Пиши статьи / туториалы на Mirror или Medium по Fleek: "Как деплоить dApp на IPFS через Fleek", "Как использовать Fleek Storage для NFT".
• Заливай проекты на GitHub и оформляй Readme с Fleek.

✅ 3. Участие в комьюнити

• Вступи в их Discord — отвечай другим, репорти баги.
• Подавай идеи через Fleek Forum.

✅ 4. Contribute в Open Source

• Fleek публикует часть своих инструментов в open-source.
• Участвуй в issues / PR на GitHub: https://github.com/FleekHQ

✅ 5. Интеграции

• Если ты разработчик — попробуй интегрировать Fleek Storage / CDN в свой продукт или децентрализованное приложение.

🧪 Пример: Деплой React-приложения на IPFS через Fleek

1. Создаёшь React-проект:

bashКопироватьРедактироватьnpx create-react-app myfleekapp
cd myfleekapp
npm run build

1. Пушишь код на GitHub.
2. Заходишь на app.fleek.xyz, подключаешь GitHub.
3. Выбираешь репозиторий, указываешь:

• Build Command: npm run build
• Publish Directory: build

1. Жмёшь Deploy.

💥 Через минуту у тебя будет dApp на IPFS, работающий через Fleek CDN.

Далее гайд по деплою Next.js с SSR или Astro на Fleek.

1. ✅ Деплой Next.js с SSR через Fleek
2. ✅ Заливка файлов напрямую в Fleek Storage через API или CLI

🧑‍💻 1. Как задеплоить Next.js с SSR через Fleek

Fleek пока НЕ поддерживает full SSR (getServerSideProps), так как IPFS/CDN не может работать как полноценный backend.
НО ты можешь:

• Деплоить Next.js в static-режиме (next export)
• Использовать getStaticProps / getStaticPaths

🚧 Ограничения:

• ❌ getServerSideProps не работает (SSR).
• ✅ getStaticProps + next export — работают отлично.
• ✅ Работает через Fleek с IPFS + ENS.

🔧 Шаг за шагом: Деплой Next.js на Fleek (SSG)

1. Создай проект:

bashКопироватьРедактироватьnpx create-next-app my-fleek-app
cd my-fleek-app

2. Настрой next.config.js:

jsКопироватьРедактировать/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',
  images: {
    unoptimized: true
  },
};

module.exports = nextConfig;

3. Используй getStaticProps:

jsКопироватьРедактировать// pages/index.js
export async function getStaticProps() {
  return {
    props: {
      message: 'Привет с Fleek!',
    },
  };
}

export default function Home({ message }) {
  return <h1>{message}</h1>;
}

4. Добавь скрипт в package.json:

jsonКопироватьРедактировать"scripts": {
  "build": "next build && next export"
}

5. Запушь на GitHub:

bashКопироватьРедактироватьgit init
git add .
git commit -m "init"
git remote add origin https://github.com/yourusername/my-fleek-app.git
git push -u origin master

6. Зайди на https://app.fleek.xyz

• Выбери GitHub репо
• Build command: npm run build
• Publish directory: out
• Host on IPFS

💥 Через 30–60 сек ты получишь ссылку вроде:

arduinoКопироватьРедактироватьhttps://my-fleek-app.on.fleek.co/
или
https://<IPFS-hash>.ipfs.fleek.co/

📦 2. Как заливать напрямую в Fleek Storage (через API/CLI)

Fleek Storage = децентрализованный аналог AWS S3 на IPFS/Filecoin.

🔐 1. Получи API Key

1. Зайди на https://app.fleek.xyz/storage
2. Нажми "Create Bucket"
3. Перейди в "Access Tokens" → "Create New"
4. Скопируй API_KEY и API_SECRET

🧰 2. Установка Fleek CLI

bashКопироватьРедактироватьnpm install -g @fleekhq/fleek-cli

🔧 3. Конфигурация

bashКопироватьРедактироватьfleek login

Введи API_KEY и API_SECRET

📤 4. Загрузка файла или папки

Загрузить один файл:

bashКопироватьРедактироватьfleek upload --bucket my-nft-bucket --key myimage.png --path ./myimage.png

Загрузить папку:

bashКопироватьРедактироватьfleek upload --bucket my-nft-bucket --key myfolder --path ./myfolder

После загрузки ты получишь:

• IPFS CID
• Публичную ссылку (https://storageapi.fleek.co/...)

🔁 Альтернатива: Загрузка через REST API

bashКопироватьРедактироватьcurl -X POST https://api.fleek.co/storage/upload \
  -H "Authorization: Basic <base64(apiKey:apiSecret)>" \
  -F key=myfile.txt \
  -F file=@./myfile.txt

✅ Примеры использования

1. Заливай metadata.json и IPFS-картинки для NFT коллекций.
2. Создавай хранилище для децентрализованных Web3-приложений.
3. Деплой статических сайтов, лендингов, UI для DAO, платформ.

🚀 Далее автоматизация деплоя dApp на Fleek через GitHub Actions

• 🔥 Потенциальный фарм активности и airdrop от Fleek

🎯 Цель:

1. Каждый пуш в GitHub → Автодеплой на Fleek (IPFS или CDN)
2. Постоянная активность в экосистеме (для airdrop'ов/грантов)
3. Никаких ручных нажатий: всё автоматом

🧰 Что нужно:

• GitHub репозиторий с проектом (Next.js, React и т.п.)
• Зарегистрирован аккаунт на https://app.fleek.xyz
• Fleek API Key + Secret

🛠️ Шаг 1: Получи API Key

1. Перейди в Fleek Dashboard
2. Зайди в Storage → Access Tokens → Create New Token
3. Сохрани API_KEY и API_SECRET

🔐 Шаг 2: Добавь секреты в GitHub

Зайди в GitHub репозиторий:

• Settings → Secrets → Actions

Добавь:

Название

Значение

FLEEK_API_KEY

твой API Key

FLEEK_API_SECRET

твой API Secret

FLEEK_BUCKET

имя твоего bucket’а

🧪 Шаг 3: GitHub Actions Workflow

Создай файл .github/workflows/fleek-deploy.yml:

yamlКопироватьРедактироватьname: Deploy to Fleek

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout
        uses: actions/checkout@v3

      - name: Install dependencies
        run: |
          npm install

      - name: Build project
        run: |
          npm run build
          npm run export || echo "Skipping export"

      - name: Upload to Fleek
        run: |
          npm install -g @fleekhq/fleek-cli
          echo "${{ secrets.FLEEK_API_KEY }}" | fleek login --api-key-stdin
          fleek upload \
            --bucket "${{ secrets.FLEEK_BUCKET }}" \
            --key "site-$(date +%s)" \
            --path ./out

🔎 Если у тебя Next.js, не забудь использовать next export, и путь должен быть ./out.

🌐 После пуша:

1. GitHub запускает CI.
2. Fleek CLI логинится.
3. Заливает билд в bucket.
4. Ты получаешь CID / публичную ссылку.

🧬 Далее делаем полностью децентрализованный сайт для DAO на Fleek:

• Хостинг: IPFS через Fleek
• Контракты: EVM (Ethereum, Optimism и пр.)
• Домен: ENS
• Хранилище: IPFS / Arweave / Filecoin
• Интерфейс: React / Next.js / Astro
• Без централизованного сервера

🧱 Архитектура DAO-сайта на Fleek

pgsqlКопироватьРедактироватьПользователь
   │
   ▼
Браузер
   │
   ├── React/Next/Astro UI ← IPFS (Fleek)
   │
   ├── Контракты → Ethereum/Optimism (Metamask, WalletConnect)
   │
   └── Storage → IPFS/Filecoin (через Fleek Storage или Web3.Storage)

🛠️ Шаг 1. Фронтенд-проект (Next.js + Wagmi + Viem)

Создаём директорию:

bashКопироватьРедактироватьnpx create-next-app dao-ui --typescript
cd dao-ui
npm install wagmi viem ethers

✅ Пример подключения к контракту:

tsxКопироватьРедактировать// hooks/useDaoData.ts
import { useContractRead } from 'wagmi'

export const useDaoName = () =>
  useContractRead({
    address: '0xYourDaoContract',
    abi: [{ name: 'name', type: 'function', stateMutability: 'view', inputs: [], outputs: [{ type: 'string' }] }],
    functionName: 'name',
  })

✅ Подключение Wagmi:

tsxКопироватьРедактировать// pages/_app.tsx
import { WagmiConfig, createConfig, configureChains } from 'wagmi'
import { mainnet } from 'wagmi/chains'
import { publicProvider } from 'wagmi/providers/public'

const { chains, publicClient } = configureChains([mainnet], [publicProvider()])

const config = createConfig({
  autoConnect: true,
  publicClient,
})

export default function App({ Component, pageProps }) {
  return (
    <WagmiConfig config={config}>
      <Component {...pageProps} />
    </WagmiConfig>
  )
}

🎨 UI: лендинг DAO + управление

Создай страницы:

• / — информация о DAO
• /vote — голосование
• /members — участники
• /treasury — казначейство

⚒️ Шаг 2: Экспорт для IPFS

В next.config.js:

jsКопироватьРедактироватьconst nextConfig = {
  output: 'export',
  images: { unoptimized: true },
}

module.exports = nextConfig

В package.json:

jsonКопироватьРедактировать"scripts": {
  "build": "next build && next export"
}

🌐 Шаг 3: ENS-домен для DAO сайта

Fleek позволяет связать домен с IPFS-хешем:

1. Зарегистрируй ENS-домен (например, yourdao.eth)
2. Перейди в ENS Manager → Records → Content → вставь IPFS hash
3. Через Fleek это можно сделать автоматически

🚀 Шаг 4: Деплой через Fleek

1. Push в GitHub
2. Зайди на https://app.fleek.xyz
3. Connect GitHub → Выбери репозиторий
4. Укажи:
• Build: npm run build
• Output dir: out
5. Хостинг: IPFS
6. (опционально) Привязка ENS → автоматом

📦 Шаг 5: Хранилище на IPFS (для JSON, документов DAO)

Через Fleek CLI:

bashКопироватьРедактироватьnpm install -g @fleekhq/fleek-cli
fleek login
fleek upload --bucket dao-docs --key charter.json --path ./dao/charter.json

🧬 Шаг 6: Интеграция в UI

tsxКопироватьРедактировать// Статут DAO, подгружаемый с IPFS
useEffect(() => {
  fetch("https://ipfs.io/ipfs/QmYourCID/charter.json")
    .then(res => res.json())
    .then(setCharter)
}, [])

📣 Как это поможет тебе быть активным (и потенциальный airdrop)

☑️ Ты покрываешь:

• ✅ Хостинг (IPFS via Fleek)
• ✅ ENS
• ✅ Контракты + Web3 UI
• ✅ Децентрализованное хранилище
• ✅ CI/CD → GitHub/Fleek

🧠 Это будет:

• Видно на GitHub
• Отслеживается через Fleek-инфраструктуру
• Отлично заходит как open-source showcase
• Часто попадает в гранты, хакатоны, дропы.

На этом хоп, кому полезно ставьте лайк!

P.S. Пиздеть не буду, GPT немного помог на 99%))