استقرار سایت با کمک GitHub Pages و cloudflare

تازه فصل سوم سریال The Mandalorian رو تموم کردم و دنبال اسم برای دامنه سایت بودم. خب اولین اسمی که تو ذهنم اومد grogu بود که اسم اصلی baby yoda بود و در عین ناباوری دامنه رو کسی رزرو نکرده بود :) و این شد شروع خرید و اتصال دامنه به سایت، در این پست توضیحات بیشتری میدم.

خرید دامنه grogu.ir

برای خرید دامنه باید توی nic.ir اکانت داشته باشید و تایید هویت رو انجام بدین. من برای خرید دامنه از طریق ایران سرور اقدام کردم و در کمال تعجب در مدت زمان دو تا سه ساعت خرید دامنه انجام شد و حتی می‌شد از خود ایرنیک ns ها رو در لحظه عوض کرد که خیلی برام عجیب بود چون خرید دامنه و ثبت اون توی دفعه‌های قبلی خرید، حداقل یکی دو روز طول می‌کشید.

ثبت NS ها برای تنظیم DNS سایت

برای هاستیگ سایت از سرویس هاستینگ استاتیک گیت‌هاب استفاده کردم که در ادامه بیشتر توضیح میدم. برای اتصال دامنه به هاست پروژه، گیت‌هاب یه سری IP داده بود (من در این زمینه دانش کافی ندارم) که خب هر کاری کردم نتونستم توی ایرنیک در قسمت ردیف‌های کارگزار نام (NS) اضافه کنم، به پشتیبانی ایران سرور پیام دادم و نتیجه این شد که باید از سرویس DNS سایت cloudflare استفاده کنم.

بعد از ثبت نام و اضافه کردن دامنه و ردیف‌های DNS همه چیز به درستی کار کرد.

توی لینوکس با دستور nslookup میشه درخواست جستجوی DNS داد. به عنوان مثال برای دامنه grogu.ir درخواست میدیم:

$ nslookup grogu.ir

نتیجه میشه:

Server:         5.200.200.200
Address:        5.200.200.200#53

Non-authoritative answer:
Name:   grogu.ir
Address: 185.199.111.153
Name:   grogu.ir
Address: 185.199.109.153
Name:   grogu.ir
Address: 185.199.108.153
Name:   grogu.ir
Address: 185.199.110.153
Name:   grogu.ir
Address: 2606:50c0:8001::153
Name:   grogu.ir
Address: 2606:50c0:8000::153
Name:   grogu.ir
Address: 2606:50c0:8003::153
Name:   grogu.ir
Address: 2606:50c0:8002::153

GitHub Pages

یکی از سرویس های پرکاربرد و خیلی خوب گیت‌هاب، GitHub Pages هست. برای مشاهده اسناد اون از این لینک استفاده کنید. بطور کلی برای هر repo می‌تونید اون رو فعال کنید و امکان هاستینگ فایل های استاتیک رو در اختیارتون قرار میده. همچین برای استفاده از اون نیازی به دامنه اختصاصی ندارید و آدرسی با فرمت http(s)://<username>.github.io/<repository>‎ در اختیارتون قرار میده. برای اتصال اون به دامنه اختصاصی باید IP هایی که توی داکیومنتش هست رو در بخشDNS Records سرویس دهنده DNS تون قرار بدید.

تنظیمات اضافی Vuejs و Vite

Vite

یکی از خوبی‌های GitHub Pages رایگان بودنش هست ولی در کنار خوبی‌هایی که داره مشکلاتی هم هست که باید رفع بشه. برای مثال GitHub Pages فقط دو پوشه ‎/ (root) یا ‎/docs رو برای نمایش محتوا ارائه میده که خب چون سورس اصلی سایت هم روی همین repo هست تنها انتخاب من ‎/docs می‌تونست باشه. برای همین توی فایل vite.config.ts تنظیمات مربوط به پوشه خروجی رو تغییر دادم به "‎./docs":

export default defineConfig({
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", globalThis._importMeta_.url))
    }
  },
  build: {
    outDir: "./docs"
  }
})

Vuejs

چون من از vue-router استفاده می‌کنم و توانایی تغییر تنظیمات وب‌سرور رو ندارم تا درخواست‌های صفحات وب رو به index.html منتقل کنم فعلا باید از vue-router در حالت WebHashHistory استفاده کنم که به SEO سایت ضربه می‌زنه. هرچند فعلا هیچ محتوای خاصی نداریم که بخوام دنبال SEO باشم :) رویکرد پیشنهادی در این شرایط استفاده از فریمرک‌های SSG مثل VitePress هست، ولی ترجیح من استفاده از خود Vue هست تا در آینده، نگه‌داری وبلاگ راحت‌تر باشه.

سخن آخر

اینکه سایت به مرور در حال تکامل هست خیلی هیجان انگیزه.