Skip to content

Commit

Permalink
docs(content): 📖 tweak existing articles
Browse files Browse the repository at this point in the history
  • Loading branch information
brklntmhwk committed Nov 28, 2024
1 parent 1a45f18 commit 03cd246
Show file tree
Hide file tree
Showing 2 changed files with 13 additions and 37 deletions.
33 changes: 10 additions & 23 deletions src/content/blog/en/astro-website.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ level: 4
type: blog
title: Build a Personal Website using Astro, Cloudflare Pages, D1, and Front Matter CMS
publishedAt: 2024-07-13T00:34:54.000Z
modifiedAt: 2024-11-28T02:40:22.022Z
modifiedAt: 2024-11-28T03:10:54.637Z
category:
metadata: en/categories
slug: attempt
Expand Down Expand Up @@ -108,7 +108,7 @@ Along the way, I stuck to these key features:

Astro thankfully takes responsibility for content management: [the Content Collections API](https://docs.astro.build/en/guides/content-collections/). For more details, see [the official doc](https://docs.astro.build/ja/recipes/i18n/).

Applying that feature, I add multiligual support by separating language directories... which means, I have to go through a rough patch of manual translation.
Applying that feature, I added multiligual support by separating language directories... which means, I have to go through a rough patch of manual translation.
"I'm in luck I can learn languages at the same time! It kills two birds with one stone!" I'm talking to myself to stay sane.

Speaking of the content formats, it covers YAML and JSON formats as well as Markdown/MDX. I use YAML for storing translation data because of its brevity.
Expand All @@ -117,7 +117,7 @@ Speaking of the content formats, it covers YAML and JSON formats as well as Mark

#### OG Image (Open Graph)

Just in case, I add OG images to every page dreaming of some heavy readers frequently visiting this website and singing its praises on SNS.
Just in case, I added OG images to every page dreaming of some heavy readers frequently visiting this website and singing its praises on SNS.

For the homepage and other fixed pages, static images are applied but when it comes to individual blog and news pages, their OG Images are dynamically generated via [the Astro dynamic routes](https://docs.astro.build/en/guides/routing/#dynamic-routes).
Thanks to the feature, I don't have to rack my brain around them every time a new article is posted. Thank you, Astro.
Expand Down Expand Up @@ -300,9 +300,10 @@ Below are some examples.

I confidently steered in the direction of personal blog in the modern era of video but my resolve is already wavering. Are we meant to dance in the palm of those major tech companies after all...?

I've sort of convinced myself that we cannot run away from YouTube and inevitably added a remark plugin for media frames.
I've sort of accepted that we're destined to live with YouTube and added a remark plugin for media frames.

In design, bare URLs will be transformed into media frames if they are compatible with [the OEmbed](https://oembed.com/) format. Integrations with Canva, YouTube, and Google Slides are also supported.
In design, bare URLs will be transformed into media frames if they are compatible with [the OEmbed](https://oembed.com/) format.
Integrations with Canva, YouTube, and Google Slides are also supported.

"This is merely a safety net. I will never resort to such a feature as long as it can be expressed in the blog...!", I tell myself repeatedly.

Expand Down Expand Up @@ -393,9 +394,11 @@ For bot management, I strongly stuck to [Cloudflare Turnstile](https://developer

### Cloudflare

Cloudflare is, so to speak, a jack of all trades for internet service. it offers CDN, cybersecurity tools, hosting, etc.

#### Cloudflare Pages

Cloudflare is, so to speak, a jack of all trades for internet service. it offers CDN, cybersecurity tools, hosting, etc. This time, I deploy my website using [Cloudflare Pages](https://developers.cloudflare.com/pages/).
This time, I deploy my website using [Cloudflare Pages](https://developers.cloudflare.com/pages/).

##### Why Cloudflare Pages?

Expand Down Expand Up @@ -444,23 +447,7 @@ My choice is [Front Matter CMS](https://frontmatter.codes/). The reasons are:
It's unlike other headless CMS in that it's a VS Code extension and works in local, in your code editor.
This centralizes all the editing work: code tweaks, blog writing, and deployment. Woundn't it especially be a huge advantage to developers?

When it comes to the setup, consult [the official doc](https://frontmatter.codes/docs/getting-started).
Along the way, it automatically detects Astro's content folder and creates each content's fields' definitions in the `frontmatter.json` accordingly. Basically, you're supposed to tweak the settings in this file at the root of your project.

#### Customization of Front Matter CMS

:::video[Demo: Create a new article]
/videos/front-matter-cms-demo.mp4
:::

In the `frontmatter.json`, there are some notable customizations:

- [Compatible with directory-based internationalization(i18n)](#internationalization-i18n)
- You can specify locale directories (in my case, `en` and `ja` as of now) inside the content directory
- By doing so, you can select in which language you're creating a post via the VSCode command and it does create the file under the designated directory for you
- Compatible with the Astro's Content Collections (with both the content and data types)
- You can use the Data functionality for Astro's data collections, not to mention the Contents for Astro's content collections
- Contents like blog and news are treated as "content" while data like translations, site metadata, and blog categories & tags as "data"
For more details, see this article:

https://younagi.dev/blog/astro-and-front-matter-cms-combi/

Expand Down
17 changes: 3 additions & 14 deletions src/content/blog/ja/astro-website.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
title: Astro + Cloudflare Pages + D1 + Front Matter CMS で個人ウェブサイトを作った
description: 動画の時代に個人ブログという茨の道を歩みたいオタクなあなたに贈る開発体験記。Astro + Cloudflare Pages + D1 + Front Matter CMS とその他諸々の構成で作った個人ウェブサイトの諸機能を紹介
publishedAt: 2024-07-13T00:35:10.000Z
modifiedAt: 2024-11-28T02:31:19.690Z
modifiedAt: 2024-11-28T03:11:27.264Z
draft: published
type: blog
category:
Expand Down Expand Up @@ -295,7 +295,7 @@ const { title } = Astro.props

動画の時代に大手を振って個人ブログに舵を切った私だが、早くも心が揺らいでいる。結局、我々は大手テックカンパニーの掌の上で踊らされる宿命なのか・・・。

YouTube の魔の手からは完全に逃れることはできないと悟り、逡巡しながらもメディアの埋め込みを実装した
YouTube の魔の手から逃れることはできないと観念し、辿々しくメディアの埋め込みを実装した
Canva、YouTube、そして Google Slides の変換処理をひとまず作成し、それ以外のメディアは[OEmbed](https://oembed.com/)の規格に応じて適宜メディアフレームに変身するよう、Remark プラグインを自作した。
「これはあくまでセーフティネット、ブログで表現できる限りはこんな機能には頼らないんだから・・!」と自分に言い聞かせる。

Expand Down Expand Up @@ -443,18 +443,7 @@ D1 データベースと[Drizzle ORM(Object-relational Mapping)](https://orm.dri

VS Code の拡張機能であり、ローカルで動くという点で、他のヘッドレス CMS とは一線を画している。これはつまり、コードの修正や記事の執筆、サイトのデプロイなどの作業が VS Code エディタで一元化できるということだ。特に開☆発☆者(デベロッパ)においては大きなメリットとなるのではないだろうか。

初期セットアップについては[Front Matter 公式ドキュメント](https://frontmatter.codes/docs/getting-started)を参照されたし。手順通りに進めると、Astro の`content`フォルダを自動で検知し、その中身に応じて`frontmatter.json`に各コンテンツの項目の定義などを書き出してくれる。基本、Front Matter CMS の設定はプロジェクトルート直下に置かれたこのファイルで管理することになる。

#### Front Matter CMS のカスタマイズ

`frontmatter.json`のカスタマイズについて、幾つか嬉しいポイントがある。

- [ディレクトリによる多言語化](#多言語対応-i18n)との互換性
- コンテンツのディレクトリ内にある言語用のディレクトリを指定して、Front Matter CMS の設定と連携できる(私の場合、今のところ`en``ja`)
- こうして、VSCode のコマンドから記事を作成する際に、書きたい言語を選べるようになった。記事は自動で指定のディレクトリに作成される
- Astro の Content Collections との互換性(コンテンツ、データタイプ両方)
- Front Matter CMS にもコンテンツ、データの概念があり、それぞれを Astro のコンテンツ、データと連携可能
- ブログやニュースなどの「コンテンツ」はコンテンツとして、翻訳文字列やサイトメタデータ、ブログのカテゴリ・タグなどの「データ」はデータとして扱う
詳細は下記の記事を参照されたし。

https://younagi.dev/ja/blog/astro-and-front-matter-cms-combi/

Expand Down

0 comments on commit 03cd246

Please sign in to comment.