پابلیش پروژه های Blazor WebAssembly بر روی GitHub Pages

سلام و درود بر همه دوستان جان

در این مقاله قصد داریم که پروژه های Blazor خودمون رو بر روی GitHub پابلیش کنیم.

اگر شما هم به دنبال فضای رایگان برای هاست پروژه های Blazor برای تست یا دموی کار ها یا مواردی مثل ساخت رزومه برای خود میگردید این آموزش برای شماست ‍‍:) 🚀🚀🚀🚀🚀🚀🚀🚀

مرحله 1 : ساخت برنچ خالی در ریپازیتوری

برای این کار بیش از یک روش وجود دارد ، اما ما در اینجا از گیت CLI استفاده میکنیم.

حتما قبل از شروع اگر پروژه خود را بر روی گیت هاب نگذاشته اید این کار را حتما انجام دهید.

• ابتدا مطمعا شوید که git cli بر روی سیستم شما نصب است ، این کار را میتوانید با اجرای دستور زیر در cmd ویندوز انجام دهید.

• سپس وارد پوشه ریپازیتوری مدنظر شوید.

حتما ، حتما ، حتما ، مطمعا شوید ویژوال استدیو یا هر نرم افزاری که از فایل های این دایرکتوری استفاده میکنند
بسته باشند ، در غیر این صورت عملیات با شکست مواجه میشود.

• حالا در نوار بالا عبارت cmd را بنویسید و enter را بزنید تا cmd باز شود.

مجدد تاکید میشود :

حتما ، حتما ، حتما ، مطمعا شوید ویژوال استدیو یا هر نرم افزاری که از فایل های این دایرکتوری استفاده میکنند بسته باشند ، در غیر این صورت عملیات با شکست مواجه میشود.

حال دستور های زیر را در cmd وارد نمایید :

ساخت برنچ جدید از روی برنچ مستر :

git checkout --orphan gh-page

خالی کردن برنچ :

git rm -rf .

کامیت و نهایی کردن ساخت برنچ :

git commit --allow-empty -m &quotroot commit&quot

پوش کردن برنچ در GitHub :

git push origin gh-page

بازگشت به برنچ مستر :

git checkout master

مرحله 2 : اصلاح تنظیمات گیت هاب

• ابتدا وارد بخش تنظیمات ( Settings ) شوید و سپس از منوی سمت چپ وارد بخش پیج (pages) شده و برنچ (Branch) بر روی gh-page قرار دهید .

همچنین دقت کنید که Source با مقدار 'Deploy from a branch ' پر شده باشد.

• سپس از همان منوی سمت چپ وارد بخش اکشن ها (Actions) زیر منوی جنرال (General) شده .

• سپس به پایین صفحه آمده و تیک Read and write permissions را بزنید ، سپس آن را ‌ ذخیره (Save) کنید.

مرحله 3 : ایجاد GitHub Actions

• ابتدا مانند عکس زیر مجددا به برنچ مستر بازگردید.

• سپس به قسمت Actions رفته و گزینه New Workflows را بزنید.

• حال گزینه set up a workflow yourself را انتخاب کنید.

• حال در صفحه باز شده کد های زیر را اضافه کنید :

انتخاب نام برای عملیات

name: Deploy to GitHub Pages

مشخص کردن ایونتی که باعث شروع عملیات میشود

on:
  push:
    branches: [ master ]

مشخص کردن ایمیجی که وظیفه بیلد و پابلیش کد را دارد

jobs:
  deploy-to-github-pages:
 # use ubuntu-latest image to run steps on
    runs-on: ubuntu-latest
    steps:

نصب git برای کامیت کردن پابلیش بر روی برنچ gh-page

    # uses GitHub's checkout action to checkout code form the master branch
    - uses: actions/checkout@v4.1.7

نصب .net sdk 8 برای پابلیش کد ها :

نکته : ورژن را متناسب با دات نت خود تقییر دهید

    # sets up .NET Core SDK 8.0
    - name: Setup .NET Core SDK
      uses: actions/setup-dotnet@v4.0.0
      with:
        dotnet-version: 8.0

پابلیش پروژه

بجای Project-Name نام پروژه خود را بگذارید

    # publishes Blazor project to the release-folder
    - name: Publish .NET Core Project
      run: dotnet publish Project-Name/Project-Name.csproj -c Release -o release --nologo

اصلاح روتینگ بلیزر برای کارکردن در GitHub Page

بجای Project-Name نام پروژه خود را بگذارید

    # changes the base-tag in index.html from '/' to 'BlazorGitHubPagesDemo' to match GitHub Pages repository subdirectory
    - name: Change base-tag in index.html from / to BlazorGitHubPagesDemo
      run: sed -i 's/<base href=&quot\/&quot \/>/<base href=&quot\/Project-Name\/&quot \/>/g' release/wwwroot/index.html

ایجاد صفحه 404 با محتویات صفحه index.htm

    # copy index.html to 404.html to serve the same file when a file is not found
    - name: copy index.html to 404.html
      run: cp release/wwwroot/index.html release/wwwroot/404.html

ایجاد فایل .nojekyll برای اینکه jekyll در فرایند مسیر یابی اختلال ایجاد نکند

    # add .nojekyll file to tell GitHub pages to not treat this as a Jekyll project. (Allow files and folders starting with an underscore)
    - name: Add .nojekyll file
      run: touch release/wwwroot/.nojekyll

و در نهایت پوش کردن فایل های پابلیش شده به برنچ gh-page

    - name: Commit wwwroot to GitHub Pages
      uses: JamesIves/github-pages-deploy-action@3.7.1
      with:
        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
        BRANCH: gh-page
        FOLDER: release/wwwroot

در نهایت فایل main.yml شما باید اینگونه باشد:

name: Deploy to GitHub Pages
# Run workflow on every push to the master branch
on:
  push:
    branches: [ master ]

jobs:
  deploy-to-github-pages:
    # use ubuntu-latest image to run steps on
    runs-on: ubuntu-latest
    steps:
    # uses GitHub's checkout action to checkout code form the master branch
    - uses: actions/checkout@v4.1.7
    
    # sets up .NET Core SDK 3.1
    - name: Setup .NET Core SDK
      uses: actions/setup-dotnet@v4.0.0
      with:
        dotnet-version: 8.0

    # publishes Blazor project to the release-folder
    - name: Publish .NET Core Project
      run: dotnet publish Project-Name/Project-Name.csproj -c Release -o release --nologo
    
    # changes the base-tag in index.html from '/' to 'BlazorGitHubPagesDemo' to match GitHub Pages repository subdirectory
    - name: Change base-tag in index.html from / to BlazorGitHubPagesDemo
      run: sed -i 's/<base href=&quot\/&quot \/>/<base href=&quot\/Project-Name\/&quot \/>/g' release/wwwroot/index.html

    # copy index.html to 404.html to serve the same file when a file is not found
    - name: copy index.html to 404.html
      run: cp release/wwwroot/index.html release/wwwroot/404.html

    # add .nojekyll file to tell GitHub pages to not treat this as a Jekyll project. (Allow files and folders starting with an underscore)
    - name: Add .nojekyll file
      run: touch release/wwwroot/.nojekyll
      
    - name: Commit wwwroot to GitHub Pages
      uses: JamesIves/github-pages-deploy-action@3.7.1
      with:
        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
        BRANCH: gh-page
        FOLDER: release/wwwroot

• در نهایت فایل را کامیت کنید

مرحله 4 : برسی فرایند

بعد از مراحل قبل این گزینه در تب Actions شما مشخص میشود ، در صورت سبز شدن یعنی فرایند به درستی انجام شده است.

پس از سبز شده گزینه بالا گزینه دیگری نمایش داده میشود که برای برنچ gh-page است ، وارد آن شوید.

تبریک فرایند شما به درستی انجام شده و از Url نمایش داده شده قابل مشاهده است.

همچنین فایل های پابلیش شده در برنچ gh-page قابل مشاهده هستند.

نکته : هر بار شما کد های خود را تغییر داده و در برنچ مستر مثل همیشه کامیت کنید ، فایل ها مجددا پابلیش شده و GitHub Pages شما به طور خود کار بروز میشود.

مرحله آخر : ❤️حمایت❤️

اگر این مقاله به شما کمک کرد و از آن لذت بردید لطفا با کامت ها و لایک های خود بنده را دلگرم کنید.❤️❤️❤️
و در صورت امکان به این پروژه بنده توی گیت هاب ستاره بدین
https://github.com/mosha99/DeployToGitHubTest