MyCTO LogoMY CTO
Get Started

Hosting Wikijs on Vercel with Postgres

Quentin Daniels
Article banner

How To Host Wiki.js on Vercel with Postgres

Wiki.js is an open-source wiki software that allows users to create and manage their own wikis using Markdown. In this tutorial, we will explore how to host Wiki.js on Vercel, a popular serverless platform, along with a PostgreSQL database for persistent storage.

Prerequisites

Before getting started, make sure you have the following:

  1. Vercel account: Create an account at vercel.com if you don't already have one.
  2. PostgreSQL instance: Set up a PostgreSQL server with a database for Wiki.js to store its data. You can use a managed service like Heroku Postgres or install and configure your own local PostgreSQL instance.
  3. Node.js and npm: Ensure that Node.js and npm are installed on your machine.

Step 1: Install Wiki.js

First, clone the Wiki.js repository from GitHub using the following command:

git clone https://github.com/wikimaster/wikijspath.git wiki-js
cd wiki-js

Next, install the required dependencies by running:

npm ci

Step 2: Configure PostgreSQL

To connect Wiki.js to your PostgreSQL database, you'll need to create a new database and update the config.yml file with your connection details. Here's an example of how to do this using Heroku Postgres:

  1. Create a new database: Open your Heroku Postgres dashboard and create a new database for Wiki.js.
  2. Copy your DATABASE_URL: In your Heroku Postgres settings, click on "Reveal Config Vars" and copy the DATABASE_URL value.
  3. Update config.yml: Copy the config.yml file from the Wiki.js repository to your project directory:
cp wiki-js/config.yml .

Edit the config.yml file and update the following values with your PostgreSQL connection details:

database:
  host: "YOUR_HEROKU_POSTGRES_HOST"
  port: "YOUR_HEROKU_POSTGRES_PORT"
  user: "YOUR_HEROKU_POSTGRES_USER"
  password: "YOUR_HEROKU_POSTGRES_PASSWORD"
  database: "YOUR_HEROKU_POSTGRES_DATABASE"

# Replace these values with your PostgreSQL connection details
database:
  host: <%= process.env.DB_HOST %>
  port: <%= process.env.DB_PORT %>
  user: <%= process.env.DB_USER %>
  password: <%= process.env.DB_PASSWD %>
  database: <%= process.env.DB_NAME %>

Step 3: Install dependencies and build Wiki.js

Now, install the required dependencies for Wiki.js:

npm install

Next, build your Wiki.js application using the following command:

npm run build

This will compile the necessary JavaScript files for deployment.

Step 4: Create a Vercel project and configure environment variables

Create a new Vercel project by running:

vercel init

Follow the prompts to create your project. When asked about the framework, choose "Other (Custom)" since Wiki.js is not a pre-configured framework in Vercel.

After creating your project, update the vercel.json file with the following configuration:

{
  "name": "wiki-js",
  "buildCommand": "npm run build",
  "outputDir": "./dist/",
  "env": {
    "DB_HOST": "<%= process.env.DB_HOST %>",
    "DB_PORT": "<%= process.env.DB_PORT %>",
    "DB_USER": "<%= process.env.DB_USER %>",
    "DB_PASSWD": "<%= process.env.DB_PASSWD %>",
    "DB_NAME": "<%= process.env.DB_NAME %>"
  }
}

Step 5: Deploy Wiki.js to Vercel

Finally, deploy your Wiki.js application to Vercel using the following command:

vercel --prod

This will start the deployment process. Once it's complete, you'll receive a URL where your wiki is hosted on Vercel.

Step 6: Access and customize your Wiki.js instance

Navigate to the provided URL in your browser to access your new Wiki.js instance. You can now create pages, edit content, and manage users within your wiki.

To customize your wiki's appearance and behavior, modify the config.yml file as needed. Some of the configurable options include:

  • UI skins: Choose from a variety of pre-built themes or create your own custom skin.
  • User management: Enable registration, login, and other user-related features.
  • Permissions: Configure permissions for users to control access to pages and content.

Conclusion

In this tutorial, we've learned how to host Wiki.js on Vercel with a PostgreSQL database. By following these steps, you can create your own wiki platform that's scalable, secure, and easy to manage. Feel free to experiment with different configurations and customizations to tailor your wiki to your specific needs.

Happy wiki building!

1