Notion ile kendi blog sayfanızı yapabilirsiniz

Yazdığınız yazılar, notlarınız yada paylaşımlarınız sadece notion üzerinde kalmasın, bunları kendi blog sayfanız olarak paylaşabilirsiniz. Aşağıdaki 5 adım ile birlikte sizde notion üzerinden yazdığınız “blog” yazılarınızı özelleştirip bir web sayfasında yayınlayabileceksiniz. Burada “api” bağlantısı ile notion üzerindeki yazılarınızı aldığı için bunu yapabileceğiniz tüm “client’lar” ile iletişim kurabilir, veri alışverişi sağlayabilirsiniz.

Özet ve Adımlar

1. Notion hesabınıza erişim ve sayfa eklenmesi
2. Sayfanın içerisine bir “table database” eklenmesi
3. eklediğimiz “table database” içerisine bazı özellikler eklenmesi
4. Api kullanımı için “Integration” eklenmesi ve hesap ile bağlanması
5. Nuxt projesinin konfigure edilmesi ve çalıştırılması

Notion Hesap ve Kurulumları

1. Notion üzerinden yeni bir sayfa oluşturalım

2.1. Sayfa oluşturduktan sonra sayfanın ilk elemanı olarak + butonuna tıklayıp page ekleyelim

2.2. Page oluşturduktan sonra aşağıdaki seçeneklerden table kısmını seçip başlık tanımlayalım

2.3. Açılan panelde sağ tarafda bulunan databases kısmından new database seçimini yapalım

2.4. Tablonun kolonlarını silip kendimiz aşağıdaki gibi ek kolonlar ekleyelim.

title : text

description : long text

visible : checkbox

Şu şekilde giriş yapabilirsiniz.

3.1. Daha sonra aşağıdaki resimdeki gibi ayarlar >> Connections >> Develop or Manage Integrations kısmına girelim

Açılan panelden New Intagration kısmını seçip yeni bir entegrasyon oluşturalım

3.2. Oluşturdukdan sonra aşağıdaki kodu kopyalayalım

3.3. store/posts.ts dosyası içerisindeki Authorization bölümüne yapıştıralım

3.3. Ayrıca notion üzerindeki oluşturmuş olduğumuz database’in ayarlar kısmındaki connections bölümünden az önce oluşturduğumuz integration kısmını seçmemiz gerekiyor. Bu şekilde intergration ile notion database’yi bağlamış olacağız

3.4. Daha sonra database’imizin olduğu sayfadaki url içerisinden database_id bilgisini almamız gerekiyor

yukarıdaki resimdeki bilgiler arasında sol tarafdaki notion içerisindeki notion database_id dir.

4. Tüm işlemleri yaptıktan sonra notion üzerinde title ve description alanlarına örnek metinler yerleştirip visibilty kısmını işaretli olarak seçiniz.

5. Tüm işlemleri yaptıktan sonra nuxt-3 projesini çalıştırınız ve aşağıdaki gibi bir görüntü ile karşılaşmalısınız.

Projenin çalıştırılması

npm run install
npm run dev

live version : https://nuxt3-blog-with-notion-jbgf59666-mustafa05deniz.vercel.app/

github : https://github.com/mustafa05deniz/nuxt3-blog-with-notion