Add a system-region in the template for the breadcrumbs:

<system-region name="BREADCRUMBS"/>

Create a format in Velocity to populate the breadcrumbs:

#macro(getParentFolders, $asset)
	#set($parent = $asset.parentFolder)
	#set($count = $count + 1)
	#if($parent.name != "/" && $count < 20)
		#set($dummy = $crumbs.add(0, $parent))
		#getParentFolders($parent)
	#else 
		#break
	#end
#end
#set($count = 0)
#set($crumbs = [$currentPage])
#getParentFolders($currentPage)

#set($x = $crumbs.size() - 1)
#if($currentPage.name == "index")
	#set($dummy = $crumbs.remove($x))
#end
#if($currentPagePath != "index")
	Home
#else 
	Home
#end
#foreach($crumb in $crumbs)
	#set($link = $crumb.link + "/index")
	#set($title = $crumb.metadata.title)
	#if($foreach.hasNext)
		>> $_EscapeTool.xml($title)
	#else 
		>> $_EscapeTool.xml($title)
	#end
#end

This is the context page from template for reference:

<system-data-structure>
  <carousel>yes</carousel>
    <slide>
      <image type="file">
      <content></content>
      <path>/_images/paintbrush.jpeg</path>
      <link>site://DEV-Donny/_images/paintbrush.jpeg</link>
      <site>DEV-Donny</site>
      <name>paintbrush.jpeg</name>
     <file-size>330352</file-size>
     <width>1920</width>
     <height>1280</height>
     </image>
     <heading>Paintbrushes</heading>
     <alt>Paintbrushes</alt>
   </slide>
   <slide>
     <image>
     <path>/</path>
     </image>
     <heading/>
     <alt><alt/>
   </slide>
   <slide>
     <image type="file">
     <content></content>
     <path>/_images/computer-coffee.jpeg</path>
     <link>site://DEV-Donny/_images/computer-coffee.jpeg</link>
     <site>DEV-Donny</site>
     <name>computer-coffee.jpeg</name>
     <file-size>174729</file-size>
     <width>1920</width>
     <height>1080</height>
     </image>
     <heading>Computer &amp; Coffee</heading>
     <alt>Computer and Coffee</alt>
  </slide>
  <editor>This is my first page.</editor>
</system-data-structure>

Create Cascade format using Velocity:

#set($array = $currentPage.getStructuredDataNodes("slide"))
#set($slides = [])
#foreach($item in $array)
#if($item.getChild("image").asset.path)
#set($dummy = $slides.add($item))
#end
#end
#if($slides.size() > 0 && $currentPage.getStructuredDataNode("carousel").textValue == "yes" )
<header class="carousel slide" id="myCarousel">
<!-- Indicators -->
<ol class="carousel-indicators">
#foreach($slide in $slides)
#if($foreach.count == 1)
#set($class = "active")
#else 
#set($class = "")
#end
#set($slideNumber = $foreach.index)
<li class="${class}" data-slide-to="${slideNumber}" data-target="#myCarousel"></li>
#end
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
#foreach($slide in $slides)
#if($foreach.count == 1)
#set($class = "active")
#else 
#set($class = "")
#end
#set($image = $slide.getChild("image").asset.link)
#set($heading = $slide.getChild("heading").textValue)
<div class="item ${class}">
<div class="fill" style="background-image:url('[system-asset]${image}[/system-asset]');"></div>
<div class="carousel-caption">
<h1>$_EscapeTool.xml($heading)</h1>
</div>
</div>
#end
</div>
<!-- Controls -->
<a class="left carousel-control" data-slide="prev" href="#myCarousel">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" data-slide="next" href="#myCarousel">
<span class="icon-next"></span>
</a>
</header>
#end

This is the transformation result:

#set($array = $currentPage.getStructuredDataNodes("slide"))
#set($slides = [])
#foreach($item in $array)
#if($item.getChild("image").asset.path)
#set($dummy = $slides.add($item))
#end
#end
#if($slides.size() > 0 && $currentPage.getStructuredDataNode("carousel").textValue == "yes" )
<header class="carousel slide" id="myCarousel">
<!-- Indicators -->
<ol class="carousel-indicators">
#foreach($slide in $slides)
#if($foreach.count == 1)
#set($class = "active")
#else 
#set($class = "")
#end
#set($slideNumber = $foreach.index)
<li class="${class}" data-slide-to="${slideNumber}" data-target="#myCarousel"></li>
#end
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
#foreach($slide in $slides)
#if($foreach.count == 1)
#set($class = "active")
#else 
#set($class = "")
#end
#set($image = $slide.getChild("image").asset.link)
#set($heading = $slide.getChild("heading").textValue)
<div class="item ${class}">
<div class="fill" style="background-image:url('[system-asset]${image}[/system-asset]');"></div>
<div class="carousel-caption">
<h1>$_EscapeTool.xml($heading)</h1>
</div>
</div>
#end
</div>
<!-- Controls -->
<a class="left carousel-control" data-slide="prev" href="#myCarousel">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" data-slide="next" href="#myCarousel">
<span class="icon-next"></span>
</a>
</header>
#end

Add an editor region in the template template:

<system-data-structure>
     <editor>This is my first page.</editor>
</system-data-structure>

Create a format using Velocity:

#* this is a multiline comment in Cascade
$currentPageSiteName
$currentPagePath
$currentPage
$currentPage.assetId
$currentPage.assetType
$currentPage.label
$currentPage.metadata.title*#
## This is a single-line comment in Cascade
$currentPage.getStructuredDataNode("editor").textValue
##$_PropertyTool.outputProperties($currentPage)

This is the transformation result:

This is my first page.

1. From the top right (hamburger) menu icon > Sites. You can select multiple sites to publish, however you cannot select which destinations to publish to, it will publish to all enabled and checked by default destinations. If you need to select the destinations, you can right click on the site name and select Publish. Then you will get a destination selection window.
2. If you are in a site, you can publish it from Manage Site > More > Publish.
3. If you are in a site in the Site Content area, you can publish the top level folder, either from the right click menu or navigate to the folder and use the publish button near the top right.