Link Search Menu Expand Document

Publishing

Summary

In this module, we'll learn how to publish your notes to github pages.

You can read more about dendron's publishing features here.

Previewing your Site

CLI

The following describes how to prepare your notes for publication using Dendron CLI.

Pre-requisites

  • node version 12 or higher, see installation guide here

Requirements

  • pre-requisitie:
    • node version 12 or higher, see installation guide here Node

Setup

In order to to publish, run the following commands inside your workspace.

npm init -y
npm install @dendronhq/dendron-cli@latest
npm install @dendronhq/dendron-11ty@latest

Local Preview

After you have your dependencies installed, build your site using the following command inside your workspace root.

npx dendron buildSite  --stage dev --serve

This will both compile your site locally and make it available at localhost:8080 for instant preview. When building your site locally, the pages will be build to {wsRoot}/build/site.

  • NOTE: dendron currently doesn't support live reload so you'll need to CTRL-C and re-run buildSite in order to see the latest changes

Build for deployment

When you are ready to publish to github, make sure to change the stage to prod.

npx dendron buildSite --stage prod 

This will build your site to the path specified by siteRootDir in dendron.yml. By default, this is located at {wsRoot}/docs.

Get ready to publish

When you are ready, you can go to publishing your site for instructions on announcing your site to the world.

Publishing your site

VSCode

Pre-requisites

  • This assumes you have a github repository.
    • If not, you can create one here from your existing workspace

Create a github repo

  • Follow the instructions here to create a repository named {username}.github.io where {username} is your username on Github

Add your notes

Follow the instructions to push to an existing repository

Turn on github pages

Go to settings

Go down to github pages and select the main branch

Select the docs folder and click save.

Configure your notes for publication

In order for to build your notes for publication, you'll have to tweak a few settings first. Open the command prompt and type >Dendron: Configure (yaml)

You should see something like the following

version: 1
vaults:
    -
        fsPath: vault
site:
    copyAssets: true
    siteHierarchies:
        - root
    siteRootDir: docs
    usePrettyRefs: true
    title: Dendron

Make the following modification under site:

...
site:
    ...
    siteUrl: {SITE_URL}
  • NOTE: you can get your SITE_URL from the settings page in github. you want to take everything up to .com (eg. if the url shown is https://kevinslin.github.io/dendron-publish-sample/, then the site url would be https://kevinslin.github.io)
  • NOTE: if you've setup your github repository using {username}.github.io format, your site url will be the same as the url shown
    • otherwise (as in the example above), you will have a suffix at the end of your SITE_URL (eg. dendron-publish-sample)
    • in this case, you will need to add the suffix using the assetsPrefix property

Examples

  • publishing the repo kevinslin.github.io
site:
    siteUrl: https://kevinslin.github.io
  • publishing the repo dendron-sample
site:
    assetsPrefix: dendron-sample
    siteUrl: https://kevinslin.github.io

Build your notes for publication

In order to have Dendron generate your website, you use the > Site: Build command.

Publish your notes

Github will publish your notes everytime you push. Commit all your changes and perform a git push

git add .
git commit -m "first dendron page"
git push

When you are done, you should see a page like the one here

Congratulations, you just published your first note 🌱

Next