Skip to content

Latest commit

 

History

History
94 lines (84 loc) · 4.68 KB

introduction.md

File metadata and controls

94 lines (84 loc) · 4.68 KB
Raw

Make It Markdown: A Markdown-based Websites Guide 🚀

Welcome to Make it Markdown! 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!

[[background|Start Now]]

Table of Contents

[!info] 🚧 Tutorials 3 and 4 are currently work-in-progress, but they are available in outline form.

  • [[background|Background and motivation]]
    • [[background#What is Markdown?|Markdown is a lightweight markup language used to format text]]
    • [[background#Why use Markdown?|Markdown is:]]
      • [[background#Markdown is simple and intuitive|Simple and intuitive]]
      • [[background#Markdown is portable and compatible|Portable and compatible]]
      • [[background#Markdown is flexible and extensible|Flexible and extensible]]
      • [[background#Markdown is platform-independent|Platform-independent]]
      • [[background#Markdown is future-proof|Future-proof]]
    • [[background#The MOGF approach|MOGF is a "stack" of tools for building markdown-based websites that is free and easy to use]]
      • [[background#GitHub|GitHub enables multiple people to make separate changes to web pages at the same time]]
      • [[background#Obsidian|Obsidian enables offline editing and saving multiple files at once, supports an extended version of Markdown, and automatically previews text]]
      • [[background#Flowershow|Flowershow converts markdown files into web pages]]
  • [[tutorial-1|Tutorial 1: Create a website from scratch using Markdown]]
    • [[tutorial-1#Prerequisites|Prerequisites]]
    • [[tutorial-1#Setting up a website|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
    • [[tutorial-1#Editing a page on your website|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
    • [[tutorial-1#Add a single Markdown-based page|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|Tutorial 2: Edit your website locally on your computer using Obsidian]]
    • [[tutorial-2#Prerequisites|Prerequisites]]
    • [[tutorial-2#Clone the GitHub repository on your computer|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
    • [[tutorial-2#Edit your site in Obsidian|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
    • [[tutorial-2#Save and publish your changes|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|Tutorial 3: Collaborating with others on your website project (WIP)]]
    • 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|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