9dea140859
* [site,seo][xs]: add custom _document with lang prop, add description to meta tags, make title larger * [site,seo][xs]: add apple touch icon, add alt props to images * [site,seo][xs]: add icon to default seo * [site,seo][s]: implement next-sitemap * [site,seo][s]: review page titles * Rebuild package-lock.json files * Regenerate package-lock
85 lines
2.9 KiB
Markdown
85 lines
2.9 KiB
Markdown
---
|
|
showToc: false
|
|
showSidebar: false
|
|
title: "Markdown-based Websites Guide"
|
|
disableTitle: true
|
|
---
|
|
|
|
<Hero title="Markdown-based Websites" subtitle="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.
|
|
|
|
Below is a screenshot of how the final website will look like:
|
|
![[tutorial-1-result.png]]
|
|
|
|
### Setup a sandbox website including live publishing
|
|
|
|
- Prerequisites: sign up for GitHub and Vercel
|
|
- Navigate to [datopian/flowershow repository](https://github.com/datopian/flowershow)
|
|
- Click on "Deploy"
|
|
- Let the site build on Vercel
|
|
- Visit the site! Yay! Your site is working! 🎉
|
|
|
|
### Now, let's edit the front page
|
|
|
|
- Navigate to `content/index.md` file in the site repository
|
|
- Add some text to it
|
|
- Save and watch the site redeploy
|
|
- Visit the site! Yay! Your changes are live! 🎉
|
|
|
|
### Let's add a page: e.g. about page
|
|
|
|
- Navigate to the `content` folder in the site repository
|
|
- Add `about.md` file with some text
|
|
- Save and watch the site redeploy
|
|
- Visit the site! Yay! Your changes are live! 🎉
|
|
|
|
> [!tip]
|
|
> Read full tutorial [[create-a-website-from-scratch|here!]]
|
|
|
|
# Tutorial 2: Editing your site locally on your computer
|
|
|
|
In this tutorial, we will walk you through the process of editing your Flowershow website locally on your computer.
|
|
|
|
By the end of this tutorial, you will:
|
|
|
|
- Understand what is Markdown and why you should use Obsidian to edit content on your Flowershow websites in most cases.
|
|
- Gain a deeper understanding of working with Git and GitHub Desktop.
|
|
- Learn how to clone your website's repository to your computer.
|
|
- Learn how to edit content using Obsidian and what are the benefits of it.
|
|
- Learn how to commit (save) your changes locally and push them back to the GitHub repository.
|
|
|
|
Below is a screenshot of how the final website will look like:
|
|
|
|
![[tutorial-2-result.png]]
|
|
|
|
### Clone the repository to your computer
|
|
|
|
- Setup GitHub Desktop app with your GitHub account
|
|
- Grab your site's repository URL
|
|
- Open GitHub Desktop app and clone the repository
|
|
- Yay! You have a copy of your website's repository on your computer! 🎉
|
|
|
|
### Now, let's edit in Obsidian
|
|
|
|
- Open the `/content` folder of the cloned repository in Obsidian
|
|
- Edit the home page and the about page
|
|
- Create a folder with the reviews of books you've read
|
|
|
|
### Commit your changes
|
|
|
|
- Commit the changes in GitHub Desktop app
|
|
- Push the changes to the remote repository
|
|
- Watch the site redeploy
|
|
- Visit the site! Yay! Your changes are live! 🎉
|
|
|
|
> [!tip]
|
|
> Read full tutorial [[edit-a-website-locally|here!]]
|