WEBVTT
Kind: captions
Language: zh-TW

00:00:01.133 --> 00:00:02.533
只要 10 分鐘就能做出

00:00:02.533 --> 00:00:05.200
價值 10 萬的動態沉浸式網站

00:00:05.200 --> 00:00:06.900
而且不用花任何費用

00:00:06.900 --> 00:00:07.700
今天這部影片

00:00:07.700 --> 00:00:10.900
我會分享 VSCode 加 Claude Code 的使用方法

00:00:10.900 --> 00:00:14.100
再教你使用超強的網頁設計 Claude Skill

00:00:14.100 --> 00:00:17.100
讓你做出不同於以往的 Vibe Coding 網站

00:00:17.100 --> 00:00:20.100
直接屌打其他 AI 網頁設計作品

00:00:20.100 --> 00:00:23.800
示範用 Nano Banana 製作高級古典照片

00:00:23.800 --> 00:00:25.900
用 Veo 做出導演級影片

00:00:25.900 --> 00:00:29.333
最後教你把網站部署到正式的主機環境

00:00:29.333 --> 00:00:31.900
讓訪客可直接在線瀏覽

00:00:31.900 --> 00:00:32.833
準備好了嗎？

00:00:32.833 --> 00:00:34.200
我們就直接開始吧！

00:00:37.300 --> 00:00:40.100
首先來看一下今天的教學流程

00:00:40.100 --> 00:00:42.800
第一步我們會帶大家安裝 VSCode

00:00:42.800 --> 00:00:43.900
加 Claude Code

00:00:43.900 --> 00:00:45.700
再來我們會安裝 Claude

00:00:45.700 --> 00:00:47.000
裡面有一個 Skill 指令

00:00:47.000 --> 00:00:49.500
這 Skill 可以幫我們美化稍後要做的網站

00:00:49.500 --> 00:00:51.100
我們會透過 Flow 去生成

00:00:51.100 --> 00:00:53.700
所謂的網站圖片還有影片

00:00:53.700 --> 00:00:56.233
他是基於 Nano Banana 的功能

00:00:56.233 --> 00:00:58.300
再來使用 Claude 進行網頁設計

00:00:58.300 --> 00:00:59.600
當網站做好之後

00:00:59.600 --> 00:01:01.600
我們會分兩個方法跟大家做分享

00:01:01.600 --> 00:01:02.600
首先方法一

00:01:02.600 --> 00:01:04.000
我們會上傳到 GitHub

00:01:04.000 --> 00:01:06.600
加上 Netlify 進行網站部署

00:01:06.600 --> 00:01:07.400
方法二

00:01:07.400 --> 00:01:09.700
我們會直接上傳到比較正式的主機

00:01:09.700 --> 00:01:12.300
這邊我們會用 hosting.com 跟大家做分享

00:01:12.300 --> 00:01:14.200
以上就是今天的教學流程

00:01:14.200 --> 00:01:17.333
這個章節會帶大家來開啟 VSCode

00:01:17.333 --> 00:01:18.700
跟安裝 Claude Code

00:01:19.133 --> 00:01:22.000
我們等一下會先安裝這個 IDE 軟體

00:01:22.000 --> 00:01:23.200
這個軟體滿方便的

00:01:23.200 --> 00:01:25.400
是可以讓我們編寫一些程式

00:01:25.400 --> 00:01:27.233
當然我們等一下不會寫到程式碼

00:01:27.233 --> 00:01:31.000
主要是會在他裡面置入 Claude Code 的對話視窗

00:01:31.000 --> 00:01:34.033
這樣你之後如果真的有編輯需求的話

00:01:34.033 --> 00:01:35.133
也會比較方便

00:01:35.133 --> 00:01:37.033
相關的連結我一樣會放在下面

00:01:37.033 --> 00:01:40.733
我目前是已經把這個 VSCode 編輯器給下載起來了

00:01:40.733 --> 00:01:42.500
他這邊支援滿多種外掛

00:01:42.500 --> 00:01:44.300
我們可以看到左手邊這個 EXTENSIONS

00:01:44.300 --> 00:01:45.900
裡面可以讓我們安裝

00:01:45.900 --> 00:01:48.633
滿多種都是支援這個編輯器的

00:01:48.633 --> 00:01:52.300
我這邊可以直接搜尋跟 Claude Code 相關的小功能

00:01:52.300 --> 00:01:55.633
這個功能可以幫助我在這個編輯器裡面

00:01:55.633 --> 00:01:57.100
直接跟 AI 做對話

00:01:57.100 --> 00:01:59.133
我目前是已經下載完畢了

00:01:59.133 --> 00:02:01.400
我這邊就直接可以看到右上角

00:02:01.400 --> 00:02:03.100
他會有一個小小的 icon

00:02:03.100 --> 00:02:04.333
我就點選他

00:02:04.333 --> 00:02:06.900
這個時候我就可以直接進入到對話模式

00:02:06.900 --> 00:02:08.900
他可能會要求你進行登入

00:02:08.900 --> 00:02:11.500
因為要使用 Claude Code 至少要 Pro 版的方案

00:02:11.933 --> 00:02:14.200
這部分大家都可以自行再去做了解

00:02:14.200 --> 00:02:17.033
我們目前前置作業就已經完成了

00:02:17.033 --> 00:02:19.700
接著我們等一下可以開啟一個專案

00:02:19.700 --> 00:02:22.100
把相關的程式都放在裡面

00:02:22.100 --> 00:02:25.833
所以我先在桌面建立一個相關的資料夾

00:02:25.833 --> 00:02:27.600
我這邊直接開啟我的資料夾

00:02:27.600 --> 00:02:29.500
找到剛剛所新增的資料夾

00:02:29.500 --> 00:02:30.200
然後打開

00:02:30.200 --> 00:02:34.100
稍後我們的專案檔案就會統一放在這個資料夾裡面

00:02:34.100 --> 00:02:37.400
這邊的這個路徑跟我桌面的這個資料夾

00:02:37.400 --> 00:02:38.400
他是連動的

00:02:38.400 --> 00:02:39.633
目前都是空的

00:02:39.633 --> 00:02:42.133
稍後我們會把一些相關的影片

00:02:42.133 --> 00:02:44.400
圖片、程式都擺在裡面這樣子

00:02:44.400 --> 00:02:46.700
這章節會教大家安裝 skills

00:02:46.700 --> 00:02:48.400
這個 skills 是基於 Claude

00:02:48.400 --> 00:02:51.900
目的是可以幫我們強化我們網頁設計上的質感

00:02:51.900 --> 00:02:54.000
他裡面有個 SKILL 檔案我們可以點進來

00:02:54.000 --> 00:02:57.100
他這個 skills 會幫我們把我們的 Prompt 指令強化

00:02:57.100 --> 00:02:59.000
AI 所生成出來的網頁

00:02:59.000 --> 00:03:01.300
有時候會覺得很一般或者是不好看

00:03:01.300 --> 00:03:04.033
他可以幫我們強化所謂的像風格性

00:03:04.033 --> 00:03:05.200
差異化

00:03:05.200 --> 00:03:06.200
還有前端美學

00:03:06.200 --> 00:03:09.633
會幫我們優化所謂的字體、色彩或是動態效果等等

00:03:10.033 --> 00:03:12.100
我們稍後就會來安裝這個 skills

00:03:12.100 --> 00:03:14.800
你可以回來到你的這個 ID 編輯器

00:03:14.800 --> 00:03:16.600
直接請 AI 幫我們做安裝

00:03:16.600 --> 00:03:17.800
剛好安裝這個 Claude

00:03:17.800 --> 00:03:19.300
這個時候我們可以把他呼喚出來

00:03:19.300 --> 00:03:21.733
你在右手邊其實有個小小的摺疊框

00:03:21.733 --> 00:03:23.400
你可以把這個視窗給叫出來

00:03:23.400 --> 00:03:25.600
這邊也會出現 CLAUDE 的這個英文

00:03:25.600 --> 00:03:27.800
就點選之後就可以進入到對話模式

00:03:27.800 --> 00:03:31.200
另外一種方式你可以從剛剛的這個外掛安裝專區

00:03:31.200 --> 00:03:33.700
一樣你找到剛剛的外掛再點一下

00:03:33.700 --> 00:03:34.800
他就會把他叫出來

00:03:34.800 --> 00:03:36.200
他這邊一樣也有 icon

00:03:36.200 --> 00:03:38.200
你點選之後一樣也可以把視窗叫出來

00:03:38.200 --> 00:03:39.600
所以他有滿多種方法的

00:03:39.600 --> 00:03:42.200
我們稍後會直接跟這個 Claude 對話

00:03:42.200 --> 00:03:44.600
請他幫我們安裝剛剛的那個 Skill

00:03:44.600 --> 00:03:46.200
我剛剛輸入的這串 Prompt

00:03:46.200 --> 00:03:49.800
就是請他幫我在這個專案層級下安裝這個 Skill

00:03:49.800 --> 00:03:50.800
因為我們目前左手邊

00:03:50.800 --> 00:03:53.000
是已經綁定桌面上的這個資料夾

00:03:53.000 --> 00:03:54.933
所以相關的檔案都會在裡面

00:03:54.933 --> 00:03:57.400
你也可以取名比較簡單的都是 OK 的

00:03:57.400 --> 00:03:59.900
然後這個 Skill 的來源會是這個連結

00:03:59.900 --> 00:04:02.000
一樣會放在下方資訊欄給大家

00:04:02.500 --> 00:04:04.533
完成之後你就可以直接點選送出

00:04:04.533 --> 00:04:08.000
我們剛剛已經順利把這個 Skill 給安裝起來了

00:04:08.000 --> 00:04:09.700
然後他也幫我們把這個檔案

00:04:09.700 --> 00:04:12.333
放在我們想要的專案層級裡面

00:04:12.333 --> 00:04:15.500
我們可以看到左手邊這是我們所建立的專案層級

00:04:15.500 --> 00:04:18.600
然後裡面你會看到他多出一個 .claude 的檔案

00:04:18.600 --> 00:04:20.500
進來之後他裡面會有 skills

00:04:20.500 --> 00:04:24.200
SKILL 裡面就會是我們目前畫面所看到的這個

00:04:24.200 --> 00:04:25.900
剛剛從線上

00:04:25.900 --> 00:04:29.200
安裝下來強化網頁設計的這個 Prompt 指令

00:04:29.200 --> 00:04:31.733
我們稍後就會再來運用他

00:04:31.733 --> 00:04:33.900
這章節會教大家如何透過 Flow

00:04:33.900 --> 00:04:36.100
我們去生成圖片的部分

00:04:36.100 --> 00:04:39.133
有圖片之後我們才有辦法把他去串成影片

00:04:39.133 --> 00:04:40.633
我們等一下會用到的這款

00:04:40.633 --> 00:04:43.333
是 Google 官方所開發的 Flow 軟體

00:04:43.333 --> 00:04:46.400
他這個 AI 軟體是基於這個 Nano Banana

00:04:46.400 --> 00:04:49.100
包括 Veo 去生成所謂的圖片跟影片

00:04:49.100 --> 00:04:51.800
一開始的話你可以點選下方的這個新建項目

00:04:51.800 --> 00:04:52.633
首先的話

00:04:52.633 --> 00:04:56.800
他下方他支援是用圖片的方式或是用影片的方式

00:04:56.800 --> 00:04:58.000
我們會先用圖片的方式

00:04:58.000 --> 00:04:59.200
他支援不同的尺寸

00:04:59.200 --> 00:05:01.100
我們目前就先用 16:9

00:05:01.100 --> 00:05:03.700
然後我們可以先請他幫我們生成兩張

00:05:03.700 --> 00:05:06.600
這邊我們可以選擇他使用的這個模型

00:05:06.600 --> 00:05:08.400
我們就用這個 Pro 版

00:05:08.400 --> 00:05:11.700
他目前這個行為會耗費我們就是 0 點的點數

00:05:11.700 --> 00:05:13.700
所以可以持續的去做測試

00:05:13.700 --> 00:05:16.200
這個 Docs 是我們幫大家準備好的這個指令

00:05:16.200 --> 00:05:18.800
如果你有需要用到一樣在下方的資訊欄會找到

00:05:18.800 --> 00:05:20.800
首先透過 Flow 去生成結尾圖

00:05:20.800 --> 00:05:23.800
結尾圖的部分我們就直接先複製起來他的指令

00:05:23.800 --> 00:05:25.100
把他貼上來

00:05:25.100 --> 00:05:26.400
這個結尾圖

00:05:26.400 --> 00:05:28.400
其實對應我們剛剛的這個網站成品

00:05:28.400 --> 00:05:30.600
就會是少女他在跳舞

00:05:30.600 --> 00:05:31.833
這部分是他的結尾

00:05:31.833 --> 00:05:34.000
然後我們開頭的話會是一個蓋起來的盒子

00:05:34.000 --> 00:05:36.600
等一下我們會先把這兩張圖都先做出來

00:05:36.600 --> 00:05:38.000
我們就先進行送出

00:05:38.000 --> 00:05:39.600
系統幫我們生成兩張圖片

00:05:39.600 --> 00:05:41.400
目前看起來右邊會比較適合

00:05:41.400 --> 00:05:43.400
因為他是整個畫面都有放進來

00:05:43.733 --> 00:05:45.400
這個就是我們的結尾圖片

00:05:45.400 --> 00:05:49.100
接著我們可以在這個結尾圖片的基礎之上

00:05:49.100 --> 00:05:51.800
我們請他幫我們去生成所謂的這個開頭圖

00:05:51.800 --> 00:05:52.933
把他貼上來

00:05:52.933 --> 00:05:56.600
這個指令是希望他幫我生成一張盒子蓋著的版本

00:05:56.600 --> 00:05:57.900
我們就直接送出

00:05:57.900 --> 00:05:59.400
這個開頭圖片已經完成了

00:05:59.400 --> 00:06:02.133
你可以點選右邊的兩張圖我們進行下載

00:06:02.133 --> 00:06:03.833
下載完畢之後這兩個檔案

00:06:03.833 --> 00:06:06.200
你就可以直接把他放在你的專案資料夾裡面

00:06:06.200 --> 00:06:10.000
這章節會來教大家如何去生成影片的部分

00:06:10.000 --> 00:06:12.000
我們可以看到下方切成視頻

00:06:12.000 --> 00:06:13.800
然後選擇 16 比 9 的方式

00:06:13.800 --> 00:06:15.900
我們來生成一個影片就 OK 了

00:06:15.900 --> 00:06:18.000
這個影片他本身會耗費點數

00:06:18.000 --> 00:06:20.200
所以大家也可以再留意一下

00:06:20.200 --> 00:06:22.600
這邊支援開頭跟結束

00:06:22.600 --> 00:06:24.200
點擊之後去做指定

00:06:24.200 --> 00:06:27.000
剛剛已經把這個開始跟結尾圖片都放進來

00:06:27.000 --> 00:06:29.333
影片生成的 Prompt 放在這個地方

00:06:29.333 --> 00:06:31.400
主要我們就是針對影片的過程

00:06:31.400 --> 00:06:33.500
去做一個比較詳細的描述

00:06:33.500 --> 00:06:34.333
複製

00:06:34.333 --> 00:06:36.000
回來我們進行貼上

00:06:36.000 --> 00:06:38.400
都確認沒問題之後就可以直接送出

00:06:38.400 --> 00:06:40.400
我們剛剛已經把影片生成出來了

00:06:40.400 --> 00:06:44.000
進來之後他也會展示動畫所生成的一個結果

00:06:44.000 --> 00:06:47.600
我們稍後就會來把這個影片放在網站上

00:06:47.600 --> 00:06:49.800
這章節要來教大家如何用 Claude

00:06:49.800 --> 00:06:51.600
製作一個精美的網站

00:06:51.600 --> 00:06:54.400
我剛剛已經把相關的這個圖片

00:06:54.400 --> 00:06:57.633
比如說是開頭的圖片跟結尾的圖片

00:06:57.633 --> 00:06:59.800
然後還有我們所製作出來這個影片

00:06:59.800 --> 00:07:01.733
我全部放在專案資料夾裡面

00:07:01.733 --> 00:07:03.600
剛剛所提到的這個 skills

00:07:03.600 --> 00:07:05.600
也是配置在這個專案層級下面

00:07:05.600 --> 00:07:08.300
我們這邊也幫大家貼心的準備相關指令

00:07:08.300 --> 00:07:09.800
我們會分成兩個步驟

00:07:09.800 --> 00:07:12.800
首先第一個步驟是把影片切成多張圖片

00:07:12.800 --> 00:07:15.700
我們稍後會用這些圖片去做成這個動態網站

00:07:15.700 --> 00:07:18.800
也就是上方這個動態的效果

00:07:19.200 --> 00:07:20.600
我們回到編輯器

00:07:21.600 --> 00:07:24.100
一樣我們跟 Claude Code 去做對話

00:07:24.100 --> 00:07:25.700
這邊這個影片檔名

00:07:25.700 --> 00:07:27.900
大家要記得去更換成自己的檔名

00:07:27.900 --> 00:07:28.800
因為我們這邊的檔名

00:07:28.800 --> 00:07:31.000
是跟我們左手邊的這個檔名是吻合的

00:07:31.000 --> 00:07:32.800
所以 AI 他會偵測得到

00:07:32.800 --> 00:07:34.800
把這個影片切成多個幀

00:07:34.800 --> 00:07:36.000
用圖片的方式呈現

00:07:36.000 --> 00:07:38.600
然後並放在這個資料的層級下

00:07:38.600 --> 00:07:40.300
這樣他就比較不會太亂

00:07:40.300 --> 00:07:42.700
因為晚點我們要用他來做成動態網站

00:07:42.700 --> 00:07:43.400
送出

00:07:43.400 --> 00:07:45.933
剛剛系統已經幫我們切成 360 張

00:07:45.933 --> 00:07:48.200
這樣每一張都可以稱為是一個畫面了

00:07:48.700 --> 00:07:50.333
相關的規格他有幫我們列出來

00:07:50.333 --> 00:07:52.233
然後放的位置也是幫我們放在

00:07:52.233 --> 00:07:54.700
我們所命名的這個資料夾層級下

00:07:54.700 --> 00:07:57.200
你點開來就會發現有很多張圖片

00:07:57.200 --> 00:07:59.300
如果我們圖片的部分準備沒問題

00:07:59.300 --> 00:08:00.700
可以再度回來到 Docs

00:08:00.700 --> 00:08:02.300
我們這邊會使用第二步驟

00:08:02.300 --> 00:08:04.933
就是開始製作動態高質感網站

00:08:04.933 --> 00:08:06.733
他會針對這個圖片的檔名

00:08:06.733 --> 00:08:09.433
營造這種像 Apple 式的動態效果

00:08:09.433 --> 00:08:11.600
這邊我們有給他相對應的配色

00:08:11.600 --> 00:08:13.200
還有一些網格化設計

00:08:13.200 --> 00:08:14.800
我們就直接請 Claude

00:08:14.800 --> 00:08:16.400
幫我們產生相關的網站

00:08:17.400 --> 00:08:20.500
剛剛 AI 已經幫我們把這個網址

00:08:20.500 --> 00:08:21.600
都給做好了

00:08:21.600 --> 00:08:23.000
這是我們剛剛透過 AI

00:08:23.000 --> 00:08:24.200
直接做出來的版本

00:08:24.200 --> 00:08:26.600
我們主要會是看最上方這個 Hero Section

00:08:26.600 --> 00:08:28.400
我們往下滾動滑鼠的時候

00:08:28.400 --> 00:08:30.500
你會發現他音樂盒就慢慢地打開

00:08:30.900 --> 00:08:33.800
然後裡面的小女孩就出來跳舞

00:08:34.200 --> 00:08:36.600
也會去做轉動

00:08:37.033 --> 00:08:38.500
效果整個都非常不錯

00:08:38.500 --> 00:08:41.000
然後他右手邊也有這個 Hover 的效果

00:08:41.000 --> 00:08:43.000
做一些特色上的分享

00:08:43.400 --> 00:08:46.200
再來下面就是他所幫我們規劃的區塊

00:08:46.200 --> 00:08:49.233
最後就是 CTA 結尾的部分

00:08:49.233 --> 00:08:51.000
如果說你今天想讓整個網頁

00:08:51.000 --> 00:08:52.600
再變得更加豐富的話

00:08:52.600 --> 00:08:54.100
可以再度回到 AI 裡面

00:08:54.100 --> 00:08:55.600
我們給他相關的指令

00:08:55.600 --> 00:08:57.900
我覺得網頁區塊目前不夠多

00:08:57.900 --> 00:08:59.500
希望可以幫我增加像是

00:08:59.500 --> 00:09:02.200
關於我們、產品介紹、價格等相關的區塊

00:09:02.200 --> 00:09:03.533
讓整體是完整的

00:09:03.533 --> 00:09:06.400
剛剛系統已經幫我們生成多個區塊了

00:09:06.400 --> 00:09:09.600
像是關於我們、產品系列、定價、評價等等

00:09:09.600 --> 00:09:10.900
我們來看一下成品

00:09:11.400 --> 00:09:13.200
我們一樣可以往下滾動

00:09:13.200 --> 00:09:15.000
一樣我們會有所謂的音樂盒

00:09:15.000 --> 00:09:18.500
然後小女孩出來跳舞的這個動態效果

00:09:18.500 --> 00:09:21.600
接著我們往下滑會有一個相關的區塊介紹

00:09:21.600 --> 00:09:24.400
再來這邊會有關於我們顯示一些數字等等

00:09:24.700 --> 00:09:26.900
然後這邊有多個商品的呈現

00:09:27.633 --> 00:09:29.500
再來會有價格的部分

00:09:29.500 --> 00:09:31.400
然後包括客戶好評

00:09:31.400 --> 00:09:32.733
然後還有 QA

00:09:33.200 --> 00:09:35.633
整個來說都非常的完整

00:09:35.633 --> 00:09:36.633
最後還有 CTA

00:09:36.633 --> 00:09:37.833
然後網站頁尾

00:09:38.500 --> 00:09:40.933
OK 我們透過 Claude 製作一個完整

00:09:40.933 --> 00:09:42.600
然後又沉浸式的網站

00:09:42.600 --> 00:09:44.200
已經順利的大功告成了

00:09:44.200 --> 00:09:46.700
這章節要教大家如何把自己的網站檔案

00:09:46.700 --> 00:09:47.900
上傳到 GitHub

00:09:47.900 --> 00:09:51.200
GitHub 他是一款可以幫助你管理網站專案

00:09:51.200 --> 00:09:53.300
網頁、程式碼等等一個地方

00:09:53.300 --> 00:09:54.333
滿方便的

00:09:54.333 --> 00:09:55.900
我們目前是已經註冊完畢了

00:09:55.900 --> 00:09:56.800
所以我就直接登入

00:09:56.800 --> 00:09:57.900
可以參考 Docs

00:09:57.900 --> 00:10:00.400
我們相關的分頁裡面有分成六個步驟

00:10:00.400 --> 00:10:02.433
可以順利把檔案上傳到 GitHub

00:10:02.433 --> 00:10:04.900
當然我們也會透過 AI 的模式去完成

00:10:04.900 --> 00:10:06.100
接著就進到第二步

00:10:06.100 --> 00:10:08.833
就是你可以在 GitHub 建立你的專案資料庫

00:10:08.833 --> 00:10:10.500
這資料庫會放你的網站檔案

00:10:10.500 --> 00:10:12.400
這個命名的部分你可以改成自己的

00:10:12.833 --> 00:10:14.200
我們再度回來

00:10:14.200 --> 00:10:15.433
點選這個按鈕綠色的

00:10:15.433 --> 00:10:16.733
新增資料庫

00:10:17.133 --> 00:10:18.733
幫資料庫做命名

00:10:18.733 --> 00:10:21.300
這邊可以選擇是要公開還是私密

00:10:21.300 --> 00:10:22.600
目前我就先用公開

00:10:22.600 --> 00:10:23.700
然後進行創建

00:10:23.700 --> 00:10:25.200
這樣資料庫就創建完畢了

00:10:25.200 --> 00:10:26.800
這時候你可以點一下右上角

00:10:26.800 --> 00:10:28.200
然後點選資料庫

00:10:28.600 --> 00:10:31.600
你會發現你剛剛創建的資料庫就已經出現了

00:10:32.200 --> 00:10:33.700
再來我們可以前往到下一步

00:10:33.700 --> 00:10:35.433
就是生成這個 GitHub 的 Token

00:10:35.433 --> 00:10:37.400
這個 Token 可以授權給 AI

00:10:37.400 --> 00:10:40.000
這樣他才有辦法把檔案丟到你的 GitHub 裡面

00:10:40.300 --> 00:10:42.200
前往到這個 GitHub

00:10:42.200 --> 00:10:43.400
然後我們點選右上角

00:10:43.400 --> 00:10:44.533
他這邊有個 Settings

00:10:44.533 --> 00:10:45.300
點選

00:10:45.300 --> 00:10:46.600
進來之後往下滑

00:10:46.600 --> 00:10:48.100
他有個開發者 settings

00:10:48.100 --> 00:10:50.200
你就可以直接去做生成

00:10:50.200 --> 00:10:51.233
左手邊展開來

00:10:51.233 --> 00:10:53.300
他有一個經典 Tokens 的生成方法

00:10:53.300 --> 00:10:54.800
這邊也可以點選生成

00:10:55.100 --> 00:10:57.800
Token 的名稱我們可以先隨意命名

00:10:57.800 --> 00:10:59.900
他可以設定他的有效期限

00:10:59.900 --> 00:11:02.900
我們把相關的指令給打開

00:11:02.900 --> 00:11:05.600
下方的話就是跟管理員比較有相關的

00:11:05.600 --> 00:11:06.933
目前我們就先不用

00:11:06.933 --> 00:11:08.533
完成後就直接生成

00:11:09.033 --> 00:11:10.800
這樣 Token 指令就完成了

00:11:10.800 --> 00:11:12.833
這是滿重要的大家可以好好保留

00:11:12.833 --> 00:11:15.600
接著我們就可以在終端機安裝 Git 指令

00:11:15.600 --> 00:11:17.700
如果說你還沒有安裝 Git 的話

00:11:17.700 --> 00:11:19.600
可以看一下相關的文檔

00:11:19.600 --> 00:11:22.133
這個 git 指令就是 GitHub 相關的

00:11:22.133 --> 00:11:23.300
如果說你是 Windows

00:11:23.300 --> 00:11:24.500
你就可以跟著他去安裝

00:11:24.500 --> 00:11:26.500
你是 mac 的話你也可以跟著他

00:11:26.500 --> 00:11:29.900
我們這邊可以用 Homebrew 的方式會比較快

00:11:29.900 --> 00:11:32.033
這個比較適合是 mac 系統

00:11:32.033 --> 00:11:33.400
你可以搜尋他的網址

00:11:33.400 --> 00:11:35.533
這邊點選的時候他其實也會展開

00:11:35.533 --> 00:11:38.100
你就直接複製這個安裝的方法

00:11:38.100 --> 00:11:40.500
到你的終端機裡面再輸入這串指令

00:11:40.500 --> 00:11:41.800
你就可以安裝完畢了

00:11:42.100 --> 00:11:43.400
git 安裝完畢之後

00:11:43.400 --> 00:11:45.433
回來到我們的手冊裡面

00:11:45.433 --> 00:11:46.500
就可以走到第五步

00:11:46.500 --> 00:11:48.800
在 Git 上因為他會需要你的使用者名稱

00:11:48.800 --> 00:11:50.000
跟使用者 Email

00:11:50.000 --> 00:11:52.600
他比較有辦法去找到你的位置

00:11:52.600 --> 00:11:55.500
記得把這個地方先改成你的 GitHub 的名稱

00:11:55.500 --> 00:11:57.500
這邊 Email 也是需要更改一下

00:11:57.500 --> 00:11:59.700
如果你要在 VSCode 開啟終端機

00:11:59.700 --> 00:12:02.800
進來之後他上方有一個終端機的英文

00:12:02.800 --> 00:12:04.400
就直接打開來

00:12:04.400 --> 00:12:05.500
生成一個終端機

00:12:05.900 --> 00:12:08.900
你在這個地方就可以直接打上相關的指令了

00:12:08.900 --> 00:12:10.700
我先貼上了第一串指令

00:12:10.700 --> 00:12:14.300
就是我在全局裡面可以設定我的使用者名稱

00:12:14.300 --> 00:12:16.633
當然這地方應該會是你自己的英文

00:12:16.633 --> 00:12:18.000
所以大家可以更改一下

00:12:18.000 --> 00:12:19.500
完成後你就可以直接按 Enter

00:12:19.500 --> 00:12:21.433
系統就會幫你去做一個設定

00:12:21.433 --> 00:12:22.400
這是第一個

00:12:22.733 --> 00:12:24.600
第二個就是說你的 Email

00:12:24.600 --> 00:12:26.000
一樣你都可以複製起來

00:12:26.000 --> 00:12:27.933
再度回到終端機裡面再把他貼上

00:12:27.933 --> 00:12:29.700
把 Email 改成你自己的 Email

00:12:29.700 --> 00:12:30.300
這樣就可以了

00:12:30.300 --> 00:12:32.633
基本上我們會分成兩次做輸入

00:12:32.633 --> 00:12:33.933
比較不會有問題

00:12:33.933 --> 00:12:36.400
設定完畢這個基本路徑就建立完成

00:12:36.400 --> 00:12:37.933
最後就比較簡單了

00:12:37.933 --> 00:12:38.900
就是我們可以請 AI

00:12:38.900 --> 00:12:41.200
幫我們把專案檔案上傳到 GitHub

00:12:41.200 --> 00:12:43.700
我們剛剛這個資料庫是這樣的命名

00:12:43.700 --> 00:12:45.333
如果說你是命名別的話

00:12:45.333 --> 00:12:46.600
這邊記得也要改

00:12:46.600 --> 00:12:49.500
我們是請 GitHub 上傳到這資料庫

00:12:49.500 --> 00:12:51.700
然後也告訴他我們的 Token 的名稱

00:12:51.700 --> 00:12:52.900
這樣他才有權限

00:12:52.900 --> 00:12:55.800
回到我的 AI 裡面直接把他貼上去

00:12:55.800 --> 00:12:56.800
關於 Token 的部分

00:12:56.800 --> 00:12:59.200
你可以回到我們剛剛在 GitHub 所生成的

00:12:59.200 --> 00:12:59.900
這個 Token

00:12:59.900 --> 00:13:00.800
你就複製起來

00:13:00.800 --> 00:13:02.600
來到這個地方做貼上

00:13:02.600 --> 00:13:03.933
我們指令滿明確的

00:13:03.933 --> 00:13:05.133
然後請他幫我們把

00:13:05.133 --> 00:13:07.433
目前我們左手邊的檔案去做上傳

00:13:07.433 --> 00:13:09.100
檔案部分我有整理過了

00:13:09.100 --> 00:13:12.900
把相關的圖片跟影片放到 assets 的資料夾裡面

00:13:12.900 --> 00:13:13.700
分成圖片

00:13:13.700 --> 00:13:15.500
把他整理在 frames 的資料夾

00:13:15.500 --> 00:13:18.633
這個 index.html 就是我們的網頁主程式

00:13:18.633 --> 00:13:20.433
完成之後我們就直接送出

00:13:20.433 --> 00:13:22.533
AI 告訴我們說他已經成功幫我們

00:13:22.533 --> 00:13:24.800
推送檔案到這個資料庫裡面了

00:13:24.800 --> 00:13:26.833
我們這邊可以回來做檢查

00:13:26.833 --> 00:13:28.300
一樣當你生成完畢之後

00:13:28.300 --> 00:13:29.733
這個 Token 如果你用不到的話

00:13:29.733 --> 00:13:32.400
是可以直接做刪除的也會比較安全

00:13:32.400 --> 00:13:34.600
回到我們的資料庫裡面

00:13:34.600 --> 00:13:37.500
可以看到剛剛這個 banana 資料夾裡面

00:13:37.500 --> 00:13:39.400
確實檔案都上傳上去了

00:13:39.400 --> 00:13:42.700
我們在 GitHub 歸檔我們的專案資料已經順利完成了

00:13:42.700 --> 00:13:45.500
這個章節會教大家如何把網頁資料

00:13:45.500 --> 00:13:47.933
上傳到線上主機可以對外訪問

00:13:47.933 --> 00:13:49.900
我們使用的軟體會是 netlify

00:13:49.900 --> 00:13:51.700
相關連結我會放在下方資訊欄

00:13:51.700 --> 00:13:53.000
我已經註冊完畢了

00:13:53.000 --> 00:13:54.400
我這邊要新增一個新的專案

00:13:54.400 --> 00:13:55.400
可以點選按鈕

00:13:55.400 --> 00:13:58.233
進來之後我們可以選擇匯入檔案的方式

00:13:58.233 --> 00:14:00.300
我們這邊會使用 GitHub 的方式

00:14:00.300 --> 00:14:01.133
選擇

00:14:02.300 --> 00:14:05.400
他會自動連動到我們的 GitHub 帳號

00:14:05.400 --> 00:14:07.700
找到剛剛上傳的這個專案資料庫

00:14:07.700 --> 00:14:08.900
這個 banana-claude

00:14:08.900 --> 00:14:09.533
選擇

00:14:09.533 --> 00:14:12.400
你可以幫你的網站專案去做個名稱命名

00:14:12.733 --> 00:14:14.800
完成後我們就可以直接進入到部署

00:14:16.100 --> 00:14:17.400
這邊就可以等待他一下

00:14:17.400 --> 00:14:18.833
因為他目前正在安裝

00:14:18.833 --> 00:14:20.300
系統已經部署完畢

00:14:20.300 --> 00:14:21.700
我們可以點選這個連結

00:14:22.100 --> 00:14:23.600
這個連結就是我們對外

00:14:23.600 --> 00:14:25.000
人家可以訪問到的網址

00:14:25.433 --> 00:14:27.500
我們剛剛所做的這個音樂盒的網站

00:14:27.500 --> 00:14:28.400
就順利完成了

00:14:32.500 --> 00:14:34.333
我們用方法一已經示範給大家看

00:14:34.333 --> 00:14:35.400
希望對大家有幫助

00:14:35.400 --> 00:14:36.633
接下來我們會示範第二種

00:14:36.633 --> 00:14:38.700
把這個網頁專案可以上傳到

00:14:38.700 --> 00:14:40.933
比較正式而且更好一點的主機

00:14:40.933 --> 00:14:43.200
我們剛剛是使用 netlify 這家主機商

00:14:43.200 --> 00:14:44.300
但他會有幾個問題

00:14:44.300 --> 00:14:47.100
首先目前你的網址是這個 netlify 的子網域

00:14:47.100 --> 00:14:49.400
基本上子網域看起來就不是這麼正式

00:14:49.400 --> 00:14:52.333
而且對於 SEO 也不是一件好的事情

00:14:52.333 --> 00:14:53.000
這是第一點

00:14:53.000 --> 00:14:54.900
第二點是 netlify 這家主機商

00:14:54.900 --> 00:14:57.700
不論在規模度或者是安全性跟效能性

00:14:57.700 --> 00:14:59.333
都沒有正式主機來得更好

00:14:59.333 --> 00:15:01.300
如果說你想用比較好的主機

00:15:01.300 --> 00:15:02.533
可以參考 hosting.com

00:15:02.533 --> 00:15:04.133
這家主機商他歷史悠久

00:15:04.133 --> 00:15:05.733
全世界代管非常多的網站

00:15:05.733 --> 00:15:08.033
很多企業都是用他進行網站架設

00:15:08.033 --> 00:15:11.300
不論在資安跟速度上的表現都滿優異的

00:15:11.300 --> 00:15:12.933
相關的這個折扣連結

00:15:12.933 --> 00:15:14.133
我會放在畫面這邊

00:15:14.133 --> 00:15:15.433
還有下方的資訊欄

00:15:15.433 --> 00:15:16.400
你可以享有折扣

00:15:16.400 --> 00:15:20.000
這個主機商也有相關的教學跟註冊流程

00:15:20.000 --> 00:15:22.400
另外如果說你想了解更多優質主機的話

00:15:22.400 --> 00:15:24.133
我們有一篇比較文章

00:15:24.133 --> 00:15:25.900
相關的連結都會放在下方資訊欄

00:15:25.900 --> 00:15:29.400
同時這家主機商也會贈送你免費的一年網域

00:15:29.400 --> 00:15:30.933
非常的佛心

00:15:30.933 --> 00:15:32.633
我們目前已經租用完畢

00:15:32.633 --> 00:15:33.900
找到他點選這個按鈕

00:15:33.900 --> 00:15:36.100
就可以進入到他的主機商後台

00:15:36.100 --> 00:15:37.400
這邊你會看到滿多功能

00:15:37.400 --> 00:15:39.100
這個是 cPanel 的功能

00:15:39.100 --> 00:15:40.500
我們往下滑

00:15:40.500 --> 00:15:41.800
他可以讓你變更語言

00:15:41.800 --> 00:15:42.800
如果你是英文的話

00:15:42.800 --> 00:15:45.100
你選擇他然後把他改成繁體中文

00:15:45.100 --> 00:15:45.800
這樣就可以了

00:15:45.800 --> 00:15:46.700
會比較好做辨認

00:15:46.700 --> 00:15:48.700
接著我們就要開始把網站資料

00:15:48.700 --> 00:15:50.600
上傳到這個主機商裡面了

00:15:50.600 --> 00:15:51.733
首先你可以找到檔案

00:15:51.733 --> 00:15:52.933
裡面有個檔案管理員

00:15:52.933 --> 00:15:55.400
接著進入這個 public_html

00:15:55.900 --> 00:15:57.100
目前檔案都是空的

00:15:57.100 --> 00:15:59.900
這邊我們可以先把這個資料層級建立起來

00:16:00.433 --> 00:16:01.333
這邊的資料層級

00:16:01.333 --> 00:16:04.100
基本上會吻合我們的這個網頁專案

00:16:04.100 --> 00:16:05.533
所以我們可以先點選左上角

00:16:05.533 --> 00:16:06.700
有個新增資料夾

00:16:06.700 --> 00:16:07.900
我們就個別的命名

00:16:11.500 --> 00:16:12.200
命名完畢之後

00:16:12.200 --> 00:16:14.233
我們開始把檔案可以進行上傳了

00:16:14.233 --> 00:16:15.400
點選上面的上傳

00:16:15.400 --> 00:16:17.200
我把這個 index.html 上傳

00:16:17.200 --> 00:16:19.333
他有支援拖曳跟直接選擇都可以

00:16:19.333 --> 00:16:21.033
他上傳完畢之後我們就回到上一層

00:16:21.033 --> 00:16:22.833
你就會看到檔案已經上傳成功了

00:16:22.833 --> 00:16:25.100
接著我們就上傳 assets 相關的檔案

00:16:25.100 --> 00:16:27.233
進去之後一樣點選上傳

00:16:27.233 --> 00:16:29.600
我們把這三個檔案直接拖曳進來

00:16:30.300 --> 00:16:31.833
完成後回到上一層

00:16:31.833 --> 00:16:33.033
接著進入 frames

00:16:33.033 --> 00:16:34.033
一樣點選上傳

00:16:34.033 --> 00:16:35.933
我們把相關的全部圖片

00:16:35.933 --> 00:16:37.400
全部都直接拖曳進來

00:16:38.400 --> 00:16:41.100
我們目前已經把所有的檔案都上傳完畢了

00:16:41.100 --> 00:16:42.233
我們可以再回到上一層

00:16:42.233 --> 00:16:43.700
所以目前我們的檔案架構

00:16:43.700 --> 00:16:45.600
跟這邊的檔案架構是一樣的

00:16:45.600 --> 00:16:46.633
就沒有問題了

00:16:46.633 --> 00:16:48.533
再來我們就回到 cPanel 的畫面

00:16:48.533 --> 00:16:50.300
這邊有個網址點選

00:16:50.900 --> 00:16:53.900
這個網址基本上就會是你所購買的網址

00:16:53.900 --> 00:16:55.300
你會發現一件事情

00:16:55.300 --> 00:16:58.200
就是我們目前的這個網域已經成為正式網域了

00:16:58.200 --> 00:17:00.333
我們的網站已經隸屬於在他下面了

00:17:00.333 --> 00:17:01.633
所以我今天滑鼠滾動

00:17:01.633 --> 00:17:03.733
你就看到我的音樂盒已經打開了

00:17:04.800 --> 00:17:07.300
整個網站呈現得非常的精緻

00:17:07.300 --> 00:17:10.000
而且沉浸感很強、質感也很棒

00:17:12.000 --> 00:17:13.600
所以我們完成了幾件事情

00:17:13.600 --> 00:17:16.100
首先第一個我們擁有了自己的一個網域

00:17:16.100 --> 00:17:18.100
第二個我們是放在優質的主機商

00:17:18.100 --> 00:17:20.733
在穩定度跟安全性也都會比較高

00:17:20.733 --> 00:17:22.400
這是我們跟大家分享的第二種

00:17:22.400 --> 00:17:23.633
部署網站的一個方法