diff --git a/site/content/howtos/add-a-simple-md-page.md b/site/content/howtos/add-a-simple-md-page.md new file mode 100644 index 00000000..c1b9b023 --- /dev/null +++ b/site/content/howtos/add-a-simple-md-page.md @@ -0,0 +1,34 @@ +--- +title: How to quickly add a simple Markdown-based page +--- + +Welcome to this tutorial on how to quickly add a simple Markdown-based page to your website. The steps here are designed for non-technical contributors. There's no need to know how to code! + +> [!important] +> This "How to" is only recommended for very simple Markdown pages, e.g. those without images, links to other pages, diagrams, or other elements that can't be previewed in GitHub preview mode. + +>[!tip] +> If you are unfamiliar with Markdown (and its different flavours and extra elements supported by Flowershow based websites), check out [this short guide](https://flowershow.app/docs/syntax) on available syntax elements. + +## Steps + +1. Go to the repository of your website in GitHub. +2. Click on the `content` folder to open it. This is where all the Markdown files for a Flowershow-based website are stored. +3. Optionally, navigate to a subfolder where you want to add your page. +4. Click “Add file” and write the page name + extension `.md`, e.g. `my-new-page.md`. + +> [!tip] +> If you want to add your page to a new subfolder, in the "Name your file..." field, first type the name of the new subfolder, followed by a forward slash, .e.g., `blog/`. After you hit the slash, you'll see the name field gets cleared, but the path before it has been extended with your subfolder name. You can repeat this process if you want to put your file into further nested subfolders. Then, simply type the name of the file with ".md" extension. + +5. Paste or write the contents of the file in Markdown format. +6. (Optionally) Switch to the "Preview" mode, by toggling from "Edit" -> "Preview" at the top of the file content, to see a rough visualisation of your changes. Keep in mind though, that the actual website may have different styling and may support additional Markdown elements that GitHub doesn't render on the preview. +5. When you're happy with the content, click on the “Commit changes...” button. In the "Commit message" field, provide a concise summary of your changes. If necessary, you can add further explanation in the "Extended description" text field. Then select “Commit directly to the main branch”, and hit "Commit changes." +6. The site is now going to be rebuilt to reflect the changes saved to the `main` branch. This can take up to a few minutes. After this time you should see your page live. + +## Summary + +Congratulations, you've now learned how to create a new Markdown page on your Flowershow-based website. + +If anything is not clear to you, or you have suggestions on how we can make this 'How to' better, please don't hesitate to let us know. + +Happy editing! diff --git a/site/content/howtos/add-or-edit-content-on-life-itself-ecosystem.md b/site/content/howtos/add-or-edit-content-on-life-itself-ecosystem.md new file mode 100644 index 00000000..43e8f52b --- /dev/null +++ b/site/content/howtos/add-or-edit-content-on-life-itself-ecosystem.md @@ -0,0 +1,160 @@ +--- +title: How to add or edit content on the Life Itself ecosystem page +isDraft: true +--- + +## Contents + +1. [Introduction](#introduction) +2. [How to edit and add to the site](#how-to-edit-and-add-to-the-site) +3. [Glossary](#glossary) +4. [Contact](#contact) + +## Introduction + +From the outset, we have argued that any successful mapping effort must be collaborative and participatory. To make it as simple as possible to contribute, we have opened up the site, giving it a wiki-like structure, meaning people can contribute and add items directly - no coding required. We hope this can support the ongoing growth of our contributor community, and empower users to continue in collective efforts to make the map ever more useful and informative. + +We have included information on how the site works and its technical architecture. If you’re wanting to get stuck in, feel free to skip over this section and go straight to our instructions on [how to edit and add to the site](#how-to-edit-and-add-to-the-site) - you can always refer back if you need to! + +### How does the site work? + +All the content for the [Polycrisis Action Mapping](https://ecosystem.lifeitself.us/) site is contained within the life-itself/ecosystem [Github repo](https://github.com/life-itself/ecosystem). + +![](../img/repo-homepage.png) + +#### Technical Architecture + +The website is written in [Markdown](#markdown). A tool called content layer converts the Markdown files into HTML (the standard computer language for displaying and formatting web pages) so that they are displayed as pages on the site. This is the case for all pages on the website except for the homepage which is written directly in HTML. + +#### Markdown + +Markdown is a markup language (computer language for displaying and formatting web pages), which is designed to be easy to write and easy to read. It’s widely deployed on the web, for example by DataHub, GitHub, Stackoverflow and many other sites. + +In Markdown, you control the display of the document. For instance, you can format words as bold or italic, add images, create lists, and much more. Mostly, Markdown is just regular text with a few non-alphabetic characters thrown in, like ## or \*\*. + +Head over to our [Markdown Guide](https://playbook.datopian.com/markdown/#why-markdown) to learn more about Markdown and how to use it. + +#### Front Matter + +In the world of computer programming, front matter is metadata (data about data) at the top of a file. Front matter does two things: a) it displays key info about a page (such as its title and description) in a structured way which helps with a consistent layout throughout the site and b) is used as metadata for SEO (search engine optimization) purposes, helping our content to reach interested readers. + +## How to edit and add to the site + +There are two methods for making edits to the website: + +1. Edit directly in Github +2. Edit on your local machine (using a code editor or Obsidian) + +For reasons of simplicity, in this guide we have only outlined how to edit using Github. If you would like to make edits using a code editor or Obsidian, please refer to our [editors’ guide](https://docs.google.com/document/d/1RcwjaJYn0jtMw9rOR9W0Gv2fmQDd7Fjr53NM6j1-lco/edit#heading=h.vkkc3zo06um7) for our [Web3 site](https://web3.lifeitself.us/) and apply these instructions to the ecosystem repo. + +### Edit in Github + +#### Setup + +- Create a [GitHub](https://github.com/) account if you don’t already have one + +#### Key steps + +- Go to the repo storing the website content: [https://github.com/life-itself/ecosystem](https://github.com/life-itself/ecosystem) +- All edits can be made in the main repo - unlike adding content to the site (see below), you can make edits to existing pages without forking the repo. +- Look for the file that corresponds with the page you want to edit. To find the file, it might help to look at the page URL. E.g. To find the file containing the profile page for 42 Acres ([https://ecosystem.lifeitself.us/profiles/alter-ego](https://web3.lifeitself.us/concepts/blockchain)), go to the folder “content”, then “profiles“, then the file “alter-ego.md”. +- Click on the pencil icon in the upper right corner to edit this file +- Make your edits +- Once you’ve made your edits, go to the bottom of the page where you will see a box titled ‘Propose changes’. Type into the first text box below ‘Propose changes’ a brief description of the edits you have made. E.g. ‘fix typo’, ‘add citation’ or ‘expand definition’. Use the box below that for optional further description of your edits. +- Then click the button that says ‘Propose changes’. +- Once you’ve clicked the ‘Propose changes’ button you will be taken to a new page. Here, click the button that says ‘Create pull request’. This will notify a team member to review and confirm the edits you’ve made. +- Once they’ve done that, your edit will appear on the site! Thanks for contributing! + +### Add to the website in Github + +- Go to the repo storing the website content: [https://github.com/life-itself/ecosystem](https://github.com/life-itself/ecosystem) +- Unlike when you are editing an existing page, in order to add a page to the site, you are going to fork the Life Itself ecosystem repo. To do this, click the “Fork” button at the top right of the page. +- Click the green “Create fork” button +- You have now created a fork! You can see that you are working in a fork of the repo by looking at the top left of the screen. It should look like this (but with your own user name). + +![](../img/fork-repo.png) + +- We now recommend that you do all the following steps in the same pull request. That way, you can request all the additions to the site you want to make in one request. But we’re getting ahead of ourselves, let’s add some content! + +#### Templates + +To add a new profile page, please use the [profiles-template.md](https://github.com/life-itself/ecosystem/blob/main/profiles-template.md) in the ecosystem repo. + +To add a new topics page, please use the [topics-template.md](https://github.com/life-itself/ecosystem/blob/main/topics-template.md) in the ecosystem repo. + +Copy the raw contents from the relevant template by clicking the icon with 2 squares overlapping. + +#### Adding a page + +##### Create the page + +- In your fork of the ecosystem repo, go to the folder “content”, then select the folder representing the type of page you want to add, eg “profiles” or “topics”. +- Click on the “Add file” button in the upper right corner to add a new page. Select, “create new file”. +- On the top right, under the “Cancel changes” button is the line wrap mode box. Select “Soft wrap”. + +##### Add the frontmatter + +- Place your cursor in line with the figure “1”. Then “right click” (two finger click on a mac) and select paste. Alternatively, select command+v to paste. This will paste in your template (ensure the template was the last thing you copied). +- Fill in the [frontmatter](#frontmatter) with the relevant information. The template that you have copied across will contain information from another organization/topic. We have left this information in place so you can see how the information should be inputted. +- For a new profile page, the following answers can be left as is, the rest should be tailored to your oragnization. + - Notes_data_entry + - Curation_status +- To add a logo and image to your profile: + - Save the logo and photo you want to be featured on the profile to your computer. Name these files on your computer something that represents the images (eg organization-name-logo.png and organization-name-image.png). + - Copy the name of one of the files you have just made. + - Paste the name of the file into the relevant field in the frontmatter for the profile eg logo, cached. Add /img/ to the beginning so it should look like this: logo: cached: /img/organization-name-logo.png + - Do the same steps for the other image. + - In the url sections of the frontmatter for the logo and image, paste the url of where you downloaded the logo and image from (eg [https://www.facebook.com/AlterEgoNetwork/photos/a.163253037723176/163253617723118/](https://www.facebook.com/AlterEgoNetwork/photos/a.163253037723176/163253617723118/)). + - The image and logo fields of the frontmatter should look like this: + +![](../img/logo-and-image.png) + +- For a new topics page, leave “image” as is. Fill in the rest of the information as appropriate for the topic you are creating the page for. Have fun picking an emoji that you think best represents it! +- Note: All fields within the frontmatter are optional. Remove (or leave empty) the fields that are not in use to eliminate any errors during build. +- Name your file. In the box that says “name your file”, paste in the “id” of your page followed by “.md”. Eg for a profile, it should look like this: + +![](../img/page-name.png) + +##### Adding a description + +- Once you have filled in the frontmatter, add a brief description of the topic/organization. Use the example description to guide what your description should contain and how it should be formatted. + +##### Check and propose changes + +- Once you have filled in the frontmatter and have added a description, check it’s all worked. Click the preview button. It should look like this for a profile: + +![](../img/profile-example.png) + +- Or this for a topic: + +![](../img/topic-example.png) + +- Once you’ve checked everything looks fine, and you’re ready to commit the new file, go to the bottom of the page where you will see a box titled ‘Commit new file’. Type into the first text box below a brief description of what you are proposing, eg “add alter-ego.md”. Use the box below that for optional further description of your edits. +- Now you are going to commit directly to the main branch by clicking the green button that says “Commit new file”. +- Well done! But you’re not done yet. Remember the logo and image you downloaded to your computer? Now you need to upload them to the repo. + +###### Adding an image/logo + +- Remaining in your fork of the ecosystem repo, click “content”, then “assets”, then "img". Once here, click on the “Add file” button, then select “Upload files”. Once here, click on the “Add file” button, then select “Upload files”. Upload your two files eg organization-name-logo.png and organization-name-image.png +- Once you’ve uploaded the images, go to the bottom of the page where you will see a box titled ‘Commit changes’. Type into the first text box below a brief description of what you are proposing, eg “adding images”. +- Now you are going to commit these images directly to the main branch by clicking the green button that says “Commit changes”. + +##### Open pull request + +- Now that you’ve committed your new page and the relevant images, you’re ready to open the pull request. Head back to your fork of the ecosystem repo. You should see a box that looks like this: + +![](../img/pull-request.png) + +- Click the “Contribute button”. Now click the green “Open pull request button” +- In the box that says “Title”, give a title to your pull request. Something like “Add (name of organization) profile page + images”. +- Now click the green “Create pull request button”. This will notify a team member to review and confirm the additions you’ve made to the site. +- Once they’ve done that, your edit will appear on the site! Thanks for contributing! + +## Glossary + +- Repo => short for [Repository](https://docs.github.com/en/get-started/quickstart/github-glossary#repository). Contains all a project’s files. +- Working directory => The folder you are currently working in. + +## Contact + +If you run into any issues while following this guide, please [let us know](https://lifeitself.us/contact/) so we can improve this guide to help future contributors. diff --git a/site/content/howtos/edit-a-page-with-code-editor-or-obsidian.md b/site/content/howtos/edit-a-page-with-code-editor-or-obsidian.md new file mode 100644 index 00000000..f0cdcc77 --- /dev/null +++ b/site/content/howtos/edit-a-page-with-code-editor-or-obsidian.md @@ -0,0 +1,80 @@ +--- +title: "How to edit a page with a code editor or Obsidian" +isDraft: true +--- + +#### Setup + +- Create a [GitHub](https://github.com/) account if you don’t already have one +- Download [VS Code](https://code.visualstudio.com/) or [Obsidian](https://obsidian.md/). You can use whichever one you prefer. This is what you’ll use to view and edit the website’s Markdown files. + +#### Key steps + +##### Stage 1: Fork + +In this stage, you ‘fork’ the Life Itself Web3 repository, i.e. you make a remote copy of the repository in your own GitHub account. If you’ve forked the repo before, skip this stage. + +- Go to the repo storing the website content: [https://github.com/life-itself/web3](https://github.com/life-itself/web3) (0:00-0:02) +- Click the ‘Fork’ button in the upper right-hand corner of the repo page to fork the repository + +##### Stage 2: Clone + +In this stage, you ‘clone’ your forked repository, i.e. you copy your forked version of the Life Itself Web3 repo to your computer so that you can make edits on your local machine without affecting the remote git repo. 00:40-01:50 of the [video tutorial](https://drive.google.com/file/d/1mWqXDx6ICJ_1qreoYoB774weWi-AtyDo/view) corresponds to this stage. _If you’ve cloned the forked repo before, skip this stage._ + +- Search your computer for its ‘terminal’ and open it. The terminal is simply a text-based way of interacting with the computer through commands. In the terminal, you can type commands, manipulate files, execute programs, and open documents. (00:03-00:39) +- On your forked repo page (make sure you’re not on the main repo page), click the green ‘Code’ button and copy the HTTPS link +- Type into Terminal "cd `directory`", where `directory` is replaced by the path to the folder you want to navigate to. E.g. “cd Desktop/Folder/life_itself/tutorial”. On a Mac, you can drag the folder to the terminal after typing “cd”. Otherwise, you can find the folder path [Mac](https://www.howtogeek.com/721126/3-ways-to-see-the-current-folder-path-on-mac/#:~:text=Open%20a%20Finder%20window%2C%20and,path%20to%20the%20current%20folder.); [Windows](https://www.wikihow.com/Find-a-File%27s-Path-on-Windows) and type or paste it in manually. +- What you’re doing here is navigating in Terminal to the folder on your computer where you want to save the cloned repository (i.e. changing the working directory). Normally, on your computer you do this by searching for a folder and clicking on the icon to open it. In Terminal, you do this by typing commands. The command for changing directory is: `directory`. (00:40-1:11) +- Type into Terminal the command “git clone” and then paste the repo URL you copied. E.g. “git clone https://github.com/life-itself/web3.git”. Press enter. (1:13-1:48) + - N.B. When you try this, you may be prompted to install command line developer tools to be able to run git commands, e.g. XCode for Mac. If this is the case, follow the instructions for installation. + +##### Stage 3: Branch + +In this stage, you create a new ‘branch’, or temporary version, of the repository on which to make edits. These edits will later be merged with the main repository branch. + +- Navigate in Terminal to the Life Itself Web3 repo which has been cloned to your computer. To do this, type "cd web3" or "cd `directory`" (as in Stage 2). Press enter. (1:49-2:02) +- Update your local clone of the remote repository. _You don’t need to do this if you’ve only just cloned the repo just now._ + - Type into Terminal “git pull”. Press enter. +- Create a branch on which to make edits + - Type "git checkout -b `your_branch_name`". E.g. you might name your branch “edits”. So you would type “git checkout -b edits”. This command will create a new branch and switch you to this branch. N.B. the branch name cannot contain spaces. + +##### Stage 4: Edit + +In this stage, you use either a code editor, such as VS Code (see 4a), or Obsidian (see 4b) to view and edit the website’s Markdown files. + +###### 4a: VS Code + +- Open VS Code +- Click the ‘Explorer’ icon at the top left hand side of the window. Then click ‘Open Folder’ to open the Life Itself Web3 repo which you cloned. You will then be able to see the list of folders from the repo on the left side of the window. (2:03-3:35) +- Find the file that corresponds with the page you want to edit.\* (3:31-4:03) +- Make your edits and save + +###### 4b: Obsidian + +- Open Obsidian +- Open the cloned github repo folder as a vault (10:07) +- Find the file that corresponds with the page you want to edit.\* +- Make your edits and save. + - See video tutorial (13:05-15:26) for info on useful Obsidian features such as shortcuts for linking to other pages. + +\*N.B. To find the file that corresponds with the page you want to edit, it might help to look at the page URL. E.g. To find the file containing the “Blockchain” page ([https://web3.lifeitself.us/concepts/blockchain](https://web3.lifeitself.us/concepts/blockchain)), go to the folder “concepts“, then the file “blockchain.md”. + +##### Stage 5: Pull request + +In this stage, you prepare the changes you have made (and saved) to a Markdown file to be published on the website. + +- Go to your computer’s Terminal (4:59-5:08) +- Type “git status”. Press enter. (5:09-5:30) +- Type "git add `name of modified file`". E.g. “git add site/content/test.md”. Press enter. (5:31-6:06) If you’ve edited more than one file, you can type “git add.” to add all the modified files with one command. +- Type "git commit -m “`description of edit`"". E.g. "git commit -m “fix typo”" or "git commit -m “add extra text to definition”". Press enter. Note that the description of the edit must be in double quotation marks. (6:07-7:01) +- Type "git push origin `your_branch_name`", replacing `your_branch_name` with the name of the branch you create. +- Submit your changes for review: Go to your Github repo and click on the “Compare & pull request” button. Add a description and submit the pull request. +- Someone from our team will review and confirm the merge. Once they’ve done that, your edit will appear on the site! Thanks for contributing! + +##### Resolving merge conflicts + +On occasion, it is possible that after submitting a pull request you may get a message flagging merge conflicts. This could be because when you were making your changes, someone else might have pushed new changes to the same content you were editing. If this happens, see here for what to do to [resolve a merge conflict](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/addressing-merge-conflicts/resolving-a-merge-conflict-using-the-command-line). + +# Contact + +If you run into any issues while following this guide, please [let us know](https://lifeitself.us/contact/) so we can improve this guide to help future contributors. diff --git a/site/content/howtos/edit-or-add-md-pages-locally.md b/site/content/howtos/edit-or-add-md-pages-locally.md new file mode 100644 index 00000000..c911c9b4 --- /dev/null +++ b/site/content/howtos/edit-or-add-md-pages-locally.md @@ -0,0 +1,58 @@ +--- +title: How to edit or add Markdown-based pages locally on your computer +--- + +## Intro + +In this How to, you will learn how to edit or add Markdown based pages locally on your computer. This offers a range of unique functions, including the ability to automatically link to other pages as well as a simple way to preview the site. + +## Prerequisites + +- A github account +- A github desktop app +- Obsidian + +## Steps + +### Step 1: Clone the GitHub repository to your local machine + +1.1. Go to https://github.com/ and navigate to the repository you want to clone. +1.2. Click the `<> Code` button, then copy the URL shown under "HTTPS" tab. +1.3. Open GitHub Desktop app. +1.4. Click on "File" in the menu bar, then select "Clone repository...". +1.5. In the popup, select the URL tab and paste the URL you just copied. Then, specify a local path where you want the files to be saved. +1.6. Click Clone. + +### Step 2: Open the project in Obsidian + +2.1. Open Obsidian. +2.2. If this is your first time using Obsidian, click on "Open folder as vault" on the welcome screen. If you've used Obsidian before, click on "File" -> "Open vault" first. +2.3. Select 'Open folder as vault' and then navigate to the local path where you cloned the GitHub repository, select `/content` folder inside of it, and click "Open". This will open all the markdown files in the repository in Obsidian's file explorer. + +### Step 3: Identify the markdown file you want to edit or add + +3.1. To edit an existing markdown file: navigate to the file you want to edit, and click it to open. +3.2. To add a new markdown file: click on the "New note" button (pencil icon) in Obsidian's left sidebar, name your file (e.g., `new-page.md`), and press Enter. You might need to move this file to the appropriate directory (pages or posts) later using your file explorer. + +### Step 4: Editing or adding content to your markdown file + +Some links here on editing on obsidian? + +- Another link on markdown formatting? + +Optional steps to test locally? I.e. npm install, npm run dev. + +### Step 5: Push your changes to the GitHub repository: + +5.1 Open your Github desktop app and select 'Add local repository' under 'File' +5.2 Select 'Choose...' and navigate to the folder of the cloned repository and click 'Open +5.3 Write a short summary, explaining the changes you've made +5.4 Press commit to main + +### Summary + +Congratulations, you've now learned how to edit or add Markdown-based pages locally on your computer! + +If anything is not clear to you, or you have suggestions on how we can make this 'How to' better, please don't hesitate to let us know. + +Happy editing! diff --git a/site/content/howtos/edit-text-on-a-single-md-page.md b/site/content/howtos/edit-text-on-a-single-md-page.md new file mode 100644 index 00000000..407e484b --- /dev/null +++ b/site/content/howtos/edit-text-on-a-single-md-page.md @@ -0,0 +1,49 @@ +--- +title: How to quickly edit text content on a single Markdown-based page +--- + +Welcome to this tutorial on how to quickly edit text content on a single Markdown-based page. The steps here are designed for non-technical contributors. There's no need to know how to code! + +> [!important] +> This "How to" is only recommended for text changes only, e.g. those that don't include adding images, links to other pages, diagrams, or other elements that can't be previewed in GitHub preview mode. + +>[!tip] +> If you are unfamiliar with Markdown (and its different flavours and extra elements supported by Flowershow based websites), check out [this short guide](https://flowershow.app/docs/syntax) on available syntax elements. + +## Steps + +### Step 1: Navigate to the underlying Markdown file and edit it + +**Option A: Use the "Edit this page" button** + +If it was enabled, some pages on your website may have an "Edit this page" button at the bottom. By clicking it, you would be redirected to the corresponding Markdown file in your repository, ready for editing. + +**Option B: Locate the underlying Markdown file in the repository yourself** + +If the "Edit this page" button is unavailable, or if want to familiarise yourself more deeply with the repository's structure 💪, follow these steps: + +1. Go to the repository. +2. Click on the `content` folder to open it. This is where all the Markdown files for the website content are stored. +3. Navigate through the subfolders within the `content` folder to find the file corresponding to the page you wish to edit. + +> [!tip] +> To know exactly which file to look for, consider the URL of the web page you're trying to edit. The URL should correspond to the path of the file in the repository (excluding the `/content` prefix). E.g. a web page at `my.app.org/blog/welcome` will have its Markdown file located at `/content/blog/welcome.md`. +> If you can't find the corresponding markdown file in the repository, it may have been written in JSX instead of MD. For JSX you would need to know frontend programming, in which case submit an issue to your repository for the editing to be completed. + +4. Once you've found the correct file, click on it to see its contents. +5. Click on the pencil icon near the top right corner. This will open the file in edit mode. Now you can make your changes. +6. (Optionally) Switch to the "Preview" mode, by toggling from "Edit" -> "Preview" at the top of the file content, to see a rough visualisation of your changes. Keep in mind though, that the actual website may have different styling and may support additional Markdown elements that GitHub doesn't render on the preview. + +### Step 2: Save your changes + +When you're happy with the content, click on the “Commit changes...” button. In the "Commit message" field, provide a concise summary of your changes. If necessary, you can add further explanation in the "Extended description" text field. Then select “Commit directly to the main branch”, and hit "Commit changes." + +The site is now going to be rebuilt to reflect the changes saved to the `main` branch. This can take up to a few minutes. After this time you should see your page live. + +## Summary + +Congratulations! You've now learned how to edit the text content on a single Markdown-based page on your website. + +If anything is not clear to you, or you have suggestions on how we can make this 'How to' better, please don't hesitate to let us know. + +Happy editing! diff --git a/site/content/howtos/publish-obsidian-vault-to-github.md b/site/content/howtos/publish-obsidian-vault-to-github.md new file mode 100644 index 00000000..63ca7921 --- /dev/null +++ b/site/content/howtos/publish-obsidian-vault-to-github.md @@ -0,0 +1,64 @@ +--- +title: How to push an Obsidian vault to a GitHub repository +--- + +This howto walks you through the process of setting up your Obsidian vault as a GitHub repository. Here are some of the benefits of doing so: + +1. Creating a backup of your notes, accessible from anywhere. +2. Keeping track of your note-taking history, thereby enabling you to see the evolution of your ideas over time. +3. Collaborating with others on your notes. + +In this howto, we will use the GitHub Desktop application, an easy-to-use interface for managing your Git repositories locally and on GitHub. This tool is particularly useful if you're not comfortable with Git's command line interface or if you just prefer a more visual representation of your Git operations. + +## Steps + +### Step 1: Setting Up GitHub Desktop App + +1.1. If you haven't already done so, create a GitHub account at https://github.com + +1.2. Download and install the GitHub Desktop app from https://desktop.github.com + +1.3. Once installed, open the GitHub Desktop app. You'll be prompted to sign in with your GitHub account. + +### Step 2: Setting Up Your Vault as a GitHub Repository + +2.1. In the GitHub Desktop app, click on "Add an Existing Repository from your Hard Drive" + +2.2. Navigate to your Obsidian vault's folder using the file explorer. + +2.3. After selecting it, you'll see a warning saying "This directory does not appear to be a Git repository. Would you like to create a repository here instead?" Click on the link "create a repository". + +2.4. You'll be brought to the "Create a New Repository" page with the vault's location already in the "Local Path" box. + +2.5. Choose a name for your repository. It's best to use lowercase and dashes. (For the sake of simplicity use the same or similar name to your vault's folder name.) + +2.6. Add an optional description. + +2.7. Make sure the checkbox "Initialize this repository with a README" is unchecked, and "Git Ignore" and "License" are set to "None". + +2.8. Click on "Create Repository". + +Great! Now you have your Obsidian vault set up as a git repository. Now, let's push it to GitHub. + +### Step 3: Pushing Your Vault to GitHub + +3.1. After you've created the repository, in the GitHub Desktop app you'll see a dashboard with the heading "No local changes". Below you'll see a suggestion with a button "Publish repository". Click on it. (You could also use "Publish repository" button in the top application bar.) + +3.2. A new window will appear. Choose a name (it will automatically suggest the one you chose during the creation process, and its best to leave it this way), add an optional description, and select whether you want it to be public or private. + +> [!Important] +> Please be aware that if your GitHub repository is public, this process will make your Obsidian vault publicly accessible. If you wish to keep your vault private, you'll need to select "Private" when publishing the repository. + +3.3. Click on "Publish Repository". + +3.4. Wait for the process to finish. You'll see a small prompt when the upload is complete. + +3.5. You can now visit your repository on GitHub's website to see your uploaded Obsidian vault. + +## Summary + +Congratulations, you've now learned how to push an Obsidian vault to your Github repository. + +If anything is not clear to you, or you have suggestions on how we can make this 'How to' better, please don't hesitate to let us know. + +Happy editing! diff --git a/site/content/howtos/quickly-create-a-sandbox-website.md b/site/content/howtos/quickly-create-a-sandbox-website.md new file mode 100644 index 00000000..d49b6335 --- /dev/null +++ b/site/content/howtos/quickly-create-a-sandbox-website.md @@ -0,0 +1,34 @@ +--- +title: How to quickly create a sandbox website +--- + +By the end of this guide you will have a working markdown site you can edit, which gets published automatically online 🎉 + +## Prerequisites + +- A GitHub account. If you don’t have one, click [here](https://github.com/signup) to create it. +- A Vercel account. If you don't have one, click [here](https://vercel.com/signup) to create it. Ideally, sign up using your Github account or you can choose to sign up with your email. + +## Sandbox setup + +1. Go to https://github.com/datopian/flowershow +2. At the bottom of the page there is a "Deploy" button - click on this to be redirected to Vercel and log in using your account. +3. Once you have logged in, you will be redirected to the "Create GitHub Repository" page. +4. If you've signed up to Vercel with your GitHub account, you'll see "Git scope" and the field for the repo name. But if you've signed up using email, you'll see different buttons, like "GitHub", "Bitbucket", "GitLab". You need to select GitHub and possibly login to your GitHub account. +5. Select your GitHub account from the "Git Scope" drop-down. If it's not there, click on "Add GitHub Account" to add it. +6. In the right-hand box write a name for the repository. The usual format is all lowercase with hyphens in between words. Then click on the "Create" button. + +The website will then be deployed. This takes approximately 1 minute. + +Once you are on the Congratulations screen, click on the preview of your sandbox website to see the live/published version. + +For instructions on how to add and edit pages, we recommend these tutorials: + +- [[edit-a-page-with-code-editor-or-obsidian|How to edit text content on a single Markdown-based page]] +- [[add-a-simple-md-page|How to add a simple Markdown-based page]] + +Here are some other links Vercel links that might be useful for you: + +- [Dashboard Features Overview](https://vercel.com/docs/concepts/dashboard-features/overview) +- [Dashboard Features](https://vercel.com/docs/concepts/dashboard-features) +- [Projects](https://vercel.com/docs/concepts/projects/project-dashboard) diff --git a/site/content/howtos/why-use-these-tools-to-create-a-catalog.md b/site/content/howtos/why-use-these-tools-to-create-a-catalog.md new file mode 100644 index 00000000..54553bfb --- /dev/null +++ b/site/content/howtos/why-use-these-tools-to-create-a-catalog.md @@ -0,0 +1,12 @@ +--- +title: "Why use these tools to create a catalog?" +--- + +On this site, we offer a “recipe” which uses a combination of free tools to easily create a directory of information that can be used for multiple purposes. With this method, you can start capturing information quickly and intuitively in a format that is flexible and usable later for various needs. Why does this help us? Because to map information – to collect, organise, structure, and classify it – and present it clearly is a way to make more sense of it and therefore of the world around us. + +What are the benefits of using this method to create a directory? +- You can capture both structured (inc. metadata) and unstructured data (inc. free text and images) +- It’s easy to add to +- It has a flexible structure, e.g. you can easily edit structured data fields +- You can collaborate on it +- You can easily access the information later for exploration and visualization, without the need for tidying and re-formatting