Share Your Notes Online: Publish Dendron with Netlify and GitHub

Dendron helps people and products organize with notes, docs, and knowledge of all the things. Let’s see how easy it is to publish and have a static site hosted on Netlify!

You’ll learn how to publish your Dendron notes using Netlify and GitHub, which looks like this demo website. This tutorial assumes that you have basic knowledge of GitHub and Visual Studio Code (VSCode).

• Join GitHub
• Learn: Git and GitHub
• Join Netlify
• Download Visual Studio Code

This uses a brand new Dendron Workspace you can later configure to work with your own vaults. Do you already have a workspace you’d prefer using? Reference the Dendron docs for in-depth details on how the template, and other workspaces, can publish to Netlify: Publishing with Netlify.

Part 1: GitHub

When logged into GitHub, click here to generate a new Dendron Workspace pre-configured for Netlify publishing. If you’re wondering, we’re using this template on GitHub.

Nice! That’s all we need to do for this minimal Dendron setup. To understand what is going on behind the scenes, you can read the template README.

Note that this tutorial will work with both private and public repositories.

Part 2: Netlify

The rest of the steps are done in the Netlify portal.

Step 1: Import your repository

When logged into Netlify, you start on your Team Overview page.

• Click New site from Git
• Under Connect to Git provider, select GitHub
• You’ll be asked configure Dendron for permissions. It’s best practice to go with Only select repositories, and selecting the repository you made from the template

Once permissions are configured, select the repository in Netlify. There is no need to change any of default values, since the GitHub template is providing them from netlify.toml. Scroll to the bottom, and click Deploy site.

Your website should now be building!

For more information on Netlify app permissions, to GitHub, refer to Netlify Docs: Authentication with the Netlify GitHub App

Step 2: Configure your website name

By default, Netlify generates a random combination of strings. In the example so far, the website is named elastic-hugle-37bfd5.netlify.app. If you don't want to own your own domain name, you can at least change the elastic-hugle-37bfd5 section.

• Site settings
• Under Site information, click Change site name
• Enter new name, and if it is available, click Save

For more information on custom domains, beyond the above, refer to Netlify Docs: Custom domains

Step 3: View deploy status

Under the Deploys tab, in Netlify, you can view the status of your website. This is where build information will be posted whenever new commits are posted to the main branch of your repository on GitHub.

This is a great way to check whether build have failed, or are still in progress. If you run into any errors, and aren’t sure what to do next, jump into the Dendron Discord where we have a #questions channel.

Summary

You’re done! From now on, all new commits you make to your repository on GitHub will trigger a new publishing update to your website.

In this tutorial, you learned how to:

• Create a pre-configured, minimal Dendron Workspace from a template
• Import a repository into Netlify
• Create a custom name for your Netlify website
• View deploy status in Netlify

Next steps

Now what? Publishing is set, but Dendron isn’t just for what you want to share with the world. It’s an open source, local-first knowledge management solution that scales as you do.

• Dendron Getting Started Guide
• Dendron Publishing Guide
• Dendron FAQ
• Dendron Concepts
• Netlify Docs Home Page

Enjoy the blog? Subscribe to our newsletter!

Newsletters not your thing? You can also follow us elsewhere on the interwebs:

• Join Dendron on Discord
• Follow Dendron on Twitter
• Checkout Dendron on GitHub