VitePress Projesi Oluşturma ve Çalıştırma

VitePress Nedir?

VitePress, Vite tabanlı bir statik site oluşturucusudur ve belge yazımı için tasarlanmıştır. VitePress, Vue tarafından desteklenir ve son derece hızlı bir yapı ve geliştirme deneyimi sunar. Basit ve güçlü bir API sağlar, bu da belge oluşturmayı ve bakımını son derece kolaylaştırır.

VitePress'in Temel Özellikleri ve Avantajları

• Hızlı Geliştirme Deneyimi: VitePress, temel yapı aracı olarak Vite'i kullanır ve son derece hızlı sıcak güncellemeler ve yapı hızları sağlar.
• Basit Konfigürasyon: Basit bir yapılandırma dosyası aracılığıyla, kullanıcılar hızla kendi belge sitelerini yapılandırabilir ve özelleştirebilir.
• Güçlü Markdown Uzantıları: Vue bileşenlerini ve özel Markdown eklentilerini destekler, bu da belge yazımını daha esnek ve güçlü kılar.
• Yerleşik SEO Optimizasyonu: Otomatik oluşturulan site haritası ve optimize HTML yapısıyla arama motoru dostu bir yapı sağlar.
• Çok Küçük Paket Büyüklüğü: Tree-shaking teknolojisi ile oluşturulan statik dosyalar çok küçüktür ve yükleme hızları çok hızlıdır.

VitePress kullanarak, geliştiriciler hızlı bir şekilde yüksek performanslı belge siteleri oluşturabilirler.

ServBay Kullanarak VitePress Projesi Oluşturma ve Çalıştırma

Bu makalede, ServBay'in sağladığı Node.js ortamını kullanarak bir VitePress projesi oluşturmayı ve çalıştırmayı ele alacağız. ServBay'in 'Host' işlevini kullanarak Web sunucusunu ayarlayacak ve ters proxy ve statik dosya hizmeti aracılığıyla projeye erişim sağlayacağız.

VitePress Projesi Oluşturma

1. Projeyi Başlatma

   Öncelikle, ServBay'in sağladığı Node.js ortamını kurduğunuzdan emin olun. Ardından yeni bir VitePress projesi başlatmak için aşağıdaki komutları kullanın:

   cd /Applications/ServBay/www
   mkdir servbay-vitepress-app
   cd servbay-vitepress-app
   npm add -D vitepress
   npx vitepress init

   İstendiğinde proje bilgilerini girin ve diğer seçenekleri gereksinimlerinize göre seçin:

    ┌  VitePress'e Hoş Geldiniz!
    │
    ◇  VitePress konfigürasyonunu hangi dizinde oluşturmak istersiniz?
    │  ./docs
    │
    ◇  Site başlığı:
    │  ServBay VitePress Demo
    │
    ◇  Site açıklaması:
    │  Bir ServBay VitePress Demo Sitesi
    │
    ◇  Tema:
    │  Varsayılan Tema
    │
    ◇  Konfigürasyon ve tema dosyaları için TypeScript kullanmak ister misiniz?
    │  Evet
    │
    ◇  VitePress npm scriptlerini package.json'a eklemek ister misiniz?
    │  Evet
    │
    └  Tamamlandı! Şimdi npm run docs:dev komutunu çalıştırın ve yazmaya başlayın.

VitePress Proje İçeriğini Düzenleme

1. 'docs/index.md' Dosyasını Düzenleyin

   'docs/index.md' dosyasını açın ve içeriği "Hello ServBay!" şeklinde düzenleyin:

   # Hello ServBay!
   
   ServBay kullanarak VitePress belge sitesini çalıştırdığınız için teşekkür ederiz.

Geliştirme Moduna Geçiş

1. Geliştirme Sunucusunu Çalıştırma

   Geliştirme sunucusunu başlatın ve bir port numarası (örneğin: 8585) belirleyin:

   npm run docs:dev -- --port 8585

   Bu, yerel olarak bir geliştirme sunucusu başlatacak ve 8585 portunu açacaktır.

2. ServBay Host Ters Proxy Konfigürasyonu

   Geliştirme sunucusuna erişmek için ServBay'in 'Host' işlevini kullanarak bir ters proxy ekleyin. ServBay'in 'Host' ayarlarında, yeni bir ters proxy ekleyin:

   • İsim: My first VitePress dev site
   • Domain: servbay-vitepress-test.dev
   • Host Türü: Ters Proxy
   • IP: 127.0.0.1
   • Port: 8585

   Ayrıntılı adımlar için Nodejs geliştirme web sitesi ekleme kılavuzuna bakın.

3. Geliştirme Moduna Erişim

   Tarayıcınızı açın ve https://servbay-vitepress-test.dev adresine gidin, projeyi gerçek zamanlı olarak görüntüleyin. ServBay'in özel alan adları ve ücretsiz SSL sertifikaları desteği sayesinde daha yüksek güvenliğin tadını çıkarabilirsiniz.

Üretim Sürümünü Oluşturma

1. Üretim Sürümünü Oluşturma

   Geliştirme tamamlandığında, üretim sürümünü oluşturmak için aşağıdaki komutu kullanın:

   npm run docs:build

   Oluşturma tamamlandığında, oluşturulan statik dosyalar 'docs/.vitepress/dist' dizininde yer alacaktır.

2. Statik Dosya Hizmeti Ayarlama

   ServBay'in 'Host' işlevini kullanarak üretim sürümüne erişmek için bir statik site ekleyin. ServBay'in 'Host' ayarlarında, yeni bir statik web sitesi ekleyin:

   • İsim: My first VitePress production site
   • Domain: servbay-vitepress-test.prod
   • Host Türü: Statik
   • Web Sitesi Kök Dizin: /Applications/ServBay/www/servbay-vitepress-app/docs/.vitepress/dist

3. Üretim Moduna Erişim

   Tarayıcınızı açın ve https://servbay-vitepress-test.prod adresine gidin, oluşturulan üretim sürümünü görüntüleyin. ServBay'in özel alan adları ve ücretsiz SSL sertifikaları sayesinde web siteniz daha yüksek güvenilirlik ve güvenlik sunacaktır.

Temiz URL Modunda Çalıştırma

VitePress'inizi Temiz URL modunda çalıştırıyorsanız (yani cleanUrls: true), ServBay'in 'Host' fonksiyonunda aşağıdaki ayarları yapın

• İsim: My first VitePress production site
• Domain: servbay-vitepress-test.prod
• Özel Konfigürasyon: İşaretleyin
• Caddy Konfigürasyonu:

encode zstd gzip
import set-log servbay-vitepress-test.prod

tls internal

try_files {path} {path}/ {path}.html

root * /Applications/ServBay/www/servbay-vitepress-app/docs/.vitepress/dist

file_server

Kaydettikten sonra, .html eklemeksizin VitePress'e erişebilirsiniz. Örneğin: https://servbay-vitepress-test.prod/path

Yukarıdaki adımları tamamladıktan sonra, bir VitePress projesi oluşturup çalıştırdınız ve ServBay'in sağladığı fonksiyonları kullanarak projenizi yönetip erişebilirsiniz.