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

Tem 23, 2020

Ç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ını bulabileceğiniz bir kaç web sitesinin linkini paylaşacağım.

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:

Not Uygulaması
Blog Uygulaması
Bilgi Platformu (Wiki)
Proje Yönetim Aracı (Kanban, Checkbox, To-Do List vs.)
Database oluşturma (Henüz resmi bir API'si yok)
Ortak Çalışma Alanı
Markdown Editör
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.

Çok spesifik ihtiyaçlarınız yoksa bir çok 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.

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.

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.

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.

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.

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.

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.

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.

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.