DATA-WORLD-BLOG

Awesomeをmd版で作ってみる

👤horomi

できたページ:

Awesomeをmdx設定にする

blog.config.ts

 	const blogConfig: BlogConfig = {
-  use: "notion", // mdx or notion
+  use: "mdx", // mdx or notion
   siteLogo: {
     url: "/images/logo.svg",
     width: 201,

Vercelにdeploy

ローカルでは表示されてたけどサーバーではエラに。

image block

yarn add @types/react@latest @types/react-dom@latest -D

rm -rf node_modules yarn.lock
yarn install

修正後deployしたら成功(/・ω・)/

記事のあるdirをValutにつなげる

/contents

image block

元々指示されているプロパティをコピペすると、、、自動でNotionみたいなプロパティ表示になった👀

---
title: Travel to Alaska
date: 2021-05-14
writtenBy: awesome
category: travel
tags: []
related: ["boston", "cuba"]
thumbnail: /images/alaska.jpeg
---
image block

VSCode

Vaultをつないだことで、.obsidian っていうディレクトリが出現するけど、ignoreせずにpushする。

image block

微調整が必要

Contents/Slug/index.mdx にしないと表示されないから、

一旦Vault用ディレクトリ(Awesome-md03)から出して、ディレクトリ名をSlug(今回の場合:Obsidian-first)にして、ファイル名をindexにする。

※ 拡張子を.mdから.mdxにするのもお忘れなく

image block

所感🤔

ちょっとまだObsidianの方の調整は必要そう。

  • 指定ディレクトリ内でファイルをcreateしたらテンプレが表示されるようにしたい
  • ファイルを作成したらアクティブなディレクトリ内に作られるようにしたい

Daily日記用に使っていたTemplaterっていうプラグインを使ってみようとしたけどちょっとまだ上手くいかない。

image block

あくまでObsidianは下書き用って感じで、最終的にはVSCode。

ログ