From d58103d5e16c68886f0ae0d3b28f4c1a3cdd3382 Mon Sep 17 00:00:00 2001 From: Matthew Wong Date: Mon, 12 Dec 2022 11:55:00 -0500 Subject: [PATCH] vault backup: 2022-12-12 11:55:00 --- publish/customize-linked-blog-starter.md | 3 -- .../deploy-a-custom-linked-blog-starter.md | 25 ++++++++++++- publish/home.md | 35 +++++++------------ publish/install-linked-blog-starter.md | 3 +- ...ed-blog-starter-does-not-reinvent-wheel.md | 13 +++++++ ...bsidian-notes-with-linked-blog-starter.md} | 7 ++-- publish/reinventing-the-wheel.md | 5 +++ .../update-publish-settings-github-actions.md | 2 +- 8 files changed, 61 insertions(+), 32 deletions(-) delete mode 100644 publish/customize-linked-blog-starter.md create mode 100644 publish/linked-blog-starter-does-not-reinvent-wheel.md rename publish/{deploy-obsidian-notes-with-linked-blog-starter-and-github-actions.md => publish-your-obsidian-notes-with-linked-blog-starter.md} (84%) create mode 100644 publish/reinventing-the-wheel.md diff --git a/publish/customize-linked-blog-starter.md b/publish/customize-linked-blog-starter.md deleted file mode 100644 index 776ef5f..0000000 --- a/publish/customize-linked-blog-starter.md +++ /dev/null @@ -1,3 +0,0 @@ -- Look at Fleeting Notes website for a more comprehensive example of what this blog can be made to become. -- Linked Preview -- \ No newline at end of file diff --git a/publish/deploy-a-custom-linked-blog-starter.md b/publish/deploy-a-custom-linked-blog-starter.md index 2ec9f01..b23af9a 100644 --- a/publish/deploy-a-custom-linked-blog-starter.md +++ b/publish/deploy-a-custom-linked-blog-starter.md @@ -1 +1,24 @@ -The good thing about separating the script is that the blog starter can easily be \ No newline at end of file + +By the end of this tutorial, you will have a custom version of the [linked-blog-starter](https://github.com/matthewwong525/linked-blog-starter) that deploys to Vercel + +## Fork the repository and get it to run locally +First, we want to fork the linked-blog-starter repo, then [[install-linked-blog-starter|install]] and run it locally. + +**Note**: Update `https://github.com/matthewwong525/linked-blog-starter` with your own repository link + +![[install-linked-blog-starter]] + +After doing the installations, you can update the components as you wish. + +## Make changes to the forked repository +Here are the [docs for Next.JS](https://nextjs.org/docs) and a few things to know about: +- Update `/next.config.js` to update the redirects +- Use `/components/misc/preview-link.tsx` to add link previews to any text on hover +- The [fleeting-notes-website](https://github.com/fleetingnotes/fleeting-notes-website) repository is a fork with lots of good examples (including, post-list, comments, etc.) +- The `/common_md/` directory is where the markdown files are stored in the [common markdown](https://commonmark.org/) format. Use [obsidian-export](https://github.com/zoni/obsidian-export) to convert your notes to common markdown + +## Publish the repository and link it with an MD repository +1. [[publish-your-obsidian-notes-with-linked-blog-starter|Create and publish]] your forked md repository +2. [[update-publish-settings-github-actions|Update the `BLOG_REPO` environment variable]] to point to your forked repo +3. OPTIONAL: [[connect-obsidian-vault-with-github|Connect your Obsidian Vault with Github]] + diff --git a/publish/home.md b/publish/home.md index e52e38c..96d03c7 100644 --- a/publish/home.md +++ b/publish/home.md @@ -1,40 +1,31 @@ --- -title: "Home" +title: "A Customizable Obsidian Publish alternative using Next.JS" --- -# Host your second brain with Next.JS +# A Customizable Obsidian Publish alternative using Next.JS -This repository is a modified version of the blog starter provided by Next. JS. Below are some added features of the [linked-blog-starter](https://github.com/matthewwong525/linked-blog-starter): +This repository is a modified version of the blog starter provided by Next.JS. Below are some added features of the [linked-blog-starter](https://github.com/matthewwong525/linked-blog-starter): - Automatically generated backlinks and link previews - [[works-out-of-the-box-with-markdown-files|Works out of the box]] with your markdown files (No configuration needed) - Supports markdown & Obsidian specific markdown syntax (via [obsidian-export](https://github.com/zoni/obsidian-export)) +- Embed "PreviewLinks" outside of the markdown files (See the footer in the [example](https://linked-blog-starter.vercel.app/home)) - Highly customizable with Next.js, Tailwind v3 and React -## How to use this with Obsidian markdown files -To use this with Obsidian, you'll need to use [obsidian-export](https://github.com/zoni/obsidian-export) to [[convert-obsidian-notes-to-common-markdown|convert your obsidian notes to a common markdown]] format. Once in the common markdown format, add the markdown files to the `/common_md` folder and the blog posts will be created. +## Why I created this? +It's true that there are many Obsidian Publish alternatives, but, many of these solutions are hard to [[deploy-a-custom-linked-blog-starter|customize]], difficult to publish, and tend to [[linked-blog-starter-does-not-reinvent-wheel|reinvent the wheel]]. With this repository, I want to create a simple template that takes care of everything. Here's what the publish workflow looks like after [[publish-your-obsidian-notes-with-linked-blog-starter|setting everything up:]] -Here are the external libraries I used to help me convert Obsidian markdown files to beautiful HTML: -- [obsidian-export](https://github.com/zoni/obsidian-export) (Obsidian MD -> [Common MD](https://commonmark.org/)) -- [remarkjs](https://github.com/remarkjs/remark) (Common MD -> HTML) -- [github-markdown-css](https://github.com/sindresorhus/github-markdown-css) (HTML -> Beautiful HTML) +1. Write a note in `/publish` folder within Obsidian +2. Run the backup command [[connect-obsidian-vault-with-github|using the Obsidian Git plugin]] +3. Done. Your notes are published. ## Demo - [https://linked-blog-starter.vercel.app/](https://linked-blog-starter.vercel.app/) ## Deploy your own +Only deploy through this method, if you want to get a quick server up and running. Otherwise, I'd recommend following the [[publish-your-obsidian-notes-with-linked-blog-starter|instructions to integrate this with your Obsidian Vault]]. -Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/matthewwong525/linked-blog-starter) +Deploy the example using [Vercel](https://vercel.com/new/git/external?repository-url=https://github.com/matthewwong525/linked-blog-starter&project-name=linked-blog-starter&repository-name=linked-blog-starter) or preview live with [StackBlitz](https://stackblitz.com/github/matthewwong525/linked-blog-starter) -[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/blog-starter&project-name=blog-starter&repository-name=blog-starter) +## Custom examples -### Related examples -- [Fleeting Notes](https://fleetingnotes.app) - -## [[install-linked-blog-starter|Installation]] -![[install-linked-blog-starter]] - -# Notes -- `linked-blog-starter` uses [Tailwind CSS](https://tailwindcss.com) [(v3.0)](https://tailwindcss.com/blog/tailwindcss-v3). -- Markdown files are [[statically-generated|statically generated]] -- Markdown is styled using [generated GitHub flavoured markdown](https://github.com/sindresorhus/github-markdown-css) +- [Fleeting Notes](https://fleetingnotes.app) - L diff --git a/publish/install-linked-blog-starter.md b/publish/install-linked-blog-starter.md index 353c6a2..fbec433 100644 --- a/publish/install-linked-blog-starter.md +++ b/publish/install-linked-blog-starter.md @@ -1,4 +1,5 @@ 1. Clone this repo by running `git clone https://github.com/matthewwong525/linked-blog-starter` 2. `cd linked-blog-starter` 3. `npm install` -4. `npm run dev` \ No newline at end of file +4. `npm run dev` +5. Go to `localhost:3000` in your browser \ No newline at end of file diff --git a/publish/linked-blog-starter-does-not-reinvent-wheel.md b/publish/linked-blog-starter-does-not-reinvent-wheel.md new file mode 100644 index 0000000..ac1c218 --- /dev/null +++ b/publish/linked-blog-starter-does-not-reinvent-wheel.md @@ -0,0 +1,13 @@ +--- +title: "linked-blog-starter does not reinvent the wheel" +date: 2022-12-12 +--- +I'm not a fan of [[reinventing-the-wheel|reinventing the wheel]], thus, I've searched for the best libraries out there to help me make this website. Here are a few external libraries I used: + +## Converting MD to HTML +- [obsidian-export](https://github.com/zoni/obsidian-export) (Obsidian MD -> [Common MD](https://commonmark.org/)) +- [remarkjs](https://github.com/remarkjs/remark) (Common MD -> HTML) +- [github-markdown-css](https://github.com/sindresorhus/github-markdown-css) (HTML -> Beautiful HTML) + +## Others: +- Obsidian Git to help with [[connect-obsidian-vault-with-github|publishing notes from within the Obsidian Vault]] \ No newline at end of file diff --git a/publish/deploy-obsidian-notes-with-linked-blog-starter-and-github-actions.md b/publish/publish-your-obsidian-notes-with-linked-blog-starter.md similarity index 84% rename from publish/deploy-obsidian-notes-with-linked-blog-starter-and-github-actions.md rename to publish/publish-your-obsidian-notes-with-linked-blog-starter.md index 729530b..ef28946 100644 --- a/publish/deploy-obsidian-notes-with-linked-blog-starter-and-github-actions.md +++ b/publish/publish-your-obsidian-notes-with-linked-blog-starter.md @@ -20,7 +20,6 @@ By the end of this tutorial, you'll have a github repository that will automatic **Note**: Make sure you don't delete the `/publish/home.md` file as that is your "landing page" -Additional Readings -- [[connect-obsidian-vault-with-github|How to connect Obsidian with Github]] -- [[update-publish-settings-github-actions|Updating the publish settings]] -- [[deploy-a-custom-linked-blog-starter]] \ No newline at end of file +Optionally, you can: +- [[connect-obsidian-vault-with-github|Publish Notes within your Obsidian Vault]] by installing the Obsidian Git plugin +- [[update-publish-settings-github-actions|Update the publish settings]] to publish your notes to a [[deploy-a-custom-linked-blog-starter|custom version]] of the linked-blog-starter \ No newline at end of file diff --git a/publish/reinventing-the-wheel.md b/publish/reinventing-the-wheel.md new file mode 100644 index 0000000..d0dcae5 --- /dev/null +++ b/publish/reinventing-the-wheel.md @@ -0,0 +1,5 @@ +--- +title: "Reinventing the Wheel" +date: 2022-12-12 +--- +> In programming, the phrase "reinventing the wheel" refers to the act of writing code to implement a function or feature that already exists in a library or framework. For example, if a programmer writes a function to sort a list of numbers when there is already a sorting function available in the standard library, they would be said to be "reinventing the wheel." \ No newline at end of file diff --git a/publish/update-publish-settings-github-actions.md b/publish/update-publish-settings-github-actions.md index 98d20a8..8e0acb7 100644 --- a/publish/update-publish-settings-github-actions.md +++ b/publish/update-publish-settings-github-actions.md @@ -3,7 +3,7 @@ title: "Update the Publish Settings" --- There are two things you can modify in the workflow. The publish directory and the blog repository. -- `BLOG_REPO`: Next.JS app repository template that is used to publish your markdown notes. This is useful when you [[customize-linked-blog-starter|create your own custom linked blog]] +- `BLOG_REPO`: Next.JS app repository template that is used to publish your markdown notes. This is useful when you [[deploy-a-custom-linked-blog-starter|create your own custom linked blog]] - `PUBLISH_DIR`: The folder that is published to the linked blog. All files and attachments in this folder will be published on the web Go into `.github/workflows/publish.yml` in your forked repository forked from [linked-blog-starter-md](https://github.com/matthewwong525/linked-blog-starter-md) and update the environment variables to your desire