Notion Şablonları ve Notion ile Ücretsiz Web Sitesi Yapımı

written by
Can Burak S.
Temmuz 22, 2020
Notion Şablonları

Çok amaçlı üretkenlik uygulaması Notion ile ücretsiz bir web sitesi nasıl yapılır bu yazıda göstermeye çalışacağım. Yazının sonunda da hazır Notion şablonları bulabileceğiniz bir kaç web sitesinin linkini paylaşacağım.

Hızlıca yazıyı geçip kaynakları görmek isteyenler için:  Notion Şablonları ve Notion Kaynakları

Notion şablonları

Notion Nedir?

Notion sağladığı zengin bileşenler ve hayli özelleştirilebilir yapısı ile çok fazla amaç için kullanılabilen bir platform. Notion en genel hatlarıyla şu amaçlar için kullanılabiliyor:

  1. Not Alma Uygulaması
  2. Blog Uygulaması
  3. Bilgi Platformu (Wiki)
  4. Proje Yönetim Aracı (Kanban, Checkbox, To-Do List vs.)
  5. Database oluşturma (Henüz resmi bir API'si yok)
  6. Ortak Çalışma Alanı
  7. Markdown Editör
  8. HTML ve PDF dışa çıkartıcı

2016'da San Fransisco merkezli kurulan ve 2020 yılında 2 milyar dolar değerleme alan bir şirket aynı zamanda.
Yanlış hatırlamıyorsam bir Evernote alternatifi olarak beta sürümünü görmüştüm ilk defa. Hiç bir zaman Evernote'a ısınamamış biri olarak ilgimi çekmişti ancak resmi bir Linux versiyonunun olmayışı biraz uzak kalmama sebep olmuştu.

Bugünse hala resmi bir API'a sahip olmayışları ve yol planlarında resmi API için öncelik barındırmamaları hala canımı sıksa da, bu benim gibi kullanıcılar için bir problem.

(Edit: Aralık 2020 itibariyle kapalı beta API hizmetine başlandı.)

Çok spesifik ihtiyaçlarınız kullandığınız uygulamanızı bırakıp Notion'a geçmemeniz için hiç bir sepep yok.

Bu blog yazısında Stephen Ou'nun bir yan projesi olan FruitionSite sitesinde yayınladığı yöntemi uygulayarak Notion ile nasıl bir web sayfası yapılır onu göstermeye çalışacağım.

Notion Ücretli mi ?

Notion kişisel kullanımlar için ücretsizdir. Ancak sadece 5MB'a kadar depolama imkanı sunuyor. Bir süre yazılarınız sorun çıkarmayacak olsa da fotoğraf depolamanız sorun yaratabilir.

Notion yapılan web sayfası örnekleri nelerdir?

Aşağıdaki görsellerde Notion ile yapılan web sayfası örneklerinden bir kaç tanesini bulabilirsiniz.

Ayrıca bu yazıda gösterilecek olan yöntemle yapılmış sitelerin listesine de buradan ulaşabilirsiniz:

Fruition Showcase

Notion İle Ücretsiz Web Sayfası Oluşturalım

Ben daha öncede GoDaddy'den aldığım no-kod.com alan adını bu örnek gösterim için kullanacağım.

Herhangi bir alan adı sağlayıcısından almış olduğunuz alan adıyla da pek tabi bu işlemi gerçekleştirebilirsiniz.

Tutarlı olmak ve örnek verirken kolaylık olması maksadıyla kendi kullanacağım alan adını tüm örneklerde kullanacağım.

Notion ile Web Sayfası Yapmak için Gerekenler

Notion ile ücretsiz web sayfası oluşturmak için gereken iki önemli husus var. Bunlar:

  • Bir Notion hesabımızın olması.
  • Bir alan adına sahip olmamız (Örneğin: http://no-kod.com/. Herhangi bir alan adı sağlayıcısından ücretli olarak temin edebilirsiniz: GoDaddy gibi)

Şu ana kadar zaten Notion hesabına sahip olduğunuzu ve de web sayfası olarak kullanmak istediğiniz alan adını almış olduğunuzu varsayıyorum.

Bundan sonraki kısımda bir CloudFlare hesabı açıp, alan adınıza gelen trafiği Notion sayfanıza yönlendireceğiz.

Adım Adım Notion ile Web Sayfamızı oluşturuyoruz

1. Buradaki adresten ücretsiz bir CloudFlare üyeliği açıp. Eposta onayı için gelen maili onaylayın.

2. "Add A Site"  butonuna tıklayarak kullanmak istediğiniz alan adınızı başında herhangi bir protokol ve alt alan adı olmadan girin. Örneğin: no-kod.com. Eğer www.no-kod.com ya da blog.no-kod.com gibi bir alt alan adını kullanacak da olsam gene de kök alan adını yani apex domain'im olan no-kod.com 'u girecektim.

3. Daha sonra "Free" seçeği ile ücretsiz planı seçiyoruz.

4. Bize alan adı sağlayıcımızla ilgili bilgileri gösterdikten sonra "Continue" ile devam ediyoruz.5. CloudFlare'in ad sunucularının olduğu ekrana geldik. Buradaki 2 adet ad sunucusunu (name servers) kendi alan adı sağlayıcımızın DNS ayarlarına gireceğiz. Böylece CloudFlare alan adımızla ilgili tek yetkili konumuna gelecek.

5.Alan adı sağlayıcımızda oturum açıp, kullanacağımız alan adının DNS ayarları sayfasına gidiyoruz. Benim örneğimi referans alırsak, GoDaddy'de oturum açıp, alan adlarım arasından no-kod.com' u bulup "Yönet" seçeneğine tıklıyorum.

cloudflare ns ayarları
cloudflare ns ayarları

6.Alan adı sağlayıcımızda oturum açıp, kullanacağımız alan adının DNS ayarları sayfasına gidiyoruz. Benim örneğimi referans alırsak, GoDaddy'de oturum açıp, alan adlarım arasından no-kod.com' u bulup "Yönet" seçeneğine tıklıyorum.

https://cbsofyalioglucom.imfast.io/notion/godaddy-dns-yonet.png
GoDaddy DNS ayarlarını bul

7. Açılan sayfada alt kısımlarda Ad Sunucuları başlığında "Değiştir" butonuna tıklayarak, beşinci Adımda karşımıza çıkan CloudFlare Ad Sunucularını (NS) buraya girip kaydediyoruz. Kaydetmenin ardından artık CloudFlare alan adımız üzerinde tam yetkiye sahip oluyor.

Eğer Ad sunucuları çıkmamışsa kendimiz bir A kaydı oluşturmamız gerekecek. Bu kaydın Host kısmına @, Değer kısmına da 1.1.1.1 girmeliyiz.

GoDaddy yeni ad sunucuları

8.  Şimdi tekrardan CloudFlare'deki hesabımıza geri dönüyoruz.  "Done, check nameservers"  butonuna tıklıyoruz.

9. Sonraki ekranda SSL/TLS modu olarak Flexible'ı seçiyoruz.

CloudFlare SSL ayarları

10. Always Use HTTPS seçeneğine tıklayarak aktif ediyor, Auto Minify seçeneklerinin hepsini seçiyor ve Brotli sıkıştırmasını da aktif ederek "Done" butonuna tıklıyoruz.

CloudFlare sıkıştırma ayarları

11. Ardından CloudFlare'in onay vermesini bekliyoruz. Eğer aşağıdaki ekran sizde çıkmadıysa, sayfayı yenileyebilirsiniz.

CloudFlare başarılı şekilde kuruldu ekranı

12. İşlemlerin başarılı olduğuna dair ekranı gördüyseniz, yukarıdaki mavi kutulardan "Workers" seçeneğini seçebilirsiniz. Yeni açılan sayfada, sağ taraftaki "Manage Workers" seçeneğine tıklayarak alan adına gelen trafiği, notion sayfamıza yönlendirecek worker'ımızı ayarlayacağız.

CloudFlare işçi ekranı
CloudFlare işçi ekranı

13. Sonraki ekranda çıkan herhangi bir alt alan adını seçebilirsiniz. Neyi seçitiğinizin çok da bir önemi yok. Global olarak benzersiz olması yeterli. Daha sonra "Set up" ve ardından "Confirm" seçenekleri ile işçimizi yaratıyoruz.

CloudFlare işçiye isim ver

14. Sonraki ekranda tekrardan Free seçeneğini seçerek ücretsiz plan dahilinde kalıyoruz. Burada seçtiğimiz ücretsiz hesap için günlük bir limit uygulanıyor. Eğer siteniz fazla trafik çekecek ise daha sonra bir üst paketi seçebilirsiniz.

15. Eğer başka bir ekrandaysanız tekrardan mavi kutucuklar arasından Workers'a tıklayarak ilgili sayfaya geçiniz. Buradaki "Create a Worker" butonuna tıklayarak işçimizin görevlerini tanımlayacağız.

16. Bundan önce yapmamız gereken bir şey daha var. O da Notion'da oluşturduğumuz sayfaya giderek, bu sayfayı herkesin erişimine açık hale getirmek. Kullanacağımız sayfayı seçtikten sonra sağ üst köşedeki "Share" linkine tıklayarak ardından da "Share to the web" seçeneğini aktif hale getirip, "Copy Link" butonuna tıklıyor ve Notion sayfamızın global adresini kopyalıyoruz. Artık sayfamız herkesin erişimine açık hale gelmiş bulunmakta.

Notion'ı paylaşıma açmak

17. Aşağıdaki linke tıklayarak çıkan sayfadaki form kısmına kutucukların birincisine kullanacağınız alan adını girin. Örneğin: no-kod.com. İkincisine ise bir önceki adımda kopyaladığımız, Notion sayfamızın web adresini giriyoruz.  Ardından "COPY THE CODE" seçeneği ile üretilen kodu kopyalıyoruz. Eğer birden çok sayfa Notion sayfasını kullanmak isterseniz, "ADD A PRETTY LINK"  seçeneği ile yapabilirsiniz.

Form linki

18. Tekrar CloudFlare sayfasına geri dönelim. Burada karşımıza çıkan ekranda, sol taraftaki (Script yazan panel) tüm kodu silerek, az önce üretilen kodu buraya yapıştırıyoruz. "Save and Deploy" butonuna tıklıyoruz.

Form'da üretilen kodu buraya yapıştır

19. Şimdi sayfanın üst kısmında yer alan alan adımıza tıklayalım. Ardından, mavi kutucuklardan "Workers" butonuna tıklayarak İşçilerimizle alakalı sayfaya geçelim.

20. Buradaki "Add Route" butonuna tıklıyoruz. Burada kullanacağımız alan adını,  /* ekiyle giriyoruz. Örneğin: no-kod.com/* ya da alt alan adı kullanacaksak blog.no-kod.com/* . (Sondaki yıldız * işaretini unutmayın. Yıldız wildcard olup oraya gelebilecek her ihtimalin kabul edilmesini sağlar)Son olarak daha önce aktif ettiğimiz workerımızı da seçtikten sonra kaydet tuşuna basarak işlermlerimizi bitiriyoruz.

Route ayarlarını yap
Route ayarlarını yap

Artık alan adımıza giderek Notion ile oluşturduğumuz sayfayı web sayfası olarak kullanabiliriz. Artık sitenizi kullanmaya başlayabilirsiniz..

Eğer Notion ile açacağınız web sitesinin yeterli gelmemesi durumunda bir de En İyi Blog Siteleri yazısında bahsedilen blog açma sitelerine göz atabilirsiniz.


Notion Şablonları

Notion Şablonları Bulabileceğiniz Kaynaklar

Hoppa: Hoppa Notion sayfanızı bir müşteri destek sitesine çevirmenizi ve temel düzeyde analitik bilgilerini alabilmenizi sağlayan aylık $20 ücret talep eden bir platform.

Notion Link Yöneticisi: Bağlantı ve yer imlerinizi Notion'da düzenlemeniz için yapılmış ücretsiz bir bağlantı yöneticisi.

Notion Hazır Öğrenci Şablonu: Öğrenciler için hazırlanmış bu ücretli paketin bir de demo sürümü mevcut. İçerisinde Etkili not alma ve günlük planlama gibi template'lar bulunuyor.

AddPotion: $6'a Notion ile web sitenizi kurmaya izin veren bir site.

Pageably: Notion'ınızı blog olarak paylaşabileceğiniz bir site. Notion'dan daha hızlı açılacağını vaad eden bu sitenin ücretsiz planı da var.

Humanotion: Ücretsiz Notion Avatar Paketi

Notion Everything ücretli ve ücretsiz notion hazır şablonlarını filtreleyebileceğiniz bir kaynak sitesi.

Potion: Dokümanlarınızı web sayfasına çevirebilen bir web sayfası kurucusu. Analitik, SEO, typeface ve tema özelleştirmeleri de sunan bu sitenin hizmetini $3/Ay karşılığında kullanabilirsiniz.

Sotion: Dokümanlarınızı parola arkasına gizlemek isteyenler için ($10/Ay)

Notionery: Düşünme modellerinin derlendiği bir Notion şablonu.

Notionable: Ücretsiz alışkanlık takip şablonu. (Habit Tracker). Açılan GumRoad sayfasında ücret kısmına 0 (rakam ile sıfır) girerseniz şablon açılacaktır.

Indify: Notion eklentileri (widget) ile Notion'ınızın yeteneklerini ileriye taşıyabileceğiniz bir platform. Google Takvim vb bir çok uygulamayı gömebilmenize olanak sağlıyor.

Ücretli ve ücretsiz Notion şablonları ve ilham verici kaynakları bulabileceğiniz platformlar:

Notelet: Notion sayfalarınız ve özel alan adınızı kolayca birleştirip bir web sayfası ya da blog yapmanıza olanak sağlayan ücretli bir site

Vizydrop: Notion'ınıza interaktif raporlar ve grafikleri gömülü olarak eklemek istiyorsanız buyurun:

Notion Pack: Serbest çalışanlar için ihtiyaç duydukları tüm dokümanları bulabilecekleri Notion şablonları: ($78 ücretli)

Notion Charts: Notion'ınıza grafik eklemek için bir diğer platform:

Apption: Birbirinden farklı bir sürü özelliği entegre etmenizi sağlayan zengin bir site

Automate Notion: Notion ile otomasyonlar yaratabileceğiniz bir iş akış sitesi:

Notion Metrics ile diğer platformlardaki panellerinizi kendi Notion sayfanıza taşıyabilirsiniz. Convertkit, Mailchimp, Stripe gibi platform seçenekleri mevcut.

NotionTemplates: $69 ücret kaşılığında size çeşitli Notion şablonları sunuyor.

NotionExpert


NoCode Notion



Super.So: ile özel alan adınızı Notion ile ücret karşılığı bağlayabilirsiniz.

Şubat 3, 2021
Is it Safe to Travel through Istanbul Airport? Read More
Şubat 1, 2021
Works Read More
Temmuz 23, 2020
25+ En İyi Blog Siteleri ve Blog Açacaklara Tavsiyeler [2021] Read More
cbsofyalioglu logo
DESIGN•DEVELOPMENT•SEO