چگونه با استفاده از Netlify و GitHub یک وب سایت Angular میزبانی کنیم

با استفاده از این فرآیند آسان، سایت Angular خود را به صورت رایگان میزبانی کنید.

هنگامی که یک وب سایت Angular را به صورت آنلاین میزبانی می کنید، می توانید بین بسیاری از پلتفرم های موجود یکی را انتخاب کنید. یکی از این موارد که می توانید به صورت رایگان از آن استفاده کنید Netlify است.

اگر یک کپی از کد منبع وب سایت خود را در یک مخزن GitHub ذخیره می کنید، می توانید از Netlify برای میزبانی آن سایت استفاده کنید.

Netlify همچنین به طور خودکار سایت شما را هنگامی که تغییرات جدیدی را در شعبه مخزن میزبانی خود اعمال می کنید، مجدداً مستقر می کند.

نحوه ایجاد یک برنامه Angular مثال پایه

شما می توانید یک برنامه Angular ساده با استفاده از یک ویرایشگر مانند Visual Studio Code ایجاد کنید. سپس می توانید این وب سایت را با استفاده از Netlify میزبانی کنید.

1. یک برنامه Angular جدید ایجاد کنید.
2. یک صفحه اصلی ساده ایجاد کنید. کد موجود در فایل app.component.html را با محتوای صفحه فرود زیر جایگزین کنید:

   وب سایت کسب و کار ما

   وب سایت کسب و کار ما

   با نحوه طراحی، توسعه و نگهداری وب سایت حرفه ای خود در کمترین زمان آشنا شوید.

   آنچه ما انجام می دهیم

   ما ابزارهایی را برای توسعه وب سایت ها و راه حل های منحصر به فرد برای مشتریان خود در اختیار شما قرار می دهیم. ما همچنین آموزش هایی را برای نگهداری و سایر موضوعات مرتبط با وب سایت ارائه می دهیم.

   درباره ما

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

   حق نشر 2022

3. با افزودن مقداری CSS به فایل app.component.css، سبکی به برنامه Angular اضافه کنید:* { font-family: “Arial”, sans-serif;}.header { padding: 30px 50px;}.footer { padding: 5px 50 پیکسل؛ text-align: center;}.container-dark { background-color: #202C39; رنگ سفید؛ صفحه نمایش: انعطاف پذیر; align-items: center;}.container-orange { background-color: #FFD091; color: #202C39;}.container-white { background-color: whitesmoke; color: #202C39;}.content { padding: 100px 25%; صفحه نمایش: انعطاف پذیر; flex-direction: ستون. ارتفاع خط: 2 ريم; اندازه فونت: 1.2em; align-اقلام: مرکز; text-align: center;}
4. مقداری استایل برای برنامه کلی Angular در styles.css:body اضافه کنید { margin: 0; بالشتک: 0;}
5. برای آزمایش برنامه، با استفاده از ترمینال یا خط فرمان به پوشه ریشه آن بروید. دستور ng serve را تایپ کنید: ng serve
6. منتظر بمانید تا کد شما کامپایل شود و برای مشاهده برنامه خود از http://localhost:4200/ در مرورگر وب بازدید کنید.
7. در فایل .browserslistrc، iOS safari نسخه 15.2-15.3 را حذف کنید. این از نمایش خطاهای سازگاری در کنسول هنگام ساخت پروژه جلوگیری می کند. آخرین 1 نسخه کروم آخرین نسخه 1 فایرفاکس آخرین نسخه 2 لبه اصلی نسخه آخر 2 نسخه اصلی سافاری نسخه آخر 2 نسخه اصلی iOSFirefox ESRnot ios_saf 15.2-15.3not safari 15.2-1.
8. کد خود را با استفاده از دستور ng build در ترمینال:ng build بسازید
9. در فایل .gitignore، خط / dist را حذف یا نظر دهید. با حذف آن اطمینان حاصل می شود که پوشه dist در مجموعه فایل هایی است که به مخزن GitHub خود فشار می دهید.# /dist

<div class="container-dark header">
<h2>Our Business Website</h2>
</div>
<div class="container-white">
<div class="content">
<h2>Our Business Website</h2>
<p>Learn how to design, develop, and maintain your professional website in no time.</p>
</div>
</div>
<div class="container-orange">
<div class="content">
<h2>What We Do</h2>
<p>We give you the tools to develop websites and unique solutions for your customers. We also provide training for
maintenance and other website related topics.</p>
</div>
</div>
<div class="container-white">
<div class="content">
<h2>About Us</h2>
<p>We are a small business operating from Melbourne, Australia. Our spaces are uniquely crafted so clients can also
visit us in person.</p>
</div>
</div>
<div class="container-dark footer">
<p>Copyright 2022</p>
</div>

* {
font-family: "Arial", sans-serif;
}
.header {
padding: 30px 50px;
}
.footer {
padding: 5px 50px;
text-align: center;
}
.container-dark {
background-color: #202C39;
color: white;
display: flex;
align-items: center;
}
.container-orange {
background-color: #FFD091;
color: #202C39;
}
.container-white {
background-color: whitesmoke;
color: #202C39;
}
.content {
padding: 100px 25%;
display: flex;
flex-direction: column;
line-height: 2rem;
font-size: 1.2em;
align-items: center;
text-align: center;
}

body {
margin: 0;
padding: 0;
}

ng serve

last 1 Chrome version
last 1 Firefox version
last 2 Edge major versions
last 2 Safari major versions
last 2 iOS major versions
Firefox ESR
not ios_saf 15.2-15.3
not safari 15.2-15.3

ng build

# /dist

چگونه کد Angular خود را به GitHub فشار دهید

برای دسترسی Netlify به کد منبع، باید کد خود را در یک مخزن از راه دور ذخیره کنید.

می توانید یک مخزن جدید در GitHub ایجاد کنید و کد وب سایت خود را به آن مخزن فشار دهید. اگر با GitHub آشنایی ندارید، ممکن است ابتدا برخی از ویژگی های اساسی GitHub را بدانید.

1. یک مخزن جدید در GitHub ایجاد کنید. می توانید این کار را با وارد شدن به GitHub و کلیک بر روی New انجام دهید.
2. جزئیات مخزن جدید خود را وارد کنید. نامی مانند «netlify-app» و توضیحاتی به آن بدهید. مخزن را با فایل README، فایل .gitignore یا مجوز مقداردهی اولیه نکنید.
3. در ترمینال رایانه خود، به فهرستی که برنامه Angular خود را در آن ذخیره کرده اید بروید. دستورات زیر را برای مقداردهی اولیه پوشه خود به عنوان یک مخزن git اجرا کنید: git initgit add .git commit -m “first commit”
4. کد داخل این پوشه را به مخزن راه دور جدیدی که در GitHub ساخته اید فشار دهید. دستورات git remote add original، git branch و git push ارائه شده توسط GitHub را در صفحه مخزن راه دور خود دنبال کنید: git remote add original git branch -M maingit push -u origin main main
5. با تازه کردن صفحه مخزن GitHub می توانید تأیید کنید که کد برنامه Angular شما اکنون در مخزن راه دور GitHub شما قرار دارد.

git init
git add .
git commit -m "first commit"

git remote add original <Your GitHub repo link>
git branch -M main
git push -u origin main

چگونه از Netlify برای میزبانی کد خود استفاده کنید

برای میزبانی کد خود با استفاده از Netlify، باید به کد منبع GitHub خود دسترسی داشته باشید. سپس Netlify از پوشه dist پروژه Angular شما برای انتشار نسخه ساخته شده کد شما استفاده می کند.

شما می توانید با دنبال کردن مراحل پیکربندی هنگام ایجاد یک سایت جدید، تمام این تنظیمات را پیکربندی کنید:

1. وارد شوید یا در Netlify ثبت نام کنید. می توانید این کار را با استفاده از اعتبار GitHub خود انجام دهید.
2. از داشبورد اصلی و صفحه فهرست سایت، افزودن سایت جدید را باز کرده و Import an پروژه موجود را انتخاب کنید.
3. GitHub را انتخاب کنید.
4. روی Configure Netlify در GitHub کلیک کنید.
5. بر روی Install کلیک کنید.
6. Netlify لیستی از مخازن GitHub شما را نمایش می دهد. موردی را که می خواهید میزبانی کنید انتخاب کنید. به عنوان مثال، اگر نام مخزن خود را “netlify-app” گذاشته اید، سپس “netlify-app” را از لیست انتخاب کنید.
7. در صفحه پیکربندی، فیلدهای Owner، Branch برای استقرار و دایرکتوری پایه را در مقادیر پیش فرض خود بگذارید. اگر شعبه خاصی را منتشر می‌کردید، مانند یک شاخه جداگانه «تولید»، می‌توانید آن را به قسمت شعبه برای استقرار اضافه کنید. فیلد دستور Build را به “ng build” تغییر دهید. برای قسمت Publish directory، dist/<نام پروژه خود را تایپ کنید. اگر نمی دانید نام پروژه چیست، می توانید به پوشه dist پروژه خود بروید و آن را در آنجا پیدا کنید. به عنوان مثال، "dist/netlify-app".
8. روی Deploy site کلیک کنید.
9. منتظر بمانید تا استقرار کامل شود. ممکن است چند دقیقه طول بکشد و ممکن است لازم باشد صفحه را بازخوانی کنید. اگر همه چیز خوب پیش برود، می توانید استقرار موفقیت آمیز را در لیست استقرارها مشاهده کنید. روی استقرار منتشر شده خود کلیک کنید، به عنوان مثال، Production: main@HEAD.
10. بر روی دکمه Open production deploy کلیک کنید.
11. اکنون می توانید وب سایت خود را با استفاده از یک URL در قالب .netlify.app در برگه دیگری مشاهده کنید. اگر میزبان یک وب سایت با چندین تغییر مسیر هستید، ممکن است نتوانید به صفحات دیگر هدایت شوید. در این مورد، راهی برای رفع مشکل تغییر مسیر در Netlify وجود دارد. در صورت تمایل می توانید نام دامنه رایگان خود را نیز تغییر دهید.

میزبانی وب سایت خود با استفاده از GitHub و Netlify

امیدواریم که اکنون بتوانید با استفاده از GitHub و Netlify یک وب سایت را با موفقیت میزبانی کنید. شما می توانید استقرار خودکار را در شاخه های خاصی از یک مخزن GitHub تنظیم کنید. به این ترتیب، می توانید استقرار وب سایت خود را خودکار و ساده کنید.

اما Netlify تنها راهی نیست که می توانید یک برنامه Angular را به صورت آنلاین راه اندازی کنید. همچنین می‌توانید از پلتفرم‌های دیگری مانند GitHub Pages استفاده کنید.

منبع مقاله