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

Ç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 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 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.

Ayrıca fazlaca not alan biriyseniz, ya da not almayı istiyor ama bir türlü verim alamıyorsanız Not-Tutma Tekniği: Zettelkasten isimli yazıma da bakabilirsiniz.

Notion’a ek olarak eğer blog sitesi açmaksa gayeniz, bir blog sitesinde aranması gerekenler ile birlikte en iyi blog açma siteleri yazıma bakabilirsiniz.

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..


Notion Şablonları

Notion Şablonları Bulabileceğiniz Kaynaklar

Ü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.

Total
0
Shares
Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Previous Post
Django Svelte

Django and Modern JS Libraries – Svelte

Next Post
proje ve proje yönetim uygulamaları

Proje Yönetimi İçin Mutlaka Denemeniz Gereken 10+ Uygulama