How to publish a page in development mode without HubSpot content staging [code snippet]

HubSpot has a nice feature called content staging which prevents search engines form crawling and indexing the content. But if you are using HubSpot CMS starter you won’t have access to this tool. So a work around is to add the following code to the HEAD of your base layout HTML file. This adds the meta no-index tag and also adds an ugly alert to the bottom of the page to remind you the tag exists. As you work you can ignore the tag but when you are ready to publish you will remember to remove that tag so Google will be free to crawl and index your site.

    <!-- Development Mode -->
<meta name="robots" content="noindex,nofollow,noarchive" />
<script>
window.addEventListener("load", function() {

  // Staging badge - top left corner
  const badge = document.createElement("div");
  badge.textContent = "STAGING";
  badge.style.position = "fixed";
  badge.style.top = "0";
  badge.style.left = "0";
  badge.style.backgroundColor = "yellow";
  badge.style.color = "#000";
  badge.style.fontFamily = "sans-serif";
  badge.style.fontSize = "11px";
  badge.style.fontWeight = "bold";
  badge.style.padding = "4px 10px";
  badge.style.zIndex = "999999";
  badge.style.letterSpacing = "0.5px";
  badge.style.borderBottomRightRadius = "4px";
  document.body.appendChild(badge);

  // Existing dev-mode notice bar
  const newDiv = document.createElement("div");
  newDiv.textContent = "Development mode: noindex. When ready to publish, ask Jake Lett to remove this.";
  newDiv.style.backgroundColor = "yellow";
  newDiv.style.padding = "10px";

  const body = document.body;
  body.appendChild(newDiv);
});
  
  
  
// Rewrite nav links to the current staging domain when previewing in HubSpot sandbox
function isSandbox() {
  return window.location.href.indexOf('sandbox.hs-sites') > -1;
}

function addStatusDot(link, isBuilt) {
  var dot = document.createElement('span');
  dot.className = 'staging-status-flag';
  dot.style.cssText = 'display:inline-block;width:8px;height:8px;border-radius:50%;' +
    'background:' + (isBuilt ? '#2ecc71' : '#e0392e') + ';margin-left:6px;vertical-align:middle;';
  dot.title = isBuilt ? 'Page exists on staging' : 'Not built on staging yet';
  link.appendChild(dot);
}

function updateNavLinks() {
  var domain = document.domain;
  var prodHostPattern = /^https?:\/\/(www\.)changetoyourdomain\.com/i;
  var menuLinks = document.querySelectorAll('#hs_menu_wrapper_main-menu a');

  menuLinks.forEach(function (link) {
    var oldUrl = link.getAttribute('href');

    if (!oldUrl || oldUrl.charAt(0) === '#' ||
        oldUrl.indexOf('javascript:') === 0 ||
        oldUrl.indexOf('mailto:') === 0 ||
        oldUrl.indexOf('tel:') === 0) {
      link.style.pointerEvents = 'auto';
      return;
    }

    if (prodHostPattern.test(oldUrl)) {
      var newUrl = oldUrl.replace(prodHostPattern, 'https://' + domain);
      link.setAttribute('href', newUrl);

      // Check if the staging page actually exists
      fetch(newUrl, { method: 'HEAD', mode: 'cors' })
        .then(function (res) {
          addStatusDot(link, res.ok);
        })
        .catch(function () {
          addStatusDot(link, false); // treat network/CORS errors as "not built"
        });
    }

    link.style.pointerEvents = 'auto';
  });
}

if (isSandbox()) {
  document.querySelectorAll('#hs_menu_wrapper_main-menu a').forEach(function (link) {
    link.style.pointerEvents = 'none';
  });
  window.addEventListener('load', updateNavLinks);
}
</script>
<!-- End Development Mode -->