Learn: Build a Markdown-based Website 🚀

Welcome! Here you can learn how to build markdown-based websites – and why a markdown-based approach is awesome 🦸‍♀️

This series of tutorials guides you through the basics of creating a website using a Markdown-based approach that we have termed MOGF (Markdown + Obsidian + GitHub + Flowershow).

By the end of this tutorial series, you will:

• Understand what Markdown is, and the advantages of a Markdown-based approach for building websites (in particular the MOGF approach)
• Learn how to create a website from scratch using Markdown
• Learn how to edit your website locally on your computer using Obsidian
• Learn how to collaborate with others on your website project
• Learn how to customise your website locally and preview your changes locally

If you are already familiar with what Markdown is and want to jump straight into learning how to build a website using the MOGF approach, feel free to skip the next section. Otherwise, click below to get started!

Start Now

Table of Contents

• Background and motivation
  • Markdown is a lightweight markup language used to format text
  • Markdown is:
    • Simple and intuitive
    • Portable and compatible
    • Flexible and extensible
    • Platform-independent
    • Future-proof
  • MOGF is a "stack" of tools for building markdown-based websites that is free and easy to use
    • GitHub enables multiple people to make separate changes to web pages at the same time
    • Obsidian enables offline editing and saving multiple files at once, supports an extended version of Markdown, and automatically previews text
    • Flowershow converts markdown files into web pages
• Tutorial 1: Create a website from scratch using Markdown
  • Prerequisites
  • Setting up a website
    • Navigate to your Github account
    • Create a new repository
    • Give your repository a name
    • Select 'Add a README file'
    • Click 'Create repository'.
    • Navigate to Flowershow Cloud
    • Sign in to Flowershow with your GitHub account details
    • Create a new site
    • View your published site!
    • Change your subdomain name
  • Editing a page on your website
    • Navigate to your site's repository on GitHub
    • Edit the "README.md" file
    • Save your changes
    • Preview your site after changes
  • Add a single Markdown-based page
    • Navigate to your website's repository
    • Create a new file
    • Type the name of the new file you want to create
    • Write the content of the file
    • Save your changes
    • View your site after changes
• Tutorial 2: Edit your website locally on your computer using Obsidian
  • Prerequisites
  • Clone the GitHub repository on your computer
    • Open GitHub Desktop app
    • Click on "Clone a Repository from the Internet…"
    • Select the repository you want to clone
    • Choose where your repository should be saved
    • Click "Clone" and wait for the process to complete
  • Edit your site in Obsidian
    • Open Obsidian
    • Open your repository's /content folder as vault
    • Edit your site's content
      • Adding wiki-links
      • Creating a folder
      • Creating an index
      • Adding a callout
  • Save and publish your changes
    • Navigate to GitHub Desktop app
    • Commit your changes
    • Push your changes to the remote repository
    • See updated site live!
• Tutorial 3: Collaborating with others on your website project
  • Create a new branch
  • Make changes in the new branch
  • Create a pull request (PR)
  • Review and merge a pull request
  • Resolving conflicts
• Tutorial 4: Customising your website locally and previewing your changes locally (WIP)
  • Previewing the site locally
  • Changing the site title and description
  • Configuring the title, description and navbar
  • Integrating with Google Analytics
  • Customising the Tailwind theme