Tutorial: Publishing a site in Brightspot

In this tutorial, you will learn how to publish a website using Brightspot. Before you begin, it’s worth noting that there are lots of ways you might build a site in Brightspot—both in terms of the overall site architecture you choose (for example, traditional, headless, or hybrid) as well as the order of steps you take within Brightspot itself.

There’s certainly no right or wrong way to build a website—these are simply the steps that Brightspot recommends that you follow when first publishing a new site on the platform. Again, you don’t necessarily need to do each one of these steps, or to do them in this order, but Brightspot recommends doing them in this order because you start to see the site come to life really quickly—via Brightspot's preview system—if you follow this approach. It’s built so that there is a minimum of back and forth between site settings and content creation.

There are many different components to publishing a site. As such, this tutorial is a comprehensive walkthrough that touches on many of these components. In this tutorial, you will:

1. Gather your assets via a downloadable attachment found in this tutorial.
2. Add a theme, create a color palette, and set your text fonts and colors
3. Create a new site, including its components like the homepage, sections and tags, a site search page, and a navigation
4. Add a logo and the navigation to your site
5. Add a type-specific default module for your sections
6. Upload images and publish articles (provided in the downloadable attachment)
7. Add a promo module to your homepage
8. Add a list module to your homepage
9. Convert one-off modules to shared modules

• A Brightspot environment and a user account.
• Content (images, text, videos, etc.) that is ready to be published.
• A theme.

Your first step is to gather the assets that you’ll need to populate your site. As mentioned above, we've provided a downloadable folder containing these assets for you. We recommend creating a folder on your desktop with them so they’re nearby.

Here’s a list of the assets you’ll need to get started. This list isn’t exhaustive, but if you gather these core assets, you’ll have the essential elements needed to create a simple but engaging site.

• Company Logo: You’ll need a .PNG or .JPG of your company’s logo, ideally on a transparent background. This logo will be used within Brightspot, as well as on the front end of your site, usually in the header and footer.
  
  Tip

  If possible, gather both the general or default logo, as well as a version of the logo that is easily readable on an inversely colored background, as many sites will use the default logo in the site header and the inversely colored logo in the footer.
• Company Brand Palette: Regardless of whether you’re working with an existing brand or creating a brand new site, you’ll want to locate the hex values of the colors in your site's primary palette.
  
  Tip

  If you’re not sure of the hex values, or where to find them, there are several browser extensions and desktop programs that allow a user to hover over an image or a website to extract the colors. We’ve provided the Brightspot color palette as an example artifact for this step.    
• 15–20 Assets to Create: Any website is going to need content and a story to tell; before you get started on your site project, you’ll need content to publish. This doesn’t need to be extensive or “real” content (but if you have real content, all the better). For the sake of this tutorial, we’ve provided a set of short articles about what it’s like to work at Brightspot. We’ve also provided a set of images, as well as a set of sections and tags.
  
  Tip

  You can source free imagery from an agency like Pexels or Unsplash for this step. All of the image assets we have used in our tutorial were sourced from Pexels, and we have made them available for download here if you would like to follow this tutorial step by step. Note that the Pexels license covers only personal, non-commercial uses of the images.

Once you have gathered all the assets you’ll need to build a site, you’re ready to work directly in Brightspot. Before publishing any content, let’s configure the site’s theme so you’ll have a spiffy-looking preview ready and waiting once you begin.

Add a Theme

This step is required. Themes provide your site’s layout, color scheme, and behaviors. You can install your own themes, and versions of individual themes, into Brightspot.

To add a theme:

1. Log in to the Brightspot environment you are using to create your site.
2. Click menu > Admin > Themes.

3. Click New Theme.

   Here, you will pair a front-end design bundle with the theme.
   

4. Complete the fields on the New Theme form:
   
   1. Name—The name for your theme; this is internal facing and should be descriptive.
   2. Bundle—From the drop-down, select Existing and then select from the available options.
      
      Note

      The available options here will vary depending on your use case and license. For this tutorial, we have used the out of the box bundle, which is typically called frontend-bundle-default.jar.

   

5. Click Save.

   Once the save action has completed, you will see additional options, such as Color Palette and Overrides.

Create a Color Palette

This step is optional. These colors populate the color picker that appears within modules, providing a great shortcut that users will appreciate later.

To create a color palette:

1. Click menu > Admin > Themes.
2. Locate the theme you just created.
3. Click Color Palette.

4. Enter the hex values you collected earlier for the color palette to be used by your site. You can enter up to 10 values.

   The order you enter colors here will determine the order the colors appear in the color picker within Brightspot.
   

5. Click OK after you enter the value for each color.
6. Click Save after you have entered all of your colors.
   

   

Set Your Text Fonts and Colors

This step is optional. Setting your text fonts and colors helps ensure consistency across your site.

To set your text fonts and colors:

1. Click menu > Admin > Themes.
2. Locate the theme you created.
3. Click Overrides.
4. In the Preset menu, select Custom.

5. Set your Fonts.

   The Brightspot design system supports two font pairings. To set the font, you can pick anything from Google Fonts; just enter the name of the fonts in the Font 1 and Font 2 fields. For this tutorial, we have picked Noto Sans and Merriweather. You can then elect to apply those fonts to page titles, descriptions, and quotes.

   

6. Set your Colors.

   You’ll now want to designate the “primary color” for your site. Because you’ve already set a color palette, you can easily select from those options, or diverge here. In addition to the primary color, you can also set your text colors, site background colors, header and footer colors, as well as button colors and shapes.

   There are a lot of fields for color; at this step, pick a single color or two from your palette to start with. You can always return to the Themes area to modify these selections later.  

   Tip

   You may need to assign your theme to a site before your color palette appears in the color picker. If you are not seeing your palette, skip down to Step 3: Build the scaffolding of your site and complete the Create a Site steps. Once you have built the site and associated it with your template, return to these steps to set your colors. You should now have your palette available for use.

7. Click Save.
   
   Note

   If desired, you can click Main > Open Styleguide to take a look at the fonts and colors you’ve just set, or you can proceed to the next step and start creating content.

Now that you have gathered your assets and created a theme bundle to use with your project, you are ready to start building your site.

Create a Site

To create a site:

1. Click menu > Admin > Sites & Settings.
2. Click New Site.
3. Complete the following fields:
   
   • Name—Give the site a name; for this tutorial we have named our site Tutorial Site.
   • URL—Give the site a URL; remember to enter both HTTP and HTTPS URLs, hitting return after each.
     
     Tip

     Creating the site URL is an important, and sometimes tricky, step. For example, let’s say your environment’s URL is https://tutorial.brightspot.com. To create the site URL, simply add the name of your site after the https://; the resulting URL should look like https://mysite.tutorial.brightspot.com.
     
     It is important that the URL you enter matches the domain you are working in. Using brightspot.com as in the example above won't work for you unless you are actually working in the brightspot.com domain.
     
     Using the image below, you can see that we can find our domain in the address bar of our browser. The domain is going to be something.com, something.org, something.edu, etc.

     

   • Theme—Under the Theme field, click Shared Theme, then select the Default Theme you added in the previous step.

   

4. Click Save.
   
   Note

   There are many other settings within Sites & Settings, but for now, we’re just focusing on creating the site itself.
   After the save has completed, take a look at the Sites widget. You should now be able to switch between the Global site and your newly created site.
   

   

Going forward, be sure to work in the correct site when creating content—not the Global site. You can see which site you are in by looking at the header at the top of your screen. If you notice you are not in the correct site, simply click on the site name to see a list of available sites. Click the correct site name from that list of sites, and you are switched to the selected site.

Create a Homepage

Next, you'll want to create a homepage, which will act as the front door of your site, a main landing page that greets visitors. It will be blank to begin, and that’s OK—by creating it here, you can easily add it to a navigation object in a few steps.

To create a homepage:

1. Make sure you are in the correct site (the one you just created) by looking at the site shown in the header (see image above). If you are not in the correct site, click the site name and select the correct site from the list of available sites.
2. Click add next to the search field at the top of the page and click Homepage.
   
   Note

   When you open the add menu, you’ll see every content type that is available in your instance of Brightspot. This tutorial focuses on some of the most commonly used content types (like homepage, tag, and article), but don’t let that stop you from exploring. There are more than 100 different types that are available out of the box.

   

3. Enter an Internal Name for your homepage. This name is only used within Brightspot and is not visible to visitors to your site.

   Our site is going to be about working at Brightspot, so choose a name that reflects this topic.
   

4. Click Publish.

   Your homepage is blank—for now—but we’re going to come back to build it out more later.

Create Sections and Tags

Up next in our preparations are sections and tags. These are also going to start blank, but eventually, these will act as landing pages—they are just more specific and more descriptive than your homepage.

For example, our sample site content is all about what it’s like to work at Brightspot; so the sections you will create are Culture, Benefits, and Hiring—those are three main topics or categories that will speak to what it’s like to work at Brightspot. You will use those sections in our navigation, as well as on the article content you publish later. Similarly, tags are landing page content, but they become even more specific in content than sections. Tags will also be added to the article content.

To add the sections:

1. Look in the header and confirm that you are still in the site you created earlier.
2. Click add next to the search field at the top of the page and click Section.
3. Enter Culture in the Display Name field. This name is visible to visitors to your site.
4. Enter BSP_Culture in the Internal Name field. This name is only visible within Brightspot and is not seen by visitors to your site.
5. Enter a short description regarding your Culture section in the Description field. This description is visible to your site visitors.
   

   

6. Click Save.

Repeat these steps to create two more sections: one for Benefits and one for Hiring.

To add the tags:

1. Look in the header and confirm that you are still in the site you created earlier.
2. Click add next to the search field at the top of the page and click Tags.
3. Enter Collaboration in the Display Name field. This name is visible to visitors to your site.
4. Enter BSP_Collaboration in the Internal Name field. This name is only visible within Brightspot and is not seen by visitors to your site.
5. Enter a short description regarding your tag in the Description field. This description is visible to your site visitors.
   

   

6. Click Save.

Repeat these steps to create five to seven more tags. Use the suggestions in the document Starter Sections, Tags, and Articles. Again, the sections and tags you create will be blank—but don’t worry. They’ll populate with content soon enough.

Create a Site Search Page

Once the sections and tags are complete, you’ll prepare a site search page. Site search is the landing page that allows visitors to your site to input keywords, search, and get results that can be sorted and filtered. Typically, a search page is visible in a site’s navigation, so you’ll add that in the next step as well.

To create a site search page:

1. Look in the header and confirm that you are still in the site you created earlier.
2. Click add next to the search field at the top of the page and click Site Search Page.
3. Enter a Title for the site search page. This title is visible to the visitors of your site.
4. Enter a Description for the site search page. This description is visible to the visitors of your site. By default, it appears near the top of the page, above the search results; however, a front-end designer can place the description in other locations on the page.
   

   

5. Click Save.
   
   Tip

   You can configure the results of the site search page using the Types field and the User-Display Filters fields. See Site search page for complete details on configuring your site search page.

Create a Navigation

Now that you’ve created your homepage, sections, tags, and site search page, you have everything you need to build a navigation. A navigation is essentially a group of links to the landing pages, and will be visible on the front end of your site (usually, but not always, in the header). In our case, you’ll be building a navigation that links to our homepage, the Culture, Benefits, and Hiring sections, and the site search page. This navigation will appear on every asset you create.

To create a navigation:

1. Look in the header and confirm that you are still in the site you created earlier.
2. Click add next to the search field at the top of the page and click Navigation.
3. Enter the Internal Name. This is only visible within Brightspot and not seen by the visitors to your site.
4. Expand Items, and select Simple Navigation Item.

5. Click search in the Link field to open the content picker and locate the sections you created previously.

   This is your first time using the content picker. The content picker is the search panel that allows you to select assets in Brightspot. See Search filters for more information on filtering your search results.
   

   1. Set the Any Content Type filter to Section.
      

      

   2. Since you haven't published your sections yet, you need to set the results to only show us sections in the Draft status. To do that, expand the Status field and select Draft. If Published is also selected, click it to deselect it and only have assets that are in Draft status to be returned in the results.
      

      

   3. Click anywhere in the search panel to close the Status list and display the results. Since you have only created three sections, those should be displayed in the results.
6. Click the name of each of your sections to add them to the navigation.
   

   

7. Close the content picker.
8. Click Publish.

Now that the scaffolding of the site has been created, it’s time to return to Sites & Settings to configure a few defaults, in particular the logo, the navigation, and the behavior of landing pages.

To see the magic happen, you’ll need two tabs—open one tab with the CMS, and another tab open to your homepage. At the start, your homepage will be empty—but not for long.

Any easy way to open the second tab for your homepage is to simply click the link shown in the URLs widget. The default permalink for homepages is just /. Clicking / opens your homepage in a new tab. If your URLs widget doesn't show any URL (including the /), you can manually add one by clicking add_circle_outline Add URL and entering the desired URL for your homepage (such as Brightspot Homepage). Once you save or publish your homepage, the URL is active and you can click on it to open the homepage in another tab.

Add the Logo

To add the logo:

1. Click menu > Admin > Sites & Settings.
2. Select your newly created site, if you are not already on that site.
3. Click Front End.
4. Expand the Logos & Icons cluster.
5. In the Logo field, click Select and then search.
6. Scroll to the bottom of the content picker and click New Image Logo.
   

   

7. Enter Brightspot Logo in the Internal Name field.

8. In the Image field, click searchto open the content picker.

   Since you haven't uploaded the actual logo image yet, you don't have an image available to select for the logo. You first need to upload the logo image in order to create the logo.
   

9. Click New Image located near the bottom of the content picker.
   

   

10. Enter BSP_Logo in the Internal Name field.
11. Make sure the File field is set to New Upload and click Choose.
    

    

12. Locate and select the Company-Logo.png file provided by the downloadable folder. This begins the upload.
13. Click Save. Now the image asset has been created in Brightspot.
14. Click Back in the upper left corner. This returns you to the content picker.
    

    

15. Click BSP_Logo in the content picker. This adds the image asset you just uploaded to the logo asset you are creating.
16. Click Save. The logo asset now exists in Brightspot.
17. Click Back in the upper left corner. This returns you to the content picker.
18. Click Brightspot Logo. This sets the Logo field to the logo asset you just created.
    

    

19. Click Save.

Add the Navigation

To add the navigation:

1. Click menu > Admin > Sites & Settings.
2. Select your newly created site, if you are not already on that site.
3. Click Front End.
4. Expand the Layout cluster.
5. In the Navigation field, click Select and then search.
   

   

6. Locate, and select, the navigation you created earlier.
7. Click Save.

Add the Site Search Page

To add the site search page:

1. Staying in the Layout cluster you used for the navigation, locate the Search Page field.
2. Expand the drop-down and click search.
3. From the content picker, locate site search page you created previously.
4. Click Save.

Add a Type-Specific Default Module for Sections

Here, you will set up a default module that will automatically display content belonging to a given section.

First, what is a module? Modules can be thought of as smaller, self-contained vessels of content. They can be specific to a certain asset, or shared across many assets within a site. Modules can be simple lists of links to other content, or galleries of images, etc. Basically, their only limit is your creativity. Brightspot comes with a number of pre-built modules that meet common publishing use cases, allowing you to create and curate content across your site. For example, the image below shows a promo module (highlighted in a red box) found on our own Brightspot Intranet page.

To add a type-specific default module for your sections:

1. Click menu > Admin > Sites & Settings.
2. Select your newly created site, if you are not already on that site.
3. Click Front End.
4. Open the Type Specific Overrides cluster.
5. Click add_circle_outline Add Type Specific Landing Page Elements.
6. Expand Types and select Section.
7. Expand Content and select Add Before.
8. Click add_circle_outline Add Module.
   

   

9. Select List Module and then select any of the available list modules. (We recommend Standard List A, Standard List B, or Standard List C, as these have associated images.)
   

   

10. Configure the list module.
    
    1. Expand Items and select Dynamic. (We will go over the differences between these list modules in an upcoming step.)
    2. Expand Types and select Article.
    3. Expand Filtering Rules and select Sections.
    4. Expand Include Current Section, and select Yes.
11. Click Save.

You're finished with the scaffolding and site setup—now it’s time to really zero in on the bread and butter work of Brightspot, which is asset creation itself.

Using the provided folder of assets, publish approximately 20 articles following the steps below.

Upload Images

Before publishing anything more, we recommend uploading all of the provided images. Brightspot supports bulk upload, meaning that you can drag and drop the provided images onto the dashboard, and upload them as a single batch. This will save you from repeated upload steps as you create your articles, because the images will already be waiting for you in Brightspot when you need them.

To upload the images:

1. From your dashboard, locate the Upload widget.
   

   

2. You can either:
   
   • Drag and drop the images into the widget.
   • Click Select to locate the folder in which they are stored, and select the images for upload from there.
3. Set the Type field to Image.
   

   

4. Click Upload.

Publish Articles

Once your images have uploaded, you’re ready to move on to publishing articles. Once again, the file Starter Sections, Tags, and Articles has all of the text to create your articles. It is suggested you use that text for this tutorial.

To publish the articles:

1. Click add next to the search field at the top of the page and click Article.
2. Using the Starter Sections, Tags, and Articles file you downloaded for this tutorial, complete the following fields by copy/pasting the text into the correct fields.
   
   1. Headline: Enter the provided headline for the article. This is the bold text next to the number for the article.
   2. Subheadline: Enter the provided subheadline.