علیرضا اصفهانی
علیرضا اصفهانی
خواندن ۳ دقیقه·۴ سال پیش

چطور بدون هزینه سایت شخصی/بلاگ دو زبانه SSR بسازیم!

این نوشته بازنشری از مقاله بررسی فنی تکنولوژی‌های بکار رفته در نسخه جدید سایت شخصی من با عنوان اصلی «اوج گرفتن در آسمان، این بار بدون سر!» است.


چند ماه پیش وقتی داشتم درمورد راه‌اندازی دوباره سایت شخصیم فکر می‌کردم، تصمیم گرفتم تا جایی که می‌تونم از نظر فنی، از تکنولوژی‌هایی استفاده کنم که برام تازگی داشته باشند، تا بتونم با چیزهای جدید آشنا بشم و استفاده ابزارهای جدیدی رو تجربه کنم. در این پروژه برای من، انتخاب تکنولوژی‌ها و ابزارها اهمیت ويژه‌ای داشت چون باید ابزارهایی انتخاب می‌کردم که هزینه استقرار سایت رو تا حد ممکن کم کنه و آماده‌سازیش برای چندزبانه بودن پیچیده نباشه؛ در ادامه میخوام خیلی کوتاه درمورد این تکنولوژی‌ها و کاری که انجام دادم توضیح بدم. نتیجه کار رو در تصویر پایین میتونید ببینید.

بلاگ شخصی من
بلاگ شخصی من


سیستم مدیریت محتوا (CMS)

تخصص و علاقه اصلی من برنامه‌نویسی فرانت‌انده، گرچه نوشتن کدهای بک‌اند یک وبلاگ، پیچیدگی زیادی نداره اما باید دنبال روشی میگشتم تا بشه هزینه استقرار (deploy) رو پایین آورد و نیاز به برنامه‌نویسی بک اند هم نداشته باشه. در حقیقت چیزی که من دنبالش میگشتم یک Headless CMS بود؛ بدون سر، بدون درد سر!

امکانات زیر رو برای بررسی کاندیدا، مدنظر قرار دادم:

  • پشتیبانی خوب و تیم توسعه‌دهنده قوی
  • امکان تعریف post type های متنوع
  • خروجی RESTful API
  • پشتیبانی از زبان فارسی و RTL
  • قابلیت چند زبانه بودن
  • هزینه پایین (رایگان بودن مزیت است ?)

بعد از بررسی و تست امکانات چند نمونه، بلاخره تصمیم گرفتم که Prismic رو انتخاب کنم. موردی که خوشبختانه تمام فاکتور‌هایی که من نیاز دارم رو مرتفع می‌کنه و نسخه تک کاربره رایگان هم داره.

محیط ارسال نوشته در prismic
محیط ارسال نوشته در prismic


برنامه‌نویسی فرانت‌اند

این قسمت پروژه برای من خیلی جذاب بود، چیزی که درش تخصص دارم و بهش علاقه دارم، اما بین این همه ابزارها باید از چی استفاده می‌کردم؟ من تجربه کار با ابزار NextJS رو داشتم که نسخه SSRی برای کتابخانه ReactJS حساب میشه. SSR مخفف Server Sider Rendering هست که با توجه به سرعت لود و پرفورمنس بالاتر و مزیت‌هایی که در سئو و خیلی چیزهای دیگه داره، تصمیم نهایی که گرفتم استفاده از NuxtJs بود که هم SSR هست و هم VueJs که برای من نسبتا جدید بود.

شروع کردم به خوندن داکیومنت ها و خیلی زود کد زدن باهاش رو شروع کردم. چون به مفاهیم SSR از قبل آشنا بودم، برام تجربه دلنشینی شد. در گیت‌هاب پروژه میتونید نگاهی به کدها بندازید و اگه نیاز داشتید هرجور که راحت بودید ازشون استفاده کنید.


میزبانی وب

برای میزبانی کردن سایت‌ها و وبلاگ‌ها، کاری که من همیشه هم انجام میدادم استفاده از هاست‌های اشتراکی یا سرور‌های مجازی/اختصاصی بود که هزینه سالیانه‌ای رو بابتش پرداخت میکردم؛ اما انتخاب ابزارهایی که گفته شد، این امکان رو به من میداد تا بتونم بدون هزینه سایت رو در وب میزبانی کنم. با کمک پلتفورم Vercel فقط کافی بود یک دامنه بخرم و DNS ها رو روش ست کنم، با متصل کردن اون به رپو گیتهاب پروژه بدون هیچ کانفیگ و دردسری Continuous Deployment رو براش فعال کردم تا با هر push روی گیت پروژه خودبخود پروژه دپلوی شه. بدون درد، بدون خونریزی و بدون هزینه!

در حقیقت Vercel یک پلتفورم دپلویمنت برای برنامه نویسان فرانت-انده که هاست و CI/CD و ... رو scalable و بدون نیاز به تنظیمات پیچیده در اختیار کاربرانش میزاره.

با vercel حتی نسخه staging هم میشه برای پروژه داشت تا تست‌ها قبل merge نهایی یک‌بار در اون محیط هم انجام بشه.

دشبورد vercel پروژه
دشبورد vercel پروژه



نتیجه‌گیری

هدف من از این نوشتن این مطالب، مستند‌کردن مدل تصمیم گیری و معرفی ابزارهایی که در پیاده سازی سایت شخصیم استفاده کردم بود. در این نوشته خوندیم که چطور میشه با انتخاب درست ابزارها برای پیاده‌سازی یک پروژه در هزینه و وقت صرفه جویی کرد و یک تجربه خوب و دلنشین داشت.

اگر شما هم برای انتخاب تکنولوژی محصولی که میخواهید تولید کنید نیاز به کمک و مشاوره دارید، درمورد محصولتون چند خطی برام بنویسید، خوشحال میشم که بتونم در هر سطحی بهتون کمک کنم.

برنامه‌نویسیnuxtjsjavascriptssrوبلاگ
توسعه‌دهنده وب @ esfahani.dev
شاید از این پست‌ها خوشتان بیاید