不敢相信
只要10分鐘就能做出價值10萬的動態澄清式網站
而且不用花任何費用
今天這部影片我會分享FaceCode加Cloud Code的使用方法
再教你使用超強的網頁設計Code Scale
讓你做出不同於以往的Five Coding網站
直接屌打其他AI網頁設計作品
示範用Nano Banana
製作高級古典照片
用Fill做出導演及影片
最後教你把網站部署到正式的主機環境
讓訪客可直接在線瀏覽
準備好了嗎?
我們就直接開始吧
首先來看一下今天的教學流程
第一步我們會帶大家安裝
VSCode加Clouds Code
再來我們會安裝Cloud
裡面有個Scale指令
這個Scale可以幫我們美化
稍後要做的網站
我們會透過Flow去生成
所謂的網站圖片還有影片
它是基於Nano Banana的功能
再來使用Cloud進行網頁設計
當網站做好之後呢
我們會分兩個方法跟大家做分享
首先方法一呢
我們會上傳到BHub加上Netify
進行網站部署
方法二呢
我們會直接上傳到比較正式的主機
那這邊我們會用hosting.com跟大家做分享
那以上呢就是今天的教學流程
那這個章節呢
會帶大家來開啟VSCode
跟安裝Cloud Code
那我們等一下會先安裝這個ID軟體
那這個軟體蠻方便的
是可以讓我們編寫一些程式嘛
那當然我們等一下不會寫到程式嘛
主要是會在它裡面置入這個 Cloud Code 的對話時裝
那這樣你之後如果真的有這個編輯需求的話
也會比較方便
那相關的連結我也會放在下面
好 那我目前是已經把這個 Fierce Code 編輯器給下載起來了
好 那它這邊支援蠻多種外掛
我們可以看到左手邊這個 extension
裡面可以讓我們安裝蠻多種都是支援這個編輯器的
好 那我這邊可以直接搜尋跟 Cloud Code 相關的小功能
好 那這個功能可以幫助我在這個編輯器裡面
直接跟 AI 做對話
好,我目前是已經下載完畢了
我這邊就直接可以看到右上角
它會有一個小小的 icon
我就點選它
這個時候我就可以直接進入到對話模式
它可能會要求你進行登入
因為要使用 Cloud Code 至少要破版的方案
這部分大家都可以自行再去做了解
我們目前前置作業就已經完成了
接著我們等一下可以開啟一個專案
把相關的程式都放在裡面
所以我先在桌面建立一個相關的資料夾
這邊直接開啟我的資料夾
找到剛所新增的資料夾
然後打開
稍後我們的專案檔案
就會統一放在這個資料夾裡面
這邊的這個路徑
跟我桌面的這個資料夾
它是連動的
目前都是空的
稍後我們會把一些相關的影片
圖片、程式都擺在裡面這樣子
這項鍵會叫大家安裝Scale
這個Scale是基於Cloud
目的是可以幫我們強化
網頁設計上的質感
它裡面有個Scale檔案
我們可以點進來
它這個SKILL會幫我們把我們的Prom指令強化
AI所生成出來的網頁
有時候會覺得很一般或者是不好看
它可以幫我們強化所謂的像風格性
差異化還有前端美學
會幫我們優化所謂的字體
色彩或是動態效果等等
好 那我們稍後就會來安裝這個SKILL
你可以回來到你的ID編輯器
直接請AI幫我們做安裝
剛好安裝這個Cloud
那這個時候我們可以把它互換出來
那你在右手邊其實有個小小的折鐵框
你可以把這個視窗給叫出來
這邊也會出現Cloud的這個英文
就點選之後呢
就可以進入到對話模式了
那另外一種方式呢
你可以從剛剛的這個外掛安裝專區呢
一樣你找到剛剛的外掛再點一下
好
那它就會把它叫出來
它這邊一樣有icon
好你點選之後
一樣也可以把視窗叫出來
所以它有蠻多種方法的
好那麼稍後呢
會直接跟這個Cloud對話
請它幫我們安裝剛剛的那個SKIA
那我剛剛呢輸入了這雙Prom
就是請它幫我在這個
中暗層級下呢
安裝這個SKIA
因為我們目前左手邊
是已經綁定桌面上的這個資料夾
所以相關的檔案都會在裡面
你也可以取名比較簡單的都是OK的
然後這個Skill的來源會是這個連結
一樣會放在下方資訊欄給大家
好完成之後你就可以直接點選送出
那我們剛剛已經順利把這個Skill給安裝起來了
然後他也幫我們把這個檔案
放在我們想要的專案成績裡面
我們可以看到左手邊
這是我們所建立的專案成績
然後裡面你會看到他多出一個
點Cloud的檔案
進來之後他裡面會有Skill
Skill裡面就會是
我們目前畫面所看到的這個
剛從線上安裝下來強化網頁設計的這個Prom指令
好 那我們稍後就會再來運用它
這項鍵會教大家如何透過Flow
我們去生成圖片的部分
那有圖片之後呢
我們才有辦法把它去串成影片
好 那我們等一下會用到這款呢
是Google官方所開發的Flow軟體
那它這個AI軟體呢
是基於這個Nano Banana 包刮
Fill去生成所謂的圖片跟影片
好 一開始的話
你可以點選下方的這個興建項目
那首先的話呢
它下方它支援是用圖片的方式啊
或是用影片的方式
那我們會先用圖片的方式喔
它支援不同的尺寸
那我們目前就先用16比9
然後呢
我們可以先請它幫我們生成兩張喔
那這邊我們可以選擇呢
它使用的這個模型喔
那我們就用這個Pro版
好
它目前這個行為呢
會耗費我們就是0點的點數喔
所以可以持續的去做測試
這個Duck是我們幫大家準備好的這個指令喔
如果你有需要用到
一樣在下方的資訊欄會找到
首先透過Flow去生成結尾圖
那結尾圖部分呢
我們就直接先複製起來它的指令
把它貼上來
好 那這個結尾圖呢
其實對應我們剛剛的這個網站成品
就會是少女喔
她在跳舞
這部分是她的結尾
然後我們開頭的話呢
會是一個蓋起來的盒子喔
那等一下我們會先把這兩張圖呢
都先做出來
我們就先進行送出
那系統幫我們生成兩張圖片喔
那目前看起來右邊會比較適合
因為它是整個畫面呢
都有放進來
好 那這就是我們的結尾圖片
那接著呢
我們可以在這個結尾圖片的
這個基礎之上呢
我們請他幫我們去生成所謂的開頭圖
把它貼上來
這個指令是希望他幫我生成一張盒子蓋子的版本
那我們就直接送出
這個開頭圖片已經完成了
你可以點選右邊的兩張圖我們進行下載
下載完畢之後這兩個檔案
你就可以直接把它放在你的狀態資料夾裡面
這張節會來教大家如何去生成影片的部分
我們可以看到下方切成視頻
然後選擇16比9的方式
我們來生成一個影片就OK了
好 那這個影片它本身會耗費點數
所以大家也可以再留意一下
好 那這邊支援開頭跟結束
點擊之後去做指定
剛剛已經把這個開始跟結尾的圖片都放進來
那影片生成的Program放在這個地方
那主要我們就是針對影片的過程
去做個比較詳細的描述
好 複製 回來 我們進行貼上
好 都確認沒問題了之後呢
就可以直接送出
那我們剛剛已經把影片生成出來了
進來之後呢
它也會展示動畫所生成的一個結果
我們稍後就會來把這個影片放在網站上
張傑要來教大家如何用Ploudon製作一個精美的網站
好 那我剛剛已經把相關的這個圖片
比如說是開頭的圖片跟結尾的圖片
然後還有我們所製作出來的這個影片
我全部放在專案資料夾裡面
剛剛所提到的這個Scale
也是配置在這個專案成績下面
那我們這邊也幫大家貼心的準備相關指令
那我們會分成兩個步驟
首先第一個步驟是把影片切成多張圖片
那我們稍後會用這些圖片去做成這個動態網站
也就是上方這個動態的效果
那我們回到編輯器
好 一樣我們跟Cloud Code去做對話
好 那這邊這個影片檔名
大家要記得去更換成自己的檔名
因為我們這邊的檔名
是跟我們左手邊的這個檔名是吻合的
所以AI它會偵測得到
把這個影片切成多個針
用圖片的方式呈現
然後並放在這個資料的層級下
這樣它就比較不會太亂
因為晚點我們也要用它來做成動態網站
好 送出
系統已經幫我們切成360張
這樣每一張都可以成為是一個畫面
相關的規格他有幫我們列出來
那放的位置也是幫我們放在
我們所命名的資料夾乘積一下
那你點開來就發現有很多張圖片
那如果我們圖片的部分準備沒問題
可以再度
可以再度回來到Duck
我們這邊會使用第二步驟呢
就是開始製作動態高質感網站
他會針對這個圖片的檔名
營造這種像Apple式的動態效果
那這邊我們有給他相對應的配色
還有一些網格化設計
好我們就直接請Cloud幫我們產生相關的網站
好剛AI已經幫我們把這個網址都可以做好了
這是我們剛透過AI直接做出來的版本
那我們主要會是看最上方Hero Station
我們往下滾動滑鼠的時候
你會發現它的音樂盒就慢慢的打開
好然後裡面的小女孩就出來跳舞
好那也會去做轉動
效果整個都非常不錯
然後它右手邊也有Hover的效果
做一些特色上的分享
好,那再來下面就是它所幫我們規劃的區塊
那最後就是 CTA 結尾的部分
那如果說你今天想讓整個網頁再變得更加豐富的話
可以再度回到 AI 裡面給它相關的指令
我覺得網頁區塊目前不夠多
希望可以幫我增加像是關於我們產品介紹
價格等相關的區塊,讓整體是完整的
那剛剛系統已經幫我們生成多個區塊了
像是關於我們產品系列、定價、評價等等
好,我們來看一下產品
我們一樣可以往下滾動
一樣我們會有所謂的音樂盒
然後小女孩出來跳舞的這個通胎效果
接著我們往下滑會有一個相關的區塊介紹
再來這邊會有關於我們顯示一些數字等等
然後這邊有多個商品的呈現
再來會有價格的部分
然後包括客戶好評
然後還有QA
整個來說都非常的完整
最後還有CTA
然後網站業尾
OK 我們透過Cloud 製作一個完整
然後又沉浸式的網站
已經順利的大功高成了
這項鞋要教大家如何把自己的網站檔案上傳到GitHub
那GitHub 它是一款可以幫助你管理網站專案
網頁 程式碼等等一個地方 蠻方便的
好 那我們目前是已經註冊完畢了
所以就直接登入 可以參考Dark
我們相關的分頁裡面有分成六個步驟
可以順利把檔案上傳到GitHub
那當然我們也會透過AI的模式去完成
接著就進到第二步
就是你可以在Github建立你的创案資料庫
這資料庫會用你的網站檔案
這個命名的部分你可以改成自己的
我們再度回來點選這個按鈕綠色的
新增資料庫
幫資料庫做命名
這邊可以選擇是要公開還是私密
目前我就先用公開
然後進行創建
好這樣資料庫就創建完畢了
這時候你可以點一下右上角
然後點選資料庫
你會發現說你剛創建資料庫就已經出現了
再來我們可以前往到下一步
就是生成Github的Token
這個Token可以授權給AI
這樣他才有辦法把檔案丟到你的Github裡面
前往到這個Github
然後我們點選右上角
他這邊有個Settings
點選
進來之後往下滑
他有個開發者Settings
好那你就可以直接去做生成
左手邊展開來
他有一個經典Token的生成方法
這邊也可以點選生成
那Token的名稱
我們可以先隨意命名
他可以設定他的有效期限
讓我們把相關的指令給打開
下方就是跟管理員比較有相關的
目前我們就先不用
完成後就直接生成
這樣Token指令就完成了
這是蠻重要的大家可以好好保留
接著我們就可以在終端季安裝Giz指令
如果說你還沒有安裝Giz的話
可以看一下相關的文檔
這個Giz指令就是Github相關的
如果說你是Windows就可以跟著它去安裝
你是Mac的話你可以跟著它
我們這邊可以用HomeBlood的方式會比較快
這個比較適合是Mac系統
你可以搜尋它的網址
那這邊點選的時候它其實也會展開
好 那你就直接複製
這個安裝的方法到你的終端機裡面
再輸入這一串指令
就可以安裝完畢了
好 那Git你安裝完畢之後
回來到我們的手冊裡面
就可以走到第五步
在Git上
因為它會需要你的使用者名稱
跟使用者的Email
它比較有辦法去找到你的位置
記得把這個地方先改成你的GitHub的名稱
然後這邊Email也是需要更改一下
如果你要在PS Code開啟終端機
進來之後它上方有一個
這個終端機的英文
就直接打開來
生成一個終端機
好 那你在這個地方呢
就可以直接打上相關的指令了
好 那我先貼上了第一串指令呢
就是我在全局裡面呢
可以設定我的使用者名稱
當然呢 這地方應該會是你自己的英文
所以大家可以更改一下
好 那完成後你就可以直接按Enter
系統就會幫你去做一個設定
這是第一個
好 那第二個就是說
你的email一樣你都可以複製起來
再度回到終端機裡面
再把它貼上
把email改成你自己的email
這樣就可以了
基本上我們會分成兩次做輸入
那比較不會有問題
設定完畢這個基本路徑就建立完成
最後就比較簡單了
就是我們可以請AI
幫我們把專案檔案上傳到Github
那我們剛剛這個資料庫是這樣的命名
那如果說你是命名別的話
這邊記得也要改
好 那我們是請Github上傳到這資料庫
然後也告訴他我們的Token的名稱
這樣他才有權限
回到我的AI裡面
直接把它貼上去
關於Token的部分
你可以回到我們剛剛在Github所生成的
這個Token就複製起來
來到這個地方做貼上
我們指令蠻明確的
然後請他幫我們把目前左手邊的檔案去做上傳
檔案部分我有整理過了
把相關的圖片跟影片放到SS資料夾裡面
分成圖片把它整理在Friends資料夾
這個index.html就是我們的網頁組程式
完成之後我們就直接送出
AI告訴我們說他已經成功幫我們推送檔案到資料庫裡面了
我們這邊可以回來做檢查
那一樣呢 當你生存完畢之後
這個Token如果你用不到的話
是可以直接做刪除的
也會比較安全
回到我們的資料庫裡面
可以看到剛剛這個
Banana資料夾裡面
確實檔案都上傳上去了
好 我們在GitHub
歸檔我們的專案資料
已經順利完成了
這個章節會教大家如何
把網頁資料上傳到線上主機
可以對外訪問
那我們使用的軟體會是Netify
相關連結我會放在下方資訊欄
好 那我已經注射完畢了
我這邊要新增一個新的專案
可以點選按鈕
進來之後我們可以選擇
賄賂檔案的方式
我們這邊會使用Github的方式選擇
它會自動連動到我們的Github的帳號
找到剛剛上傳的中案資料庫
這個banana cloud選擇
你可以幫你的網站中案去做個名稱命名
完成後我們就可以直接進入到部署
這邊就可以等待它一下
因為它目前正在安裝
系統已經部署完畢了
我們可以點選這個連結
這個連結就是我們對外人家可以訪問到的網址
好 那我們剛剛所做的這個音樂盒的網站就順利完成了
我們用方法1已經示範
希望對大家有幫助
接下來我們會示範第二種
把這個網頁專案可以上傳到比較正式
而且更好一點的主機
我們剛剛是使用 Netlify 這家主機上
但它會有幾個問題
首先 目前你的網址是 Netlify的直網域
基本上直網運看起來就不是這麼正式
而且對於SEO也不是一件好的事情
這是第一點
第二點是Netify這家主機商
不論在規模度或者是安全性跟效能性
都沒有正式主機來得更好
如果說你想用比較好的主機
可以參考hosting.com
這家主機商它歷史永久
全世界代管非常多的網站
很多企業都是用它進行的網站假設
不論在治安跟速度上表現都蠻優異的
相關的折扣連結
我會放在畫面這邊還有下方的資訊欄
你可以向我折扣
這個主機商也有相關的教學跟註冊流程
另外如果說你想了解更多優質主機的話
我們也有一篇比較文章
相關的連結都會放在下方資訊欄
同時這家主機商也會贈送你免費的一年網譽
非常的佛心
我們目前已經主用完畢
找到它點選這個按鈕
就可以進入到它的主機商後台
這邊你會看到蠻多功能的
這個是C-Panel的功能
我們往下滑
它可以讓你變更語言
如果你是英文的話
你選擇它然後把它改成繁體中文
這樣就可以了
會比較好做辨認
接著我們就要開始把網站資料
上傳到這個主機上裡面了
首先你可以找到檔案裡面有個檔案管理員
接著進入這個 Public 底線 HTML
目前檔案都是空的
這邊我們可以先把這個資料層級建立起來
這邊的資料層級基本上會吻合我們的網頁專案
所以我們可以先點選左上角的新增資料夾
我們就個別的命名
命名完畢之後
我們開始把檔案可以進行上傳
點選上面的上傳
我把這個index.html上傳
它有支援拖曳跟直接選擇都可以
上傳完畢之後我們就回到上一層
你就看到檔案已經上傳成功了
接著我們就上傳assessed相關的檔案
進去之後一樣點選上傳
我們把這三個檔案直接拖曳進來
完成後回到上一層
接著進入frames
一樣點選上傳
我們把相關的全部圖片
全部都直接拖曳進來
我們目前已經把所有的檔案都上傳完畢了
我們可以再回到上一層
所以目前檔案架構
跟這邊的檔案架構是一樣的
那就沒有問題了
再來我們就回到 cPanel的畫面
這邊有個網址點選
好 這個網址基本上就會是你所購買的網址
那你會發現一件事情
就是我們目前的這個網域已經成為正式網域了
我們的網站已經隸屬於在它下面了
所以我今天滑鼠滾動
你就看到我的音樂盒已經打開了
好 那整個網站呈現得非常的精緻
而且沉浸感很強
質感也很棒
好 所以我們完成了幾件事情
首先第一個我們擁有了自己的網域
第二個我們是放在優質的主機上
在穩定度跟安全性也都會比較高
這是我們跟大家分享的第二種部署網站的方法