DEV Community

Kyle Schwartz
Kyle Schwartz

Posted on

4 1

Gitea + Drone CI + Vercel = Gitea Pages

Gitea + Drone CI + Vercel = Gitea Pages

Welcome! So this article comes after a year of being annoyed, but lazy, about the lack of functionality within Gitea to produce something similar to GitHub Pages. About a week ago, I finally got fed up and decided to figure it out and put this knowledge online since no one else has written about this and that’s frustrating. After following the steps below, you’ll be able to deploy your static-generated websites from any framework of your choosing (Vue, React, Svelte, Hugo, …) by simply pushing your code to Gitea.

Setup

This tutorial assumes a couple of things:

  • You have basic computer literacy

  • You have both a working Gitea server as well as a Drone CI server.

  • You have a repository on your Gitea server that has all of your code ready to be deployed

If you don’t have a Gitea or Drone CI server, check out my other post on how to host these for free. Or click the links below because no one likes extra work.
Hosting Gitea on Google Cloud Platform
How to Install Drone CI for Gitea

Vercel Setup

  1. Make an account at https://vercel.com

  2. Go to https://vercel.com/account/tokens

  3. Click on the Create button, then enter “Drone” as the token name

  4. Click Create Token and save the code that is given to you. We will need this for later and Vercel will not show it again.

  5. Click Done and continue on.

Drone CI Setup

  1. Open Drone and open the repository you want to use

  2. Click Activate Repository

  3. Click Settings

  4. Go to the Secrets section and add a new secret. Name it “NOW_TOKEN”, and give it the value of the token we got from the Vercel setup.

  5. Click ADD A SECRET to save it

Gitea Setup

In the root of your project, create a file called “.drone.yml”. The contents of which should be as follows:

---
kind: pipeline
name: default
steps:
- name: now
image: one000mph/drone-now # Use one000mph's version as lucaperret's is outdated
environment:
NOW_TOKEN:
from_secret: now_token # Refers to a secret in your drone repo titled "NOW_TOKEN"
settings:
secret: [now_token] # Refers to the above environment variable
deploy_name: example # The name of your vercel project
prod: true # Leave this if you want to deploy to production, remove to disable production
directory: public # Only if you've pre-rendered the page. Normally you let vercel handle this
view raw .drone.yml hosted with ❤ by GitHub

Deployment Settings

secret: required. Don’t touch this either
deploy_name: Change to what you want your Vercel project name to be
prod: Leave this if you want a production build. If you want development builds, remove this line
directory: Only use this if you pre-compiled your code. If not, remove this line

Push the changes to your repository.

Fixing Vercel

Now that you’ve pushed your code, a Drone runner should have pushed your code to Vercel! Fantastic!

Next comes fixing the issues. Vercel may or may not detect your framework correctly. If you go to your dashboard and your project is there, check the link to see if everything worked correctly. If it did, fantastic! You’ve done everything correctly and there is nothing left to setup. Either check out the Extras section below for some cool stuff or continue writing your code! Enjoy!

If Vercel did not detect your framework, follow these steps:

  1. Open your project in Vercel by clicking its name

  2. Click Settings in the top left

  3. Under Build & Development Settings, chose your framework preset. If it’s not listed, chose Other

  4. If the build, output, or development commands listed aren’t correct, click the Override toggle and manually edit the command

  5. Click Save and push your code to Gitea once more. This should fix the issues

Extras

If you want to only update production when you push to master, check out the gist below:

---
kind: pipeline
name: production
steps:
- name: now
image: one000mph/drone-now
environment:
NOW_TOKEN:
from_secret: now_token
settings:
secret: [now_token]
deploy_name: example
prod: true
trigger:
branch:
- master
---
kind: pipeline
name: development
steps:
- name: now
image: one000mph/drone-now
environment:
NOW_TOKEN:
from_secret: now_token
settings:
secret: [now_token]
deploy_name: example
trigger:
branch:
exclude:
- master
view raw .drone.yml hosted with ❤ by GitHub

Every branch that isn’t master will push to dev builds and master will now push to production!

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more →

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more