This is my second personal website better than before (hope so) in this assignment i'm not talking about my personal website but about how to deploy a website with costume domain name

This Process How To Get You Repository From Github To Local Using Git Clone Don't Forget To Install GitBash If You Using Windows OS

If You See This On GitBash It Mean Git Clone Success

Add Git Branch And Open Your Vscode As You Can See On The Second Image I Want To Make Branching Main-> Develop -> Front_End | Back_End. I Want To Make Two Branches On Develop So I Need To "Git Checkout Develop" So I Can Make Branch On Develop Branch (See First Image In The Pink Circle That Mean You On Develop Branch)

If Success To Create Branch You Can See On Git Branch. Open Your Vscode To Publish Your Branch To Github As You Can See On The Second Image In The Blue Circle It Say Publish To Github If You Click That It Will Be Automatically Publish Branch To Your Github You Can Check It On Branches Menu

After Publish Branch to Github open your Github So You Can See The Branch You Added

You Have To Login In To Netlify Using Your Github Account and Go To Menu New Site and choose Import an Existing Project

After you choose import an existring Project choose from github so netlify can connect to your organization or repository on your github

Choose Branch And I Choose Brain Main For Production On Netlify (It Mean When You Push New Code On Main Branch, The Website Will Change Automatically So You Don't Have To Deploy Manually) Scroll Down And You Can See Deploy Site It Will Automatically Deploy To Your Netlify like the second picture

Time To Push To Front End In The Orange Circle Is Your Folder From Repository You Can Add Some File You Need. In The Blue Circle As You Can See On Branch Menu You See 4 Branches (Main, Develop, Front_End And Back End) Which We Have Previously Created In GitBash. Don't Forget Before You Push You Have To See Where Are You At (You Can See In The Yellow Circle) If You On Branch Main You Have To Click In The Pink Circle To Move To The Branch Target. After You Make Sure You Are On The Branch Front_End You Can Commit To Your Repo On Branch Front_End Don't Forget To Leave Some Message And You Can Click Commit. After Commit You Can See Sync Button You Can Click It And Poof Files Will Automatically Update To Your Branch.

Tadaaaaa It Will Show On Your Branch

And It's Time To Merge With Develop Branch. As You Can See In This Picture We Want To Merge With Develop Branch Don't Forget To Change Branch We Want To Merge (Like In The Blue Circle I Want To Merge With Develop I Change To Branch Develop) Be Careful Before You Merge You Have To Read Carefully Because The Default Is Main And It Will Be Merge With Main. After We Make Sure About Everything You Can Make A Pull Request (Like In The Red Circle You Just Have To Click It).

As You Can See In This Page We Can See Whether There Is A Conflict Or Not If All Green You Can Go To Next Step If There's A Red It Means Have A Conflict On Something And You Have To Make Sure Again Like In The Yellow Circle Target : Develop Branch From : Front_End Branch. And You Can Put Some Comment Too Before You Merge To Pull Request If You Scroll Down You Can See The Comment Column But Sorry That Is An Image You Can't Scroll It Down.

Now It's For Backend Time. Open You Vscode Again And Now You Have To Choose Back_End Branch (As You Can See I On Main Bran Like In The Pink Circle) As You Can See I Add Some Javascript File After Everything Done You Can Push Like We Did Before In Front End Push.

It's Time For Pull Request From Back_End Branch To Develop Branch Like This Image

And You Can See Complete Merge On Develop Branch. You Have To Make Sure Every Single Thing Before You Merge To Main. If Everything Is Complete We Can Proceed To The Next Step To Pull Request To Main

As Same Like Before You Can See On This Page You Can Put Some Comment Before You Merge To Main

And Voilaaaa Now Develop Branch Just Merge With Main Branch

Open Netlify On Your Browser You Can Click In The Blue Circle And It Will Open Your Browser To Preview Latest Update On You Github Main Branch

Now Time To Change Domain Name. First Thing You Have To Buy Domain Name. Just Buy It From Niagahoster And It Will Show Like First Image. After You Buy Domain Name You Can Put Server Name On It I Put Server Name From Cloudflare Before You Put Server Name From Cloudflare To Niagahoster You Have To Signup On Cloudflare So You Will Get Server Name And Put It On Niagahoster.

Before Setting Server Name

After Setting Server Name

Now Go To Cloudflare And You Have To Setting Your DNS So It Will Connect To Your Netlify This Is An Example Of DNS External Setting Choose DNS Menu On Cloudflare And Add Record. As You Can See In This Image It Have Type Column, Name And Target. You Just Choose Cname On Type Column, On Name Column You Just Have To Enter The Domain Name That Was Previously Purchased From Niagahoster, And Target Column Enter Domain Name From Netlify. Add Record Again But This Time You Enter The Name Column With Www And Target Is Your Domain Name From Niagahoster. And It Will Show Like This Image. You Just Have To Wait Max 24 Hours And Don't Forget To Check Your Email Cloudflare Will Sent You Verify Account.

Check Home Page On Cloudflare If There's Nothing Wrong, You Can See Your Domain Name Active Like This Picture

Status Pending

Status Active

Back To Netlify And Go To Domain Setting You Just Have To Add You Domain Name From Niagahoster And You Have To Wait Like 1 Hour Before Your Domain Netlify (The Random One) Change To Domain Name From Niaga Hoster. And You Can See DNS Status on Netlify

You Can See DNS Status That We Have Created Before On Cloudflare

Annddd The Last Thing You Can Open Your Browser And Enter Your Costume Domain Name From Niagahoster Voilaaaa It Will Look Like This

Hilman Syarifuin Fadilah www.onlytest.site