Marketing Site in a Box

Overview

Marketing Site in a Box (MSIAB) gives you everything you need to bootstrap a beautiful, production-ready website or landing page in less than 5 minutes. And since it’s powered by Editmode, all of the content can be managed, updated and changed by you or anyone on your team - technical or otherwise.

There are two parts to Marketing Site In A Box - The pre-built theme(s), which you can browse here, and the content, which we've pre-packaged into a cloneable Editmode project. We've spent a good deal of time and energy preparing and polishing both to make sure that you you have everything you need to get up and running super quickly.

MSIAB themes are built on top of Next.js (this ensures that your site is as performant as possible throughout its lifecycle with a number of performance optimizations baked in), and styled with Tailwind.

There are two ways, at the moment, to get up and running with an MSIAB theme from our gallery of themes: the Editmode Vercel Integration and the Editmode CLI.

Get started with our Vercel Integration

Our Vercel integration is made up of two functionally different installation flows: the Deploy Button Flow helps you bootstrap a new site with starter content, while the Marketplace Flow simply lets you link your Vercel projects to your Editmode projects (this will store the id of the Editmode project in the NEXT_PUBLIC_PROJECT_ID environment variable of the linked Vercel project), and leaves further configuration to you.

Deploy Button Flow

Step 1 - Theme Selection

Visit the MSIAB repo, select a starter theme from our gallery, and click the deploy button to deploy the theme to Vercel. This will open up Vercel to start the deployment flow.

Step 2 - Vercel Deployment

Once redirected to Vercel, create and link the project to a GitHub repo, and then add the integration as prompted. You'll be redirected to a popup window where a new Editmode project — with the starter content needed to hydrate your website — will be generated for you. You will need an Editmode account for this, so you will be prompted to log in or sign up for an Editmode account.

Step 3 - Using Editmode

You may now make changes to any piece of content on your new website via inline editing (see: the Magic Editor) or on your admin panel, the Content Management Hub, accessed by visiting Editmode and accessing your project dashboard.

The Marketplace Flow

Step 1 - The Marketplace

Visit the Editmode Vercel integration marketplace page and click the "Add Integration" button. This will open up the scope selection modal and then the project selection modal — you'll be allowed to select which scope to install the integration and which projects the integration has access to. Click the "Add" button on the project selection modal when you're done to proceed to the dashboard.

Step 2 - Linking Projects

Once redirected to the dashboard, you may select which Editmode projects to link to your Vercel projects in a one-to-one mapping scheme. Also, you may link the same Editmode project to multiple Vercel projects but not the other way around.

Click on the "Add Integration" button when you're done selecting — this will create the create the connections between the selected projects.

Additional Notes

If you'd like to add or remove existing links between your Vercel and Editmode projects, our integration supports post-installation configuration —this can be accessed via the "Configure" button on the page of the installation instance of the integration.

Get started using the Editmode CLI

The CLI will let you get started with Marketing Site In A Box on your local machine.

Installation

To install the latest version of the CLI, run

npm i -g editmode-cli

Usage

To quickly start a new project, run this command from your project directory:

editmode starter msiab-lagos --git

The above command will generate a new theme (the “Lagos” theme), clone the MSIAB starter project from Editmode, install the dependencies of the theme, and instantiate a new git repository locally.

Arguments and Flags

The first three arguments editmode starter msiab-lagos in the command above are required.

To generate a different theme, simply replace the msiab-lagos argument in your command with the name of a different theme prefixed by msiab- i.e. msiab-dublin.

--git will run git init to instantiate a new git project

--deploy will deploy the theme to Vercel and open up your browser with the theme upon completion

Begin adding your own content