Self hosting Stubby CMS

Learn how to self-host Stubby CMS on popular platforms like Vercel, DigitalOcean, Railway, or Render. This guide walks you through the steps to get Stubby CMS up and running, focusing on ease of deployment and setup.

Step 1: Get the Source Code

First, you'll need to get a copy of the Stubby CMS source code. You can either:

• Clone or fork the repository from GitHub.
• Alternatively, you can download the repository as a ZIP file.

Once you have the code, you may optionally push it to your own GitHub repository for version control.

git clone https://github.com/stubbycms/stubby.git
cd stubby

Step 2: Install Dependencies

After you've cloned the repository, navigate to the project directory and install the necessary dependencies using yarn or npm:

yarn install
# or
npm install

Step 3: Update Environment Variables

Next, you'll need to set up the environment variables. Start by renaming the .env.example file to .env.local:

Then, update the variables in this file according to your hosting environment. Here's an example configuration:

# Host
NEXT_PUBLIC_HOST="http://localhost:3000"
NEXT_PUBLIC_ROOT_DOMAIN="localhost:3000"

# Images
NEXT_PUBLIC_CDN_URL="https://i.stubby.io"
BUNNY_API_KEY="your-bunny-api-key"

# Database
POSTGRES_DB_URL="postgresql://user:your-password@host:port/db-name?sslmode=require"

# Auth
NEXTAUTH_URL="http://localhost:3000"
NEXTAUTH_SECRET="your-nextauth-secret"

• NEXT_PUBLIC_HOST: This should be your local URL during development, and your production domain when deployed.
• NEXT_PUBLIC_CDN_URL: Set this to the URL of your image CDN provider (currently bunny.net).
• POSTGRES_DB_URL: Replace this with your PostgreSQL database connection string (you can use services like Neon.tech or Vercel's built-in PostgreSQL service).

Step 4: Set up and seeding the database

Stubby CMS uses PostgreSQL for its database. You can set up your PostgreSQL database with a provider like Neon.tech, Vercel, or any PostgreSQL service. Once the database is ready, grab the connection string and update the POSTGRES_DB_URL variable in your .env.local file.

After setting up your environment variables and database, you need to push the schema to your PostgreSQL database using Prisma:

npx prisma db push

Next, seed the database by updating the prisma/seed.ts.example file:

1. Rename the file to seed.ts.example -> seed.ts.
2. Update the `seed.ts`` file with your desired passwords and other details, such as the admin user's credentials
3. Run the seeding command to populate the database:

npx prisma db seed

Step 5: Start the Application Locally

Once everything is configured, you can run the app locally to verify it's working:

yarn dev
# or
npm run dev

Open your browser and go to http://localhost:3000 and access your local instance of Stubby CMS.

Step 6: Deploying Stubby CMS

Stubby CMS is a Next.js application under the hood, so you can deploy it on any platform that supports Next.js. Below are generic steps to deploy Stubby CMS. You can refer to each platform's specific documentation for detailed instructions on deploying Next.js applications.

Hosting on Vercel

1. Create a Vercel Account: Sign up for an account at Vercel if you don't already have one.
2. Link Your Repository: In the Vercel dashboard, create a new project and connect it to your GitHub, GitLab, or Bitbucket repository that contains the Stubby CMS source code.
3. Set Environment Variables: In the Vercel project settings, add the environment variables (such as NEXT_PUBLIC_HOST, POSTGRES_DB_URL, etc.) that you configured in your .env.local file.
4. Deploy: Once your project is linked and environment variables are set, push your changes to the repository. Vercel will automatically build and deploy the app, providing you with a live URL.

For more information on deploying Next.js apps on Vercel, refer to the official Vercel documentation.

Hosting on DigitalOcean

1. Create a Droplet or Use App Platform: Sign in to DigitalOcean and either create a Droplet with Ubuntu or use DigitalOcean App Platform to deploy Stubby CMS.
2. Install Node.js and Clone Repo: If you're using a Droplet, SSH into the server, install Node.js, and clone your repository.
3. Install Dependencies and Start the App: After cloning the repository, install the necessary dependencies and start the app using npm or yarn.
4. Configure Environment Variables: Add your .env.local file to the server and ensure it contains the correct values for NEXT_PUBLIC_HOST, POSTGRES_DB_URL, etc.

For more detailed instructions, check the Next.js deployment guide on DigitalOcean.

Hosting on Railway, Render, or Other Platforms

Stubby CMS can also be deployed on platforms like Railway, Render, or other cloud providers that support Node.js and Next.js. In general, you will:

1. Create a New Project: Link your GitHub or GitLab repository containing the Stubby CMS code.
2. Set Environment Variables: Use the platform's settings to configure environment variables as defined in your .env.local.
3. Deploy: Push your changes, and the platform will build and deploy the application automatically.

For specific instructions, refer to the respective deployment guides for Next.js on Railway, Render, or any other platform you choose.

Step 7: Image Hosting with Bunny.net

Stubby CMS uses Bunny.net for CDN and image storage. Sign up for a Bunny.net account, and once you have your API key, update the BUNNY_API_KEY in your .env.local file.

In the future, Stubby CMS may support other image hosting providers like Cloudinary, Twicpics, or ImageKit.

Conclusion

Once you've successfully deployed Stubby CMS, you can start managing your content and creating multiple sites. Whether you choose Vercel, DigitalOcean, or any other platform, Stubby CMS offers flexibility and ease of use for developers.