STATIC SITE

Convert your Roam graph into a public site!

Premium Features

Installation

You could use the Copy Extension button below to individually install this extension. To install, just paste anywhere in your Roam graph and click "Yes, I Know What I'm Doing".

Manual Installation

If the extension doesn't work after using the copy extension button above, try installing manually using the instructions below.

First create a block with the text {{[[roam/js]]}} on any page in your Roam DB. Then, create a single child of this block type three back ticks. A code block should appear. Copy this code and paste it into the child code block in your graph:

var existing = document.getElementById("roamjs-static-site-main");
if (!existing) {
  var extension = document.createElement("script");
  extension.src = "https://roamjs.com/static-site/main.js";
  extension.id = "roamjs-static-site-main";
  extension.async = true;
  extension.type = "text/javascript";
  document.getElementsByTagName("head")[0].appendChild(extension);
}

Finally, click "Yes, I Know What I'm Doing".


Introduction

Roam is a powerful CMS (content management system), not just for personal knowledge management but for public information as well. There are a couple of problems though with using Roam itself as the public-facing display of that information:

  • Initial load time is slow

  • It is not SEO-friendly

  • The user interface is foreign to most visitors of your graph

This RoamJS Extension allows you to use your Roam graph as the CMS of your own public website. Launching a RoamJS Static Site will download the content of your Roam graph and upload it as web pages to a managed website for you based on your configuration and filters.

Getting Started

This is a fully premium extension. It won't do much without subscribing by clicking the button above to gain access to the RoamJS hosted website infrastructure.

After subscribing and clicking the copy extension button above, paste the extension anywhere you like to keep extensions in your Roam graph. You will then be redirected to the roam/js/static-site page to begin the onboarding flow.

Token

If you added the extension by clicking the copy extension button above after subscribing, then the token should already be set and you'll be on the next step of the onboarding process. If not, or if the token panel is blank for whatever reason, copy your token from the top of this page and add it to the token field.

This token will grant you access to making changes to your website hosted on RoamJS. Do not share this token with anyone else.

Domain

Enter the domain that you would like your website to be reachable at. You must already own the domain from another registrar. If instead of a custom domain, you would like to use a RoamJS subdomain, hit the toggle at the top to switch from custom domain to RoamJS subdomain. You may transfer the website to your own custom domain at any time.

Index

The index field specifies which page in your graph will map to your home page. If you choose a page that doesn't already exist, it will be created for you with some block text so that it doesn't get cleaned up by Roam. Your index page will be included in your website no matter how you specify your filters.

Filters

Filters determine which subset of your graph will be included as pages in your public website. By default, only your index page will be deployed. However, the extension supports four types of filters to help specify which other pages in your graph are included:

  • TAGGED WITH - All pages that reference a given tag will be included. The default value uses the #Website tag

  • STARTS WITH - All pages that have a given prefix will be included. Useful for pages with namespaces.

  • DAILY - Include all of the daily note pages in your graph, each with its own webpage.

  • ALL - Includes all of the pages in your graph, each with its own webpage

Launch

Once you have configured the required fields above, you will be able to launch your RoamJS website!

The dashboard will display the progress of the launch as the backend resources are being set up. At some point, it will require validation on the user's end in order to continue. It will display these directions in blue text depending on the domain you opted to take. These directions will also be emailed to you in case you navigated away from Roam.

  • If you chose a standard custom domain, the dashboard will display four name servers. Go to the domain settings of your domain in the registrar you bought the domain, and click edit name servers. Replace whatever values are present with the four name servers that RoamJS has allocated for your website.

  • If you chose a subdomain of a custom domain you own, the dashboard will display a CNAME record's name and value. Go to the domain settings of your domain in the registrar you bought the domain, and click add a record. The record you add should be of type CNAME and should have the name + value displayed on the dashboard.

  • If you chose a RoamJS subdomain, you will not need to do any additional validation.

The validation step should take 5-10 minutes to propagate those changes globally and validate that you are the proper owner of the domain. Once you see the blue text disappear and the "CREATING NETWORK" step appear, then you'll know that validation was successful.

When the launch process finishes, the progress bar will disappear and a green Live text will appear on the dashboard. If you chose a subdomain of a custom domain you own, you will need to add one more CNAME record to your domain settings, the details of which will have been sent to you over email. Otherwise, your site will already be ready to go.

Click the green Live link on your dashboard to view your new RoamJS-powered website!

Demo

Table of Contents

There are all sorts of ways you could customize your website. Dive into any of the pages below to explore!


Contributors

This extension is brought to you by RoamJS! If you are facing any issues reach out to support@roamjs.com or click on the chat button on the bottom right.

Other Extensions