diff --git a/site/content/assets/blog/live-home-page.png b/site/content/assets/blog/tutorial-2-result.png similarity index 100% rename from site/content/assets/blog/live-home-page.png rename to site/content/assets/blog/tutorial-2-result.png diff --git a/site/content/blog/edit-a-website-locally.md b/site/content/blog/edit-a-website-locally.md index 7bdfa8a6..e662405c 100644 --- a/site/content/blog/edit-a-website-locally.md +++ b/site/content/blog/edit-a-website-locally.md @@ -17,7 +17,7 @@ By the end of this tutorial, you will: Below is a screenshot of how the final website will look like: -![[live-home-page.png]] +![[tutorial-2-result.png]] Let's start by understanding why using GitHub UI as we did in tutorial 1 is not always a good choice. @@ -241,7 +241,7 @@ Note, that under "SOURCE" section (next to the preview) there is also our last c Click on the preview to see the updated site live! -![[live-home-page.png]] +![[tutorial-2-result.png]] ![[live-book-home-page.png]] ![[live-book.png]] diff --git a/site/content/guide/index.md b/site/content/guide/index.md index 0ee0d96a..d991dfb3 100644 --- a/site/content/guide/index.md +++ b/site/content/guide/index.md @@ -44,14 +44,39 @@ Below is a screenshot of how the final website will look like: # Tutorial 2: Editing your site locally on your computer -### What is this markdown stuff? +In this tutorial, we will walk you through the process of editing your Flowershow website locally on your computer. -- 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 ...) +By the end of this tutorial, you will: -### Why go local? +- 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. -While editing on GitHub UI is acceptable, it has its limitations – it doesn't support working offline, adding multiple files simultaneously, or previewing many markdown syntax elements supported by Flowershow-based websites. +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!]] \ No newline at end of file