In this guide you will learn how to generate and serve a Mosaic site.
To begin setting up a Mosaic site, you need to have the following software installed:
- Yarn v1
- Node.js v18 or higher
You can copy the site directory from this repository into your project. The site directory is a standard Next.js app that loads the packages created by this repo, with an additional mosaic-config.mjs file to configure sources and other settings.
Steps:
- Copy the
sitedirectory from this repository to your desired location (outside of this repo, such as your own project root). - Configure the contents of the
sitedirectory as needed.- Update
mosaic-config.mjsto specify your content sources and other options. - A local source is used to serve pages from the local file-system, which can be a clone of a remote repo.
- A remote source is used to pull content from a remote Git repository.
- Update
Next, navigate to your new site directory:
The example site you have generated comes preconfigured with two sources: a remote repository and a local docs folder. Sources are used by Mosaic to pull content from disparate locations and merge them into a single virtual filesystem that can be used by a Mosaic site.
If you want the site to read from remote repositories, you need to set up an environment variable to store your Git credentials. Follow these steps:
-
Open a terminal or command prompt.
-
Replace
<repo_username>and<personal_access_token>in the following commands with your actual Git username and personal access token.
On Unix:
On Windows:
This sets the MOSAIC_DOCS_CLONE_CREDENTIALS environment variable with your Git credentials.
Now you can serve your Mosaic site by running the following command:
Access your Mosaic site from a browser using the following URLs:
- To browse the content from your local source: http://localhost:3000/local
- To browse the content from the Mosaic Git repo source: http://localhost:3000/mosaic
That's it! Your Mosaic site is now up and running.