Markdown-based Websites

Create markdown-based website, update it, add collaborators and discover markdown superpowers

Tutorial 1: Create a website from scratch using markdown and PortalJS

In this tutorial we will walk you through creating an elegant fully functional website written in simple markdown and published with PortalJS.

By the end of this tutorial you will

  • have a working markdown-based website powered by PortalJS.
  • be able to edit the text and add pages all from an online interface without installing anything.

🖼️ [SCREENSHOT of final website]

Setup a sandbox website including live publishing 💃

https://app.tango.us/app/workflow/Setup-a-Flowershow-sandbox-website-including-publishing-9bef984b9dd14c07ae3288bb426c306e

  • Prerequisites: sign up for github (and vercel?)
  • Navigate to datopian flowershow: [link] 🖼️
  • Fork this? or click on deploy vercel
  • Let it build
  • Visit the site! Yay! your site is working 🖼️

Now let's edit the page

💃 https://app.tango.us/app/workflow/Edit-a-single-Markdown-based-page-4aa9bd806829415eb3a86136bfb176eb

  • Add some text: let's change the front page
    • (save and watch it redeploy)
  • Add a remote image??
  • Add an image??? (is it worth it or could come later)

Let's add a page: e.g. about page

💃 https://app.tango.us/app/workflow/Add-a-single-Markdown-based-page-c14ae6dc9e1549f5af87b513daa701ba

What is this markdown stuff?

  • Idea of "markup" - how is this different from plain text
  • Brief info about markdown
  • Link to markdown tutorials
  • Explain we offer "markdown plus"
  • ?? Explain about PFM (vs GFM …)

Trailer for tutorial 2

[Optional] Intro to Part II: What's next and why are we going to install to go local …

Editing on github UI is ok but there are some issues e.g. can't work offline; can't add multiple files at same times, no "WYSIWYG" markdown editing; github markdown is subtlye different etc etc.