- Baştan sona NuxtJs (dolayısıyla VueJs) ile geliştirilmiş ve geliştirilmeye devam eden bir Blog sitesi.
- Database ve Authentication işlemleri için Firebase kullanıldı.
- Gerçek hayattaki örneği ve demosu için : NuxtJs Blog
- Ziyaret ederek sayfa tasarımını, admin panelini gözden geçirebilirsiniz.
- Sisteminizde Node.Js kurulu olması gerekmektedir.
- Firebase bağlantısı yapacağımız için gmail adresi gerekmektedir.
"@nuxtjs/axios": "^5.3.6",
"chart.js": "^2.9.3",
"firebase": "^7.19.1",
"js-cookie": "^2.2.1",
"moment": "^2.27.0",
"nuxt": "^2.0.0",
"vue-chartjs": "^3.5.1",
"vuelidate": "^0.7.5"
*** Bu paketler $ npm install komutu ile otamatik olarak yüklenecektir.
Projede CDN (İçerik Dağıtım Ağı) olarak "Bootstrap" ve "Fontawesome" Kullanıldı.
- Kurulum için öncelikle Firebase işlemlerini gerçekleştirmeniz gerekmektedir. Bunun için kullanabileceğiniz dökümanlar :
NuxtJs Blog Sistesinin Kurulumu Ve Firebase Işlemleri (2/1), NuxtJs Blog Sitesinin Local Kurulumu Ve Auth Işlemleri (2/2) - Proje deploy işlemi için : NustJs Deploy Google App Engine
- Firebase Web App ayarlarındaki "firebaseConfig" objesinin içeriğini, gitHub'dan indirdiğiniz projenin "nuxt.config.js" dosyasının içerisindeki "env" objesinde karşılık gelen yerlere yazınız.
- Firebase "Storage" bağlantısı için, firebase sayfasından "Storage" sekmesine gidin ve başlatın. "Storage" içerisinden "Rules" sekmesine giderek
"allow read, write: if request.auth != null;"
kodundaki "null" silip yerine "true" yazınız.
(Projeyi açtığınız editörün (Visual Studio Code gibi) terminali kullanılabilir.)
# bağımlılıkları yüklemek için:
$ npm install
# localhost:3000 üzerinden yayınlamak için:
$ npm run dev
- Firebase "Authentication" işlemi için, firebase sayfasından "Authentication" sekmesine gidin ve "E-posta/Şifre" yazan başlığı seçerek kaydetme işlemini yapınız.
- Authentication sekmesinden kullanıcı ekleyiniz.
(Genellikle tarayıcıda http:https://localhost:3000 üzerinden yayına alınır)
- Admin girişi ve "Authentication" işlemini gerçekleştirmek için sayfanın en altında "Admin" yazan buton ile admin paneline gidiniz.
- E-posta ve Şifreniz ile giriş yapınız.
- Admin panelinden Profil bilgilerinizi eksiksiz olarak girip kaydediniz.
- Panelden istediğiniz gibi içerik ekleyerek, düzenlemeler yaparak Blog sitesini kullanabilirsiniz.
# build for production and launch server
$ npm run build
$ npm run start
For detailed explanation on how things work, check out Nuxt.js docs.