{"id":406,"date":"2025-04-16T09:15:45","date_gmt":"2025-04-16T09:15:45","guid":{"rendered":"https:\/\/ajnock.com\/?p=406"},"modified":"2025-04-16T09:15:45","modified_gmt":"2025-04-16T09:15:45","slug":"%e0%b8%a7%e0%b8%b4%e0%b8%98%e0%b8%b5-deploy-%e0%b9%80%e0%b8%a7%e0%b9%87%e0%b8%9a%e0%b9%84%e0%b8%9b%e0%b8%a2%e0%b8%b1%e0%b8%87-github-pages-vercel","status":"publish","type":"post","link":"https:\/\/ajnock.com\/?p=406","title":{"rendered":"\u0e27\u0e34\u0e18\u0e35 Deploy \u0e40\u0e27\u0e47\u0e1a\u0e44\u0e1b\u0e22\u0e31\u0e07 GitHub Pages \/ Vercel"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><strong>\u0e2d\u0e31\u0e1b\u0e42\u0e2b\u0e25\u0e14\u0e40\u0e27\u0e47\u0e1a\u0e43\u0e2b\u0e49\u0e04\u0e19\u0e17\u0e31\u0e49\u0e07\u0e42\u0e25\u0e01\u0e40\u0e2b\u0e47\u0e19\u0e44\u0e14\u0e49\u0e43\u0e19\u0e44\u0e21\u0e48\u0e01\u0e35\u0e48\u0e04\u0e25\u0e34\u0e01<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u0e40\u0e2b\u0e21\u0e32\u0e30\u0e01\u0e31\u0e1a\u0e1c\u0e39\u0e49\u0e17\u0e35\u0e48\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c\u0e40\u0e2a\u0e23\u0e47\u0e08\u0e41\u0e25\u0e49\u0e27 \u0e41\u0e25\u0e30\u0e2d\u0e22\u0e32\u0e01\u0e40\u0e2d\u0e32\u0e40\u0e27\u0e47\u0e1a\u0e02\u0e36\u0e49\u0e19\u0e2d\u0e2d\u0e19\u0e44\u0e25\u0e19\u0e4c\u0e1f\u0e23\u0e35 \u0e42\u0e14\u0e22\u0e44\u0e21\u0e48\u0e15\u0e49\u0e2d\u0e07\u0e21\u0e35\u0e40\u0e0b\u0e34\u0e23\u0e4c\u0e1f\u0e40\u0e27\u0e2d\u0e23\u0e4c\u0e02\u0e2d\u0e07\u0e15\u0e31\u0e27\u0e40\u0e2d\u0e07<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\u0e15\u0e31\u0e27\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e40\u0e27\u0e47\u0e1a\u0e17\u0e35\u0e48\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16 Deploy \u0e44\u0e14\u0e49<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u0e40\u0e27\u0e47\u0e1a HTML\/CSS\/JS \u0e18\u0e23\u0e23\u0e21\u0e14\u0e32 (Static Website)<\/li>\n\n\n\n<li>React, Vue, Next.js, Svelte (\u0e1c\u0e48\u0e32\u0e19 Vercel)<\/li>\n\n\n\n<li>\u0e40\u0e27\u0e47\u0e1a Portfolio \/ Resume \/ \u0e2b\u0e19\u0e49\u0e32\u0e41\u0e19\u0e30\u0e19\u0e33\u0e15\u0e31\u0e27<\/li>\n\n\n\n<li>\u0e40\u0e27\u0e47\u0e1a\u0e42\u0e1b\u0e23\u0e40\u0e08\u0e01\u0e15\u0e4c\u0e19\u0e31\u0e01\u0e28\u0e36\u0e01\u0e29\u0e32<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Part 1: Deploy \u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c\u0e41\u0e1a\u0e1a Static \u0e14\u0e49\u0e27\u0e22 <strong>GitHub Pages<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 1: \u0e2a\u0e23\u0e49\u0e32\u0e07 GitHub Repository<\/strong><\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u0e44\u0e1b\u0e17\u0e35\u0e48 <a class=\"\" href=\"https:\/\/github.com\" target=\"_blank\" rel=\"noopener\">https:\/\/github.com<\/a> \u0e41\u0e25\u0e49\u0e27\u0e2a\u0e21\u0e31\u0e04\u0e23 \/ \u0e25\u0e47\u0e2d\u0e01\u0e2d\u0e34\u0e19<\/li>\n\n\n\n<li>\u0e04\u0e25\u0e34\u0e01 \u201cNew\u201d \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e2a\u0e23\u0e49\u0e32\u0e07 Repository \u0e43\u0e2b\u0e21\u0e48<\/li>\n\n\n\n<li>\u0e15\u0e31\u0e49\u0e07\u0e0a\u0e37\u0e48\u0e2d \u0e40\u0e0a\u0e48\u0e19 <code>my-portfolio<\/code><\/li>\n\n\n\n<li>\u2705 \u0e40\u0e25\u0e37\u0e2d\u0e01 <em>&#8220;Initialize with a README&#8221;<\/em><\/li>\n\n\n\n<li>\u0e01\u0e14 \u201cCreate Repository\u201d<\/li>\n<\/ol>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 2: \u0e2d\u0e31\u0e1b\u0e42\u0e2b\u0e25\u0e14\u0e44\u0e1f\u0e25\u0e4c\u0e40\u0e27\u0e47\u0e1a<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u0e16\u0e49\u0e32\u0e43\u0e0a\u0e49 VS Code \u0e2b\u0e23\u0e37\u0e2d Git:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><code>git clone https:\/\/github.com\/yourname\/my-portfolio\ncd my-portfolio\n# \u0e27\u0e32\u0e07\u0e44\u0e1f\u0e25\u0e4c index.html, style.css, \u0e23\u0e39\u0e1b \u0e2f\u0e25\u0e2f \u0e25\u0e07\u0e44\u0e1b\ngit add .\ngit commit -m \"\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e44\u0e1f\u0e25\u0e4c\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c\"\ngit push origin main\n<\/code><\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 3: \u0e40\u0e1b\u0e34\u0e14 GitHub Pages<\/strong><\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u0e44\u0e1b\u0e17\u0e35\u0e48\u0e2b\u0e19\u0e49\u0e32 Repo > \u0e04\u0e25\u0e34\u0e01\u0e41\u0e17\u0e47\u0e1a <strong>Settings<\/strong><\/li>\n\n\n\n<li>\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e40\u0e21\u0e19\u0e39\u0e0b\u0e49\u0e32\u0e22: <strong>Pages<\/strong><\/li>\n\n\n\n<li>\u0e43\u0e19\u0e2b\u0e31\u0e27\u0e02\u0e49\u0e2d <strong>Source<\/strong> \u0e43\u0e2b\u0e49\u0e40\u0e25\u0e37\u0e2d\u0e01 <code>Branch: main<\/code> \u0e41\u0e25\u0e30 <code>\/root<\/code><\/li>\n\n\n\n<li>\u0e01\u0e14 Save \u2192 GitHub \u0e08\u0e30\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e25\u0e34\u0e07\u0e01\u0e4c\u0e40\u0e27\u0e47\u0e1a\u0e43\u0e2b\u0e49\u0e20\u0e32\u0e22\u0e43\u0e19 1 \u0e19\u0e32\u0e17\u0e35<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>\u0e25\u0e34\u0e07\u0e01\u0e4c\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c\u0e02\u0e2d\u0e07\u0e04\u0e38\u0e13\u0e08\u0e30\u0e40\u0e1b\u0e47\u0e19\u0e41\u0e1a\u0e1a\u0e19\u0e35\u0e49:<\/strong><\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code><code>https:\/\/yourname.github.io\/my-portfolio\n<\/code><\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Part 2: Deploy \u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c React\/Vue\/Next.js \u0e14\u0e49\u0e27\u0e22 <strong>Vercel<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Vercel<\/strong> \u0e40\u0e2b\u0e21\u0e32\u0e30\u0e01\u0e31\u0e1a\u0e40\u0e27\u0e47\u0e1a\u0e17\u0e35\u0e48\u0e40\u0e02\u0e35\u0e22\u0e19\u0e14\u0e49\u0e27\u0e22 <strong>Framework JS<\/strong> \u0e40\u0e0a\u0e48\u0e19 React, Next.js, Vue \u0e2f\u0e25\u0e2f<br>\u0e41\u0e25\u0e30\u0e43\u0e0a\u0e49\u0e01\u0e32\u0e23 build \u0e01\u0e48\u0e2d\u0e19\u0e19\u0e33\u0e02\u0e36\u0e49\u0e19<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 1: \u0e2a\u0e21\u0e31\u0e04\u0e23 Vercel<\/strong><\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u0e44\u0e1b\u0e17\u0e35\u0e48 <a class=\"\" href=\"https:\/\/vercel.com\" target=\"_blank\" rel=\"noopener\">https:\/\/vercel.com<\/a><\/li>\n\n\n\n<li>\u0e25\u0e47\u0e2d\u0e01\u0e2d\u0e34\u0e19\u0e14\u0e49\u0e27\u0e22 GitHub<\/li>\n\n\n\n<li>\u0e01\u0e14 \u201cNew Project\u201d \u2192 \u0e40\u0e25\u0e37\u0e2d\u0e01 Repo \u0e17\u0e35\u0e48\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23 deploy<\/li>\n<\/ol>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 2: \u0e15\u0e31\u0e49\u0e07\u0e04\u0e48\u0e32\u0e41\u0e25\u0e30 Deploy<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u0e2b\u0e32\u0e01\u0e43\u0e0a\u0e49 Next.js, Vercel \u0e08\u0e30\u0e15\u0e23\u0e27\u0e08\u0e2d\u0e31\u0e15\u0e42\u0e19\u0e21\u0e31\u0e15\u0e34<\/li>\n\n\n\n<li>\u0e2b\u0e32\u0e01\u0e43\u0e0a\u0e49 React: \u0e15\u0e49\u0e2d\u0e07\u0e21\u0e35\u0e44\u0e1f\u0e25\u0e4c <code>index.html<\/code> \u0e2d\u0e22\u0e39\u0e48\u0e43\u0e19\u0e42\u0e1f\u0e25\u0e40\u0e14\u0e2d\u0e23\u0e4c <code>build<\/code><\/li>\n\n\n\n<li>\u0e40\u0e25\u0e37\u0e2d\u0e01 Branch \u2192 \u0e01\u0e14 Deploy<\/li>\n\n\n\n<li>\u0e23\u0e2d\u0e44\u0e21\u0e48\u0e01\u0e35\u0e48\u0e27\u0e34\u0e19\u0e32\u0e17\u0e35 \u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c\u0e02\u0e2d\u0e07\u0e04\u0e38\u0e13\u0e01\u0e47\u0e08\u0e30\u0e2d\u0e2d\u0e19\u0e44\u0e25\u0e19\u0e4c\u0e41\u0e25\u0e49\u0e27!<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>\u0e15\u0e31\u0e27\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e25\u0e34\u0e07\u0e01\u0e4c\u0e40\u0e27\u0e47\u0e1a\u0e08\u0e32\u0e01 Vercel:<\/strong><\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code><code>https:\/\/my-portfolio.vercel.app\n<\/code><\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\u0e15\u0e32\u0e23\u0e32\u0e07\u0e40\u0e1b\u0e23\u0e35\u0e22\u0e1a\u0e40\u0e17\u0e35\u0e22\u0e1a GitHub Pages vs Vercel<\/h2>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>\u0e23\u0e32\u0e22\u0e01\u0e32\u0e23<\/th><th>GitHub Pages<\/th><th>Vercel<\/th><\/tr><\/thead><tbody><tr><td>\u0e40\u0e2b\u0e21\u0e32\u0e30\u0e01\u0e31\u0e1a<\/td><td>\u0e40\u0e27\u0e47\u0e1a Static HTML<\/td><td>React, Next.js, Vue<\/td><\/tr><tr><td>\u0e04\u0e27\u0e32\u0e21\u0e07\u0e48\u0e32\u0e22<\/td><td>\u0e07\u0e48\u0e32\u0e22 (\u0e1c\u0e48\u0e32\u0e19 Settings)<\/td><td>\u0e07\u0e48\u0e32\u0e22\u0e21\u0e32\u0e01 (\u0e25\u0e32\u0e01\u0e27\u0e32\u0e07\u0e44\u0e14\u0e49\u0e40\u0e25\u0e22)<\/td><\/tr><tr><td>\u0e23\u0e2d\u0e07\u0e23\u0e31\u0e1a custom domain<\/td><td>\u0e44\u0e14\u0e49<\/td><td>\u0e44\u0e14\u0e49<\/td><\/tr><tr><td>\u0e04\u0e27\u0e32\u0e21\u0e40\u0e23\u0e47\u0e27 CDN<\/td><td>\u0e14\u0e35<\/td><td>\u0e14\u0e35\u0e40\u0e22\u0e35\u0e48\u0e22\u0e21<\/td><\/tr><tr><td>\u0e23\u0e2d\u0e07\u0e23\u0e31\u0e1a Build<\/td><td>\u0e44\u0e21\u0e48<\/td><td>\u0e44\u0e14\u0e49 (\u0e40\u0e0a\u0e48\u0e19 <code>npm run build<\/code>)<\/td><\/tr><tr><td>\u0e1f\u0e23\u0e35\u0e15\u0e25\u0e2d\u0e14\u0e0a\u0e35\u0e1e<\/td><td>\u0e43\u0e0a\u0e48<\/td><td>\u0e43\u0e0a\u0e48 (\u0e21\u0e35\u0e41\u0e1c\u0e19 Pro \u0e40\u0e1e\u0e34\u0e48\u0e21\u0e1f\u0e35\u0e40\u0e08\u0e2d\u0e23\u0e4c)<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\u0e2a\u0e23\u0e38\u0e1b<\/h2>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>\u0e16\u0e49\u0e32\u0e04\u0e38\u0e13&#8230;<\/th><th>\u0e04\u0e27\u0e23\u0e43\u0e0a\u0e49<\/th><\/tr><\/thead><tbody><tr><td>\u0e21\u0e35\u0e41\u0e04\u0e48 HTML\/CSS\/JS<\/td><td>GitHub Pages<\/td><\/tr><tr><td>\u0e43\u0e0a\u0e49 React \/ Vue \/ Next.js<\/td><td>Vercel<\/td><\/tr><tr><td>\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23 build \u0e41\u0e25\u0e49\u0e27 deploy \u0e2d\u0e31\u0e15\u0e42\u0e19\u0e21\u0e31\u0e15\u0e34<\/td><td>Vercel<\/td><\/tr><tr><td>\u0e0a\u0e2d\u0e1a\u0e43\u0e0a\u0e49 GitHub \u0e2d\u0e22\u0e39\u0e48\u0e41\u0e25\u0e49\u0e27<\/td><td>GitHub Pages<\/td><\/tr><tr><td>\u0e2d\u0e22\u0e32\u0e01\u0e43\u0e2b\u0e49\u0e40\u0e27\u0e47\u0e1a\u0e2d\u0e2d\u0e19\u0e44\u0e25\u0e19\u0e4c\u0e20\u0e32\u0e22\u0e43\u0e19 1 \u0e19\u0e32\u0e17\u0e35<\/td><td>Vercel<\/td><\/tr><\/tbody><\/table><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>\u0e2d\u0e31\u0e1b\u0e42\u0e2b\u0e25\u0e14\u0e40\u0e27\u0e47\u0e1a\u0e43\u0e2b\u0e49\u0e04\u0e19\u0e17\u0e31\u0e49\u0e07\u0e42\u0e25\u0e01\u0e40\u0e2b\u0e47\u0e19\u0e44\u0e14\u0e49\u0e43\u0e19\u0e44\u0e21\u0e48\u0e01\u0e35\u0e48\u0e04\u0e25\u0e34\u0e01 \u0e40\u0e2b\u0e21\u0e32\u0e30\u0e01\u0e31\u0e1a\u0e1c\u0e39\u0e49\u0e17 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6,61],"tags":[69,67,24,72,65],"class_list":["post-406","post","type-post","status-publish","format-standard","hentry","category-computer-tips","category-programming","tag-git","tag-github","tag-opensource","tag-72","tag-65"],"_links":{"self":[{"href":"https:\/\/ajnock.com\/index.php?rest_route=\/wp\/v2\/posts\/406","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ajnock.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ajnock.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ajnock.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ajnock.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=406"}],"version-history":[{"count":1,"href":"https:\/\/ajnock.com\/index.php?rest_route=\/wp\/v2\/posts\/406\/revisions"}],"predecessor-version":[{"id":407,"href":"https:\/\/ajnock.com\/index.php?rest_route=\/wp\/v2\/posts\/406\/revisions\/407"}],"wp:attachment":[{"href":"https:\/\/ajnock.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=406"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ajnock.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=406"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ajnock.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=406"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}