[{"data":1,"prerenderedAt":78},["ShallowReactive",2],{"blog-tags":3,"header-recruit-jobs":17,"blog-post-astro-notion-blog":26},[4,5,6,7,8,9,10,11,12,13,14,15,16],"Notion AI","Notionカレンダー","Notionサイト","Notionメール","インテグレーション \u002F 外部ツール連携","データベース","プラン \u002F 請求 \u002F 料金 \u002F 支払い","ページ \u002F ブロック","マーケットプレイス \u002F テンプレート","ワークスペース \u002F サイドバー","共有 \u002F コラボレーション","数式","設定",[18,22],{"path":19,"title":20,"order":21},"\u002Frecruit\u002Fnotion-consultant","Notionエンジニア\u002Fコンサルタント",1,{"path":23,"title":24,"order":25},"\u002Frecruit\u002Fpresales","Notion導入ソリューションセールス",2,{"slug":27,"title":28,"date":29,"lastUpdatedAt":30,"excerpt":31,"categories":32,"tags":34,"author":35,"noIndex":42,"html":43,"headings":44,"qas":76,"relatedQAsByTag":77},"astro-notion-blog","非エンジニアでもNotionを使って簡単に無料ブログが開設できるastro-notion-blogの紹介","2023-02-12T00:00:00.000Z","2024-09-01T00:00:00.000Z","非エンジニアでも簡単にNotionブログが開設できる「astro-notion-blog」を紹介します。",[33],"個人利用",[8],{"id":36,"name":37,"image":38,"description":39,"url":39,"descriptionHTML":40,"SNSHTML":41},"c2f976ab-4882-4e4e-a80e-91d829bd59ca","チャベス","\u002Fblog\u002Ficon\u002Fchabesu.png","","Webライター・ディレクター。Notion公式のおすすめのテンプレートクリエイター。個人でNotionをちょっと便利にするChrome拡張機能を開発中。代表作は「NotionSidebarHider」「Notion文字数カウント」。本業はメーカーで研究開発をしているエンジニア。","\u003Ca href=\"https:\u002F\u002Ftwitter.com\u002FChabesuB\" class=\"article-link\" target=\"_blank\">Twitter\u003C\u002Fa> \u002F \u003Ca href=\"https:\u002F\u002Fwww.notion.so\u002Fja-jp\u002F@chabesu\" class=\"article-link\" target=\"_blank\">Notion\u003C\u002Fa>",true,"\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">今回の記事では「astro-notion-blog」について紹介します。\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fotoyo\u002Fastro-notion-blog\" class=\"text-black6 article-link\" target=\"_blank\" rel=\"noopener noreferrer\">astro-notion-blog\u003C\u002Fa> はCMSがNotion 、フロントエンドがAstroというアーキテクチャ（構成）でブログを無料で開設することができるというものです。非エンジニアの方からすると、「CMSって何？」、「Astroって何？」、「難しそう・・・」と思うかもしれません。CMS（コンテンツ管理システム）は簡単に言うと、ブログの記事や画像を管理するシステムのことです。 astro-notin-blogでは、その役割をNotionで行います。つまりNotionで記事を書くと、いい感じの見た目でブログとして公開（ Astroの役割）してくれるというツールです。\u003Ca href=\"https:\u002F\u002Fastro-notion-blog.pages.dev\u002Fblog\u002F\" class=\"text-black6 article-link\" target=\"_blank\" rel=\"noopener noreferrer\">こちらのページ\u003C\u002Fa>のようなブログを作ることができます。\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">NotionをCMSとして使ったブログ（ Notion Blog ）は他にもいくつかありますが、astro-notin-blogは以下のような特徴が挙げられます。\u003C\u002Fp>\u003Cul class=\"list-square pl-6\">\u003Cli class=\"text-[15px] md:text-[16px] leading-[1.9] [li+&]:mt-1\">Notionの主要なブロックにほとんど対応（コールアウトブロックなど）\u003C\u002Fli>\u003Cli class=\"text-[15px] md:text-[16px] leading-[1.9] [li+&]:mt-1\">開発者が日本人なのでサポートが日本語で受けられる（他のNotion Blogはほとんど海外製）\u003C\u002Fli>\u003Cli class=\"text-[15px] md:text-[16px] leading-[1.9] [li+&]:mt-1\">非エンジニアの使用も想定されている\u003C\u002Fli>\u003Cli class=\"text-[15px] md:text-[16px] leading-[1.9] [li+&]:mt-1\">コミュニティが活発、Twitterで開発者やユーザーと交流できる（困ったことがあればすぐに助けてくれる）\u003Cbr>実は以前にこのマガジンで、「easy-notion-blog」を紹介したことがあります。  easy-notion-blogはastro-notion-blogと同じ開発者の方が提供しているアプリケーションで、astro-notion-blogと同じようにNotionでとても簡単にブログサイトを作ることができます。 easy-notion-blogとastro-notion-blogはそれぞれ長所・短所がありますが、astro-notion-blogの一番の特徴は「とにかく表示が早い」ということです。ページ遷移した瞬間にぱっとページが表示されます。\u003C\u002Fli>\u003C\u002Ful>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">この記事では、上記のようなastro-notion-blogの特徴や長所、 easy-notion-blogとの違いについて解説します。私はソフトウェアエンジニアではありませんが、とても簡単にastro-notion-blogを使ってブログを開設できました。astro-notion-blogの導入方法については、公式のREADME （マニュアル）にかなり詳しく書かれているので詳細は割愛しますが、ポイントについて簡単に解説しようと思います。\u003C\u002Fp>\n      \u003Cdiv class=\"notion-callout bg-grayLight5 border-grayLight20 text-black p-4 border\">\n        \u003Cdiv class=\"flex items-start\">\n          \u003Cdiv class=\"flex-shrink-0 mr-3\">\n            \u003Ca href=\"\u002Fblog\u002Fauthors\u002Fチャベス\" class=\"flex flex-col items-center\">\n              \u003Cimg src=\"\u002Fblog\u002Ficon\u002Fchabesu.png\" alt=\"チャベスのアイコン\" class=\"w-12 h-12 rounded-full border border-grayLight20 bg-white mb-1\">\n              \u003Cspan class=\"text-xs text-black6\">チャベス\u003C\u002Fspan>\n            \u003C\u002Fa>\n          \u003C\u002Fdiv>\n          \u003Cdiv class=\"flex-1\">\n            \u003Cdiv class=\"text-[.9em] leading-[1.6] font-normal tracking-[1px] flex flex-col gap-1\">\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">今回紹介するastro-notion-blogではNotion APIという仕組みを使っています。Notion APIは誰でも無料で使用可能で、使い方を知ればより自由に、自分だけのアプリケーションを作ることが可能です。Notion APIについて詳しく知りたいという方は、以下のリンクを参考にしてみてください。\u003C\u002Fp>\u003Cul class=\"list-square pl-6\">\u003Cli class=\"text-[15px] md:text-[16px] leading-[1.9] [li+&]:mt-1\">\u003Ca href=\"https:\u002F\u002Fnotion-lab.jp\u002F2023-09-21-notion-api\u002F\" class=\"text-black6 article-link\" target=\"_blank\" rel=\"noopener noreferrer\">astro-notion-blogで使われているNotion APIについて知る\u003C\u002Fa>\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fdiv>\n          \u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \n\n\n\n\n        \u003Cdetails class=\"table-of-contents mb-6 hidden\" open=\"\">\n          \u003Csummary class=\"text-[.9em] leading-[1.6] font-semibold tracking-[1px] mb-2\">\n            目次\n          \u003C\u002Fsummary>\n          \u003Cul class=\"toc-list flex flex-col gap-1 ml-5\">\n      \n            \u003Cli class=\"mt-0.5\">\n              \u003Ca href=\"#astro-notino-blogの記事の書き方\" class=\"toc-link text-sm text-black6 font-bold\">\n                astro-notino-blogの記事の書き方\n              \u003C\u002Fa>\n            \u003C\u002Fli>\n        \n            \u003Cli class=\"mt-0.5\">\n              \u003Ca href=\"#astro-notion-blogの良いところ\" class=\"toc-link text-sm text-black6 font-bold\">\n                astro-notion-blogの良いところ\n              \u003C\u002Fa>\n            \u003C\u002Fli>\n        \n            \u003Cli class=\"ml-4\">\n              \u003Ca href=\"#notionでブログが書ける\" class=\"toc-link text-sm text-black6 \">\n                Notionでブログが書ける\n              \u003C\u002Fa>\n            \u003C\u002Fli>\n        \n            \u003Cli class=\"ml-4\">\n              \u003Ca href=\"#無料でブログを開設できる\" class=\"toc-link text-sm text-black6 \">\n                無料でブログを開設できる\n              \u003C\u002Fa>\n            \u003C\u002Fli>\n        \n            \u003Cli class=\"ml-4\">\n              \u003Ca href=\"#見た目を自由にカスタマイズできる\" class=\"toc-link text-sm text-black6 \">\n                見た目を自由にカスタマイズできる\n              \u003C\u002Fa>\n            \u003C\u002Fli>\n        \n            \u003Cli class=\"ml-4\">\n              \u003Ca href=\"#日本語対応\" class=\"toc-link text-sm text-black6 \">\n                日本語対応\n              \u003C\u002Fa>\n            \u003C\u002Fli>\n        \n            \u003Cli class=\"ml-4\">\n              \u003Ca href=\"#非エンジニアにも優しい\" class=\"toc-link text-sm text-black6 \">\n                非エンジニアにも優しい\n              \u003C\u002Fa>\n            \u003C\u002Fli>\n        \n            \u003Cli class=\"ml-4\">\n              \u003Ca href=\"#多機能・開発が活発\" class=\"toc-link text-sm text-black6 \">\n                多機能・開発が活発\n              \u003C\u002Fa>\n            \u003C\u002Fli>\n        \n            \u003Cli class=\"mt-0.5\">\n              \u003Ca href=\"#astro-notion-blogの長所とeasy-notion-blogとの違い\" class=\"toc-link text-sm text-black6 font-bold\">\n                astro-notion-blogの長所とeasy-notion-blogとの違い\n              \u003C\u002Fa>\n            \u003C\u002Fli>\n        \n            \u003Cli class=\"ml-4\">\n              \u003Ca href=\"#ページ表示がとても早い\" class=\"toc-link text-sm text-black6 \">\n                ページ表示がとても早い\n              \u003C\u002Fa>\n            \u003C\u002Fli>\n        \n            \u003Cli class=\"ml-4\">\n              \u003Ca href=\"#カスタマイズが比較的簡単\" class=\"toc-link text-sm text-black6 \">\n                カスタマイズが比較的簡単\n              \u003C\u002Fa>\n            \u003C\u002Fli>\n        \n            \u003Cli class=\"ml-4\">\n              \u003Ca href=\"#複雑な機能は実装できない\" class=\"toc-link text-sm text-black6 \">\n                複雑な機能は実装できない\n              \u003C\u002Fa>\n            \u003C\u002Fli>\n        \n            \u003Cli class=\"mt-0.5\">\n              \u003Ca href=\"#astro-notion-blogの導入方法\" class=\"toc-link text-sm text-black6 font-bold\">\n                astro-notion-blogの導入方法\n              \u003C\u002Fa>\n            \u003C\u002Fli>\n        \n            \u003Cli class=\"mt-0.5\">\n              \u003Ca href=\"#おわりに\" class=\"toc-link text-sm text-black6 font-bold\">\n                おわりに\n              \u003C\u002Fa>\n            \u003C\u002Fli>\n        \n          \u003C\u002Ful>\n        \u003C\u002Fdetails>\n      \u003Ca href=\"#astro-notino-blogの記事の書き方\" id=\"astro-notino-blogの記事の書き方\" style=\"pointer-events: none; cursor: text;\">\u003Ch2 class=\"blog-heading mt-8 mb-3 font-feature-palt\">astro-notino-blogの記事の書き方\u003C\u002Fh2>\u003C\u002Fa>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">astro-notion-blogを導入すると、Notionで公開・編集した内容がブログに反映されます。実際に私がastro-notion-blogを使って開設したブログを例に見てみると、以下のようにNotionで書いた内容がそのままブログに掲載されています。\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">\u003C\u002Fp>\u003Cfigure>\n    \u003Cimg src=\"\u002Fblog\u002Fimages\u002Fpost\u002F2023-09-21-astro-notion-blog-1.png\" alt=\"[ブログのページ](https:\u002F\u002Fnotion-fan.com\u002Fposts\u002Fnotion-ai-chatgpt\u002F)\" class=\"border border-grayLight20 md:max-w-[80%] m-auto\" loading=\"lazy\">\n    \u003Cfigcaption class=\"text-center leading-5\" style=\"font-size: .85rem; color: #999;\">\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">\u003Ca href=\"https:\u002F\u002Fnotion-fan.com\u002Fposts\u002Fnotion-ai-chatgpt\u002F\" class=\"text-black6 article-link\" target=\"_blank\" rel=\"noopener noreferrer\">ブログのページ\u003C\u002Fa>\u003C\u002Fp>\u003C\u002Ffigcaption>\n  \u003C\u002Ffigure>\u003Cp>\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">\u003C\u002Fp>\u003Cfigure>\n    \u003Cimg src=\"\u002Fblog\u002Fimages\u002Fpost\u002F2023-09-21-astro-notion-blog-2.png\" alt=\"Notionで書いた記事の内容\" class=\"border border-grayLight20 md:max-w-[80%] m-auto\" loading=\"lazy\">\n    \u003Cfigcaption class=\"text-center leading-5\" style=\"font-size: .85rem; color: #999;\">\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">Notionで書いた記事の内容\u003C\u002Fp>\u003C\u002Ffigcaption>\n  \u003C\u002Ffigure>\u003Cp>\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">このように、Notionで記事を作成・編集するだけでブログに反映されるというところがastro-notion-blogの良いところです。Notionのコールアウトブロック、トグル、カードリンクなど、基本的な機能はほとんどサポートされている（ブログに反映される）所も素晴らしい点です。\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">ブログの見た目を変更するためには多少のプログラミングの知識が必要ですが、基本的なレイアウトや機能はastro-notion-blogの初期設定で準備されているので、非エンジニアの方でも心配なく使用することができます。\u003C\u002Fp>\n    \u003Cdiv class=\"template-text-section mb-6\" data-cta-id=\"task-trial\" data-cta-position=\"after-h2-2\" data-cta-variant=\"default\" data-audience=\"toC\" data-post-slug=\"astro-notion-blog\">\n      \n      \u003Csection class=\"flex flex-col gap-y-5 mb-4 bg-white border border-black px-6 pt-6 pb-7 md:px-8\">\n        \u003Cdiv>\n          \u003Ch2 class=\"blog-heading font-feature-palt\">\n            Notionタスク管理ロードマップ体験版を無料プレゼント\n          \u003C\u002Fh2>\n        \u003C\u002Fdiv>\n        \u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">\n          Notionでのタスク管理を基礎から体系的に学べる「タスク管理ロードマップ」の体験版を無料で配布しています。公式LINEの友だち追加だけで、すぐに受け取れます。\n        \u003C\u002Fp>\n        \u003Cimg src=\"https:\u002F\u002Flp.notion-university.jp\u002Fimages\u002Ftrial-task.jpg\" alt=\"Notionタスク管理ロードマップ体験版のプレビュー\" class=\"w-full border border-grayLight20\" loading=\"lazy\">\n        \u003Cdiv class=\"flex flex-col items-center gap-3 pt-1\">\n          \u003Ca href=\"https:\u002F\u002Flp.notion-university.jp\u002Ftrial-0621\u002F?utm_source=blog&utm_medium=referral&utm_campaign=trial0621&utm_content=article_cta&utm_term=astro-notion-blog\" class=\"blog-button blog-button--line\" target=\"_blank\" rel=\"noopener\">\n            \u003Cspan>体験版を無料で受け取る\u003C\u002Fspan>\n          \u003C\u002Fa>\n          \u003Cp class=\"text-xs text-black6\">簡単3分！公式LINEの友だち追加だけですぐに受け取れます\u003C\u002Fp>\n        \u003C\u002Fdiv>\n      \u003C\u002Fsection>\n    \n    \u003C\u002Fdiv>\n  \u003Ca href=\"#astro-notion-blogの良いところ\" id=\"astro-notion-blogの良いところ\" style=\"pointer-events: none; cursor: text;\">\u003Ch2 class=\"blog-heading mt-8 mb-3 font-feature-palt\">astro-notion-blogの良いところ\u003C\u002Fh2>\u003C\u002Fa>\u003Ca href=\"#notionでブログが書ける\" id=\"notionでブログが書ける\" style=\"pointer-events: none; cursor: text;\">\u003Ch3 class=\"mt-4 relative pl-4 font-bold text-[17px] md:text-[18px] leading-[1.6] tracking-[0.05em] font-feature-palt before:content-[''] before:absolute before:left-0 before:top-[0.2em] before:bottom-[0.2em] before:w-[3px] before:bg-black -mb-1\">Notionでブログが書ける\u003C\u002Fh3>\u003C\u002Fa>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">上記でも書いたように、Notionでブログが書ける所が最も良いところだと思います。Notionを普段から使っている人であれば、普段のメモと同じようにNotionに文章を書くと、自動で記事として公開されます。\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">以下は私のastro-notion-blog用のデータベースです。データベースのひとつひとつのページが、ブログに公開される記事となっています。\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">\u003C\u002Fp>\u003Cfigure>\n    \u003Cimg src=\"\u002Fblog\u002Fimages\u002Fpost\u002F2023-09-21-astro-notion-blog-3.png\" alt=\"astro-notion-blog用のデータベース\" class=\"border border-grayLight20 md:max-w-[80%] m-auto\" loading=\"lazy\">\n    \u003Cfigcaption class=\"text-center leading-5\" style=\"font-size: .85rem; color: #999;\">\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">astro-notion-blog用のデータベース\u003C\u002Fp>\u003C\u002Ffigcaption>\n  \u003C\u002Ffigure>\u003Cp>\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">\u003C\u002Fp>\u003Cfigure>\n    \u003Cimg src=\"\u002Fblog\u002Fimages\u002Fpost\u002F2023-09-21-astro-notion-blog-4.png\" alt=\"[ブログのトップページ](https:\u002F\u002Fnotion-fan.com\u002F)\" class=\"border border-grayLight20 md:max-w-[80%] m-auto\" loading=\"lazy\">\n    \u003Cfigcaption class=\"text-center leading-5\" style=\"font-size: .85rem; color: #999;\">\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">\u003Ca href=\"https:\u002F\u002Fnotion-fan.com\u002F\" class=\"text-black6 article-link\" target=\"_blank\" rel=\"noopener noreferrer\">ブログのトップページ\u003C\u002Fa>\u003C\u002Fp>\u003C\u002Ffigcaption>\n  \u003C\u002Ffigure>\u003Cp>\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">データベースのプロパティは以下の通りです。\u003C\u002Fp>\u003Cul class=\"list-square pl-6\">\u003Cli class=\"text-[15px] md:text-[16px] leading-[1.9] [li+&]:mt-1\">Page：記事のタイトル\u003C\u002Fli>\u003Cli class=\"text-[15px] md:text-[16px] leading-[1.9] [li+&]:mt-1\">Tags：タグ\u003C\u002Fli>\u003Cli class=\"text-[15px] md:text-[16px] leading-[1.9] [li+&]:mt-1\">Date：記事の公開日\u003C\u002Fli>\u003Cli class=\"text-[15px] md:text-[16px] leading-[1.9] [li+&]:mt-1\">Excerpt：記事の概要\u003C\u002Fli>\u003Cli class=\"text-[15px] md:text-[16px] leading-[1.9] [li+&]:mt-1\">FeaturedImage：記事一覧ページでサムネイルとして表示される画像\u003C\u002Fli>\u003Cli class=\"text-[15px] md:text-[16px] leading-[1.9] [li+&]:mt-1\">Rank：記事を好きな順にランク付け（数字は何でも可）。ランク順（数字の大きい順）に記事が並べられる機能がある\u003C\u002Fli>\u003Cli class=\"text-[15px] md:text-[16px] leading-[1.9] [li+&]:mt-1\">Slug：記事のURL\u003C\u002Fli>\u003Cli class=\"text-[15px] md:text-[16px] leading-[1.9] [li+&]:mt-1\">Published：チェックを入れれば記事を公開。チェックを入れなければ非公開。\u003C\u002Fli>\u003Cli class=\"text-[15px] md:text-[16px] leading-[1.9] [li+&]:mt-1\">Author：記事を書いた人（独自に追加）\u003C\u002Fli>\u003C\u002Ful>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">記事の中身は、上記でも紹介したようにNotion内のページに書いていきます。このように、記事に関する設定がNotion上で完結できるのが素晴らしい点です。\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">また、上記のデータベースをインラインデータベースとして扱えば、記事に関するメモなども記事と同じページ内で管理することもできるのでとても便利です。以下は私のastro-notion-blogを管理しているNotionページの一部で、記事本体のデータベース以外にもリンクやメモを同じページ内で管理しています。\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">\u003C\u002Fp>\u003Cfigure>\n    \u003Cimg src=\"\u002Fblog\u002Fimages\u002Fpost\u002F2023-09-21-astro-notion-blog-5.png\" alt=\"image\" class=\"border border-grayLight20 md:max-w-[80%] m-auto\" loading=\"lazy\">\n    \u003Cfigcaption class=\"text-center leading-5\" style=\"font-size: .85rem; color: #999;\">\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">image\u003C\u002Fp>\u003C\u002Ffigcaption>\n  \u003C\u002Ffigure>\u003Cp>\u003C\u002Fp>\u003Ca href=\"#無料でブログを開設できる\" id=\"無料でブログを開設できる\" style=\"pointer-events: none; cursor: text;\">\u003Ch3 class=\"mt-4 relative pl-4 font-bold text-[17px] md:text-[18px] leading-[1.6] tracking-[0.05em] font-feature-palt before:content-[''] before:absolute before:left-0 before:top-[0.2em] before:bottom-[0.2em] before:w-[3px] before:bg-black -mb-1\">無料でブログを開設できる\u003C\u002Fh3>\u003C\u002Fa>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">astro-notion-blogは、GitHub・Cloudflare Pages・Notionというツールを使用しますが、全て無料で使うことができます。ただし、URLについては自分で決めることができないので、独自ドメインを使用したい場合は月100円程度の費用は掛かります。\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">自分の場合は、まだ独自ドメインを取得していませんが、いずれ取得予定です。例えば、Google Domainsで独自ドメインを取得する場合、年間1400円程度の費用が掛かります。もちろん、Google Domainsではなく お名前.comなどでもドメインは取得可能です。\u003C\u002Fp>\u003Cul class=\"list-square pl-6\">\u003Cli class=\"text-[15px] md:text-[16px] leading-[1.9] [li+&]:mt-1\">無料のドメインの例：\u003Ca href=\"https:\u002F\u002Fnotion-fan.pages.dev\u002F\" class=\"text-black6 article-link\" target=\"_blank\" rel=\"noopener noreferrer\">https:\u002F\u002Fastro-notion-blog-5y5.pages.dev\u002F\u003C\u002Fa>\u003C\u002Fli>\u003Cli class=\"text-[15px] md:text-[16px] leading-[1.9] [li+&]:mt-1\">有料のドメインの例：\u003Ca href=\"https:\u002F\u002Fnotion-fan.com\u002F\" class=\"text-black6 article-link\" target=\"_blank\" rel=\"noopener noreferrer\">https:\u002F\u002Fnotion-fan.com\u002F\u003C\u002Fa>\u003C\u002Fli>\u003C\u002Ful>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">ブログの開設は、詰まらなければ 15分程度で開設することができます。カスタマイズするとなればもう少し時間はかかりますが、astro-notion-blogには親切な公式マニュアルや開設記事もあるので、興味のある方は試してみてください（もし詰まった場合はTwitterなどでご連絡いただければサポート可能です）。\u003C\u002Fp>\u003Ca href=\"#見た目を自由にカスタマイズできる\" id=\"見た目を自由にカスタマイズできる\" style=\"pointer-events: none; cursor: text;\">\u003Ch3 class=\"mt-4 relative pl-4 font-bold text-[17px] md:text-[18px] leading-[1.6] tracking-[0.05em] font-feature-palt before:content-[''] before:absolute before:left-0 before:top-[0.2em] before:bottom-[0.2em] before:w-[3px] before:bg-black -mb-1\">見た目を自由にカスタマイズできる\u003C\u002Fh3>\u003C\u002Fa>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">WordPressなどのブログサービスや、SuperなどのNotionを使ってサイトを公開するサービスでは、簡単にサイトを作れますがカスタマイズの幅は小さく、他のサイトと似たものになってしまうことがあります。astro-notion-blogの場合はCSSを多少触れば、見た目は無限にカスタマイズできます。例えば、以下のブログもastro-notion-blogをカスタマイズして作られているもので、全く違う個性豊かなブログデザインになっています。\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">\u003C\u002Fp>\u003Cfigure>\n    \u003Cimg src=\"\u002Fblog\u002Fimages\u002Fpost\u002F2023-09-21-astro-notion-blog-6.gif\" alt=\"動きがあり、かわいいデザインのブログ\" class=\"border border-grayLight20 md:max-w-full m-auto\" loading=\"lazy\">\n    \u003Cfigcaption class=\"text-center leading-5\" style=\"font-size: .85rem; color: #999;\">\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">動きがあり、かわいいデザインのブログ\u003C\u002Fp>\u003C\u002Ffigcaption>\n  \u003C\u002Ffigure>\u003Cp>\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">\u003C\u002Fp>\u003Cfigure>\n    \u003Cimg src=\"\u002Fblog\u002Fimages\u002Fpost\u002F2023-09-21-astro-notion-blog-7.png\" alt=\"NotionのDB風にカスタマイズされたブログ\" class=\"border border-grayLight20 md:max-w-[80%] m-auto\" loading=\"lazy\">\n    \u003Cfigcaption class=\"text-center leading-5\" style=\"font-size: .85rem; color: #999;\">\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">NotionのDB風にカスタマイズされたブログ\u003C\u002Fp>\u003C\u002Ffigcaption>\n  \u003C\u002Ffigure>\u003Cp>\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">私の場合はプログラミングを勉強中なので、自分のブログを改造するのがとても良い勉強になっています。多少のHTMLやCSSの知識があれば改造は自由自在にできるので、プログラミングを勉強したいという方にはよりおすすめかもしれません。\u003C\u002Fp>\u003Ca href=\"#日本語対応\" id=\"日本語対応\" style=\"pointer-events: none; cursor: text;\">\u003Ch3 class=\"mt-4 relative pl-4 font-bold text-[17px] md:text-[18px] leading-[1.6] tracking-[0.05em] font-feature-palt before:content-[''] before:absolute before:left-0 before:top-[0.2em] before:bottom-[0.2em] before:w-[3px] before:bg-black -mb-1\">日本語対応\u003C\u002Fh3>\u003C\u002Fa>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">astro-notion-blogの開発者は日本人の \u003Ca href=\"https:\u002F\u002Ftwitter.com\u002Fotoyo0122\" class=\"text-black6 article-link\" target=\"_blank\" rel=\"noopener noreferrer\">おとよ（@otoyo0122）\u003C\u002Fa>さん\u003Ca href=\"https:\u002F\u002Ftwitter.com\u002Fotoyo0122\" class=\"text-black6 article-link\" target=\"_blank\" rel=\"noopener noreferrer\"> \u003C\u002Fa>です。astro-notino-blog以外にも、Notionを使ったブログはいくつかありますが（例えば\u003Ca href=\"https:\u002F\u002Fblog.35d.jp\u002F\" class=\"text-black6 article-link\" target=\"_blank\" rel=\"noopener noreferrer\">円谷さんのブログ\u003C\u002Fa>）、開発者が海外の方の場合が多いので、説明が全て英語です。その点、astro-notion-blogの場合は、\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fotoyo\u002Feasy-notion-blog\u002Fblob\u002Fmain\u002FREADME.ja.md\" class=\"text-black6 article-link\" target=\"_blank\" rel=\"noopener noreferrer\">README\u003C\u002Fa>（マニュアル）が日本語対応されているので、とてもわかりやすいです。\u003C\u002Fp>\u003Ca href=\"#非エンジニアにも優しい\" id=\"非エンジニアにも優しい\" style=\"pointer-events: none; cursor: text;\">\u003Ch3 class=\"mt-4 relative pl-4 font-bold text-[17px] md:text-[18px] leading-[1.6] tracking-[0.05em] font-feature-palt before:content-[''] before:absolute before:left-0 before:top-[0.2em] before:bottom-[0.2em] before:w-[3px] before:bg-black -mb-1\">非エンジニアにも優しい\u003C\u002Fh3>\u003C\u002Fa>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">日本語対応だけではなく、非エンジニアの方が使うことも想定されています。導入方法は下記のように、画像付きでかなり詳しく説明されています。\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">\u003C\u002Fp>\u003Cfigure>\n    \u003Cimg src=\"\u002Fblog\u002Fimages\u002Fpost\u002F2023-09-21-astro-notion-blog-8.png\" alt=\"image\" class=\"border border-grayLight20 md:max-w-[80%] m-auto\" loading=\"lazy\">\n    \u003Cfigcaption class=\"text-center leading-5\" style=\"font-size: .85rem; color: #999;\">\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">image\u003C\u002Fp>\u003C\u002Ffigcaption>\n  \u003C\u002Ffigure>\u003Cp>\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">非エンジニアであるNotionアンバサダーの田村さんも簡単に導入できたようです。\u003C\u002Fp>\u003Cblockquote class=\"twitter-tweet\">\n\u003Ca href=\"https:\u002F\u002Ftwitter.com\u002FRieTamura36\u002Fstatus\u002F1618443656192724993\">\u003C\u002Fa>\n\u003C\u002Fblockquote>\n\u003Cscript async=\"\" src=\"https:\u002F\u002Fplatform.twitter.com\u002Fwidgets.js\" charset=\"utf-8\">\u003C\u002Fscript>\n\n\n\n\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">また、もし困りごとがあれば 開発者の方やユーザーの方からTwitterで サポートも受けられます。私も少しだけ、自分のカスタマイズの内容を紹介させていただきました。\u003C\u002Fp>\u003Cblockquote class=\"twitter-tweet\">\n\u003Ca href=\"https:\u002F\u002Ftwitter.com\u002Fkishipoyoweb\u002Fstatus\u002F1620323524140494849\">\u003C\u002Fa>\n\u003C\u002Fblockquote>\n\u003Cscript async=\"\" src=\"https:\u002F\u002Fplatform.twitter.com\u002Fwidgets.js\" charset=\"utf-8\">\u003C\u002Fscript>\n\n\u003Ca href=\"#多機能・開発が活発\" id=\"多機能・開発が活発\" style=\"pointer-events: none; cursor: text;\">\u003Ch3 class=\"mt-4 relative pl-4 font-bold text-[17px] md:text-[18px] leading-[1.6] tracking-[0.05em] font-feature-palt before:content-[''] before:absolute before:left-0 before:top-[0.2em] before:bottom-[0.2em] before:w-[3px] before:bg-black -mb-1\">多機能・開発が活発\u003C\u002Fh3>\u003C\u002Fa>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">astro-notion-blogは開発が活発で、頻繁にアップデートされて機能が追加されています。また、easy-notion-blogと同じ開発者なので、easy-notion-blogの機能やノウハウがastro-notion-blogにも反映されており、使い勝手は抜群です。\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">以下は、astro-notion-blogのお知らせのページですが、かなりの頻度でアップデートが行われています。\u003C\u002Fp>\u003Cul class=\"list-square pl-6\">\u003Cli class=\"text-[15px] md:text-[16px] leading-[1.9] [li+&]:mt-1\">\u003Ca href=\"https:\u002F\u002Fotoyo.notion.site\u002Fastro-notion-blog-ca829ea427454840875d2327a4d558d1\" class=\"text-black6 article-link\" target=\"_blank\" rel=\"noopener noreferrer\">https:\u002F\u002Fotoyo.notion.site\u002Fastro-notion-blog-ca829ea427454840875d2327a4d558d1\u003C\u002Fa>\u003C\u002Fli>\u003C\u002Ful>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">\u003C\u002Fp>\u003Cfigure>\n    \u003Cimg src=\"\u002Fblog\u002Fimages\u002Fpost\u002F2023-09-21-astro-notion-blog-9.png\" alt=\"astro-notion-blogのお知らせのページ\" class=\"border border-grayLight20 md:max-w-[80%] m-auto\" loading=\"lazy\">\n    \u003Cfigcaption class=\"text-center leading-5\" style=\"font-size: .85rem; color: #999;\">\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">astro-notion-blogのお知らせのページ\u003C\u002Fp>\u003C\u002Ffigcaption>\n  \u003C\u002Ffigure>\u003Cp>\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">Notionは頻繁にアップデートが行われるので、Notionの仕様変更があればNotionを使ったブログも対応が必要とされる場面があると思いますが、astro-notion-blogはNotionのアップデートにも迅速に対応することを期待できます。\u003C\u002Fp>\u003Ca href=\"#astro-notion-blogの長所とeasy-notion-blogとの違い\" id=\"astro-notion-blogの長所とeasy-notion-blogとの違い\" style=\"pointer-events: none; cursor: text;\">\u003Ch2 class=\"blog-heading mt-8 mb-3 font-feature-palt\">astro-notion-blogの長所とeasy-notion-blogとの違い\u003C\u002Fh2>\u003C\u002Fa>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">astro-notion-blogとeasy-notion-blogはとても似たサービスですが、それぞれ長所があり、細かな違いがあります。\u003C\u002Fp>\u003Ca href=\"#ページ表示がとても早い\" id=\"ページ表示がとても早い\" style=\"pointer-events: none; cursor: text;\">\u003Ch3 class=\"mt-4 relative pl-4 font-bold text-[17px] md:text-[18px] leading-[1.6] tracking-[0.05em] font-feature-palt before:content-[''] before:absolute before:left-0 before:top-[0.2em] before:bottom-[0.2em] before:w-[3px] before:bg-black -mb-1\">ページ表示がとても早い\u003C\u002Fh3>\u003C\u002Fa>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">astro-notion-blogはページ表示がとても早いことが特徴です。easy-notion-blogも十分表示は早いのですが、astro-notion-blogはAstroという比較的新しいフレームワーク（ソフトウェアの骨組み）を使っており、ブログなどのコンテンツを配信することがメインのサイトに特化しているため、ページ表示が本当に早くなっています。\u003C\u002Fp>\u003Cblockquote class=\"twitter-tweet\">\n\u003Ca href=\"https:\u002F\u002Ftwitter.com\u002Fotoyo0122\u002Fstatus\u002F1618452994932244480\">\u003C\u002Fa>\n\u003C\u002Fblockquote>\n\u003Cscript async=\"\" src=\"https:\u002F\u002Fplatform.twitter.com\u002Fwidgets.js\" charset=\"utf-8\">\u003C\u002Fscript>\n\n\u003Ca href=\"#カスタマイズが比較的簡単\" id=\"カスタマイズが比較的簡単\" style=\"pointer-events: none; cursor: text;\">\u003Ch3 class=\"mt-4 relative pl-4 font-bold text-[17px] md:text-[18px] leading-[1.6] tracking-[0.05em] font-feature-palt before:content-[''] before:absolute before:left-0 before:top-[0.2em] before:bottom-[0.2em] before:w-[3px] before:bg-black -mb-1\">カスタマイズが比較的簡単\u003C\u002Fh3>\u003C\u002Fa>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">easy-notion-blogが採用しているNext.jsというフレームワークは機能が豊富で、かなりリッチな機能や表現のWebサイトやWebアプリケーションを作成することができます。ただし、ブログの場合は基本的にコンテンツを配信することがメインなので、ブログにNext.jsを使うことは若干オーバースペック気味です。\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">対して、astro-notion-blogが採用しているAstroというフレームワークは、コンテンツ配信をメインとするサイトに最適化されているため、中身の構成がシンプルになっています。カスタマイズをする場合はプログラミングの知識が多少必要で、特にeasy-notion-blogの場合はReactやNode.jsというライブラリや環境を使っており、プログラミング初心者からすると少しハードルが高く難しいです。しかし、astro-notion-blogの場合は、プログラミング初心者の多くの方が学習するであろうHTML・CSS・JavaScriptといった言語のみで改造することができます。\u003C\u002Fp>\u003Ca href=\"#複雑な機能は実装できない\" id=\"複雑な機能は実装できない\" style=\"pointer-events: none; cursor: text;\">\u003Ch3 class=\"mt-4 relative pl-4 font-bold text-[17px] md:text-[18px] leading-[1.6] tracking-[0.05em] font-feature-palt before:content-[''] before:absolute before:left-0 before:top-[0.2em] before:bottom-[0.2em] before:w-[3px] before:bg-black -mb-1\">複雑な機能は実装できない\u003C\u002Fh3>\u003C\u002Fa>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">上記でも述べたように、astro-notion-blogは機能を絞って、ページ表示の速さに特化しているため、複雑な機能は実装できません。例えば、私のeasy-notion-blogで作ったブログには「いいねボタン」を実装していますが、astro-notion-blogにはいいねボタンを実装することはできません（厳密に言うと実装可能ですが、難易度が高く、astro-notion-blogのメリットを消してしまう場合もあります）。\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">\u003C\u002Fp>\u003Cfigure>\n    \u003Cimg src=\"\u002Fblog\u002Fimages\u002Fpost\u002F2023-09-21-astro-notion-blog-10.png\" alt=\"image\" class=\"border border-grayLight20 md:max-w-[80%] m-auto\" loading=\"lazy\">\n    \u003Cfigcaption class=\"text-center leading-5\" style=\"font-size: .85rem; color: #999;\">\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">image\u003C\u002Fp>\u003C\u002Ffigcaption>\n  \u003C\u002Ffigure>\u003Cp>\u003C\u002Fp>\u003Ca href=\"#astro-notion-blogの導入方法\" id=\"astro-notion-blogの導入方法\" style=\"pointer-events: none; cursor: text;\">\u003Ch2 class=\"blog-heading mt-8 mb-3 font-feature-palt\">astro-notion-blogの導入方法\u003C\u002Fh2>\u003C\u002Fa>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">上記でも述べましたが、astro-notion-blogの導入方法は 公式の \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fotoyo\u002Fastro-notion-blog\u002Fblob\u002Fmain\u002FREADME.ja.md\" class=\"text-black6 article-link\" target=\"_blank\" rel=\"noopener noreferrer\">クイックスタート\u003C\u002Fa> に丁寧に記載されています。作業としてはプログラミングの知識は全く必要なく、クイックスタートの手順にそって作業を進めていくだけです。\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">ただし、カスタマイズをする場合はプログラミングの知識や、プログラミングをするための環境構築が必要になってきます。こちらもクイックスタートに手順が書かれていますが、もし詰まってしまった場合は \u003Ca href=\"https:\u002F\u002Ftwitter.com\u002Fsearch?q=%23astro-notion-blog&src=typed_query\" class=\"text-black6 article-link\" target=\"_blank\" rel=\"noopener noreferrer\">#astro-notion-blog\u003C\u002Fa> というハッシュタグを付けてツイートすれば、かなりのレスポンスの速さで 開発者の方や ユーザーの方がサポートしてくれます。（私に連絡していただいてもサポートできると思うので、お気軽にご連絡ください。）\u003C\u002Fp>\u003Ca href=\"#おわりに\" id=\"おわりに\" style=\"pointer-events: none; cursor: text;\">\u003Ch2 class=\"blog-heading mt-8 mb-3 font-feature-palt\">おわりに\u003C\u002Fh2>\u003C\u002Fa>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">astro-noiton-blogは現状、Notionでブログをするには最適なアプリケーションだと思います。もし、「Notionで自分だけのブログを作ってみたい」という方はぜひ、チャレンジしてみてください。普段と同じようにNotionに文章を書いていくと、それがブログとして公開されるのはとても素晴らしい体験だと思います。\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">もし、astro-notin-blogに関しての困りごとがあれば、私（\u003Ca href=\"https:\u002F\u002Ftwitter.com\u002FChabesuB\" class=\"text-black6 article-link\" target=\"_blank\" rel=\"noopener noreferrer\">@ChabesuB\u003C\u002Fa>）か、開発者のおとよさんに連絡していただければ対応できると思うので、遠慮なくご連絡ください。\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">参考：\u003Ca href=\"https:\u002F\u002Fjapan-design.jp\u002Fwriting\u002F2058\u002F\" class=\"text-black6 article-link\" target=\"_blank\" rel=\"noopener noreferrer\">WEBライターの仕事はAIに奪われる？｜奪われない人の特徴とAIを活用するコツを紹介｜日本デザイン\u003C\u002Fa>\u003C\u002Fp>",[45,48,50,54,56,58,60,62,64,66,68,70,72,74],{"id":46,"text":46,"type":47},"astro-notino-blogの記事の書き方","heading_2",{"id":49,"text":49,"type":47},"astro-notion-blogの良いところ",{"id":51,"text":52,"type":53},"notionでブログが書ける","Notionでブログが書ける","heading_3",{"id":55,"text":55,"type":53},"無料でブログを開設できる",{"id":57,"text":57,"type":53},"見た目を自由にカスタマイズできる",{"id":59,"text":59,"type":53},"日本語対応",{"id":61,"text":61,"type":53},"非エンジニアにも優しい",{"id":63,"text":63,"type":53},"多機能・開発が活発",{"id":65,"text":65,"type":47},"astro-notion-blogの長所とeasy-notion-blogとの違い",{"id":67,"text":67,"type":53},"ページ表示がとても早い",{"id":69,"text":69,"type":53},"カスタマイズが比較的簡単",{"id":71,"text":71,"type":53},"複雑な機能は実装できない",{"id":73,"text":73,"type":47},"astro-notion-blogの導入方法",{"id":75,"text":75,"type":47},"おわりに",[],[],1793454720730]