Skip to content

Quick start guide

Follow this guide to run a local instance of WebSight CMS using Docker. The local instance serves as a testing instance where you can check out our demo site Luna. You can also use Howlite, our example components library, to create or update pages within the local instance.

This guide is a starting-point for developing custom components for WebSight CMS. After you've mastered the concepts explained on this page, you can move onto our quick start for developers for a deeper dive into components development for WebSight CMS.

Prerequisites

Before going any further, please ensure you have Docker Desktop installed and launched on your machine. Docker Desktop supports Windows, macOS, and Linux.

Part A: Run a local instance using Docker

Quick setup with curl

If you have curl installed, you can set up the local environment using the following command. Then, you can go directly to Part B below.

curl https://docs.websight.io/scripts/get.sh | sh

If this method doesn't work for you, follow the step (1) below to set up the WebSight CMS instance manually.

1. Create Docker container environment

Run the following command to start a Docker container with WebSight CMS:

docker run -p 8080:8080 --name websight-cms --rm \
  --mount source=segment-store-repository,target=/websight/launcher/repository \
  europe-west1-docker.pkg.dev/websight-io/websight-docker-releases/websight-cms-starter:1.25.0

A fresh WebSight instance will start within a couple of seconds. After it launches, you can open a Web browser to the URL http://localhost:8080/ to view the WebSight admin panel. Log in with wsadmin username and wsadmin as the password.

Tip

To turn off the local environment, use the ctrl + c key combination in the terminal that you used to launch your Docker instance. You can restart the instance by repeating the steps you used to launch it initially.

Part B: Publish demo site

At this point, your local environment is running, but you still need to publish the demo site that is included in the distribution. Do this by following the steps below.

1. Open the Websight admin panel

In the local instance, the WebSight admin panel is accessible by navigating to http://localhost:8080/ in a Web browser. Log in with wsadmin username and wsadmin as the password.

2. Select space for the demo site

We use Spaces to organise content. In the WebSight admin panel, open the space for the demo site Luna - custom code.

Spaces

3. Publish assets and the demo site

Open the list of Assets using the left sidebar. Select the folder images and then click Publish.

Assets publication

Open the list of Pages using the left sidebar. Select all pages and click Publish.

Pages publication

4. View the demo site

Congratulations! The demo site is now available by navigating to http://localhost:8080/published/luna/pages/Homepage.html in a Web browser.

Additional sample sites

The distribution contains other demo sites. After assets and pages publication, they are available at:

Published demo page

Part C: Update a page

Now that your local demo site is published, you can experiment with making basic changes to pages. As an example, the following steps show how to update the home page for the demo site that is built into WebSight.

1. Open the Websight admin panel

The WebSight admin panel runs at http://localhost:8080/. Log in with wsadmin username and wsadmin as the password.

2. Select space for the demo site

We use Spaces to organise content. Please open the space for the demo site Luna - custom code.

Spaces

3. Edit the home page

Use the Pencil icon to open the Page editor for the home page.

Actions available for a page

Scroll down the content to the section Custom Made Engagement Rings.

Page section to be updated

Find the Rich text editor on the tab Components and use the drag-and-drop feature to place it just below the section title.

Rich text editor available in component tree

Click on the new component to check its properties on the side panel on the right.

Actions available for RTE component

Copy & paste the following text into the Text field on the General tab.

Every couple is unique and we want to deliver an engagement ring that is unique too – taking the tastes of the couple into account. We love having couples visit the store and work with them to create a unique custom engagement ring according to their tastes.

RTE component properties

4. Publish changes

At this point, you've updated the page. However, unpublished changes are not visible on the site yet. To apply them, open the dropdown in the right corner of the admin interface and select action Publish.

Publish page action

5. View the updated page

Congratulations! Your changes should be visible now at http://localhost:8080/published/luna/pages/Homepage.html.

Publish page action

Next steps

This page demonstrated the basics of editing pages with WebSight CMS. As a next step, we encourage you to explore more technical details about WebSight:

The Luna site (i.e., Luna - custom code) you looked through utilizes the Howlite components library. However, the distribution contains other demo sites, and we recommend exploring them too. Before you open the following links, visit the admin panel, and publish pages and assets for a given space.