上周文章發布了之后，我看到很多人按教程都成功的把Gemini 3生成的網站弄上線了，給你們點贊！

但在后臺，在群里，還有留言區，也有很多讀者問了我很多后續問題，比如怎么把Gemini生成的網站內容更新成自己的作品？

又怎么在更新了自己的內容后，再讓Gemini改代碼不會覆蓋自己的修改？如何制作一個完全屬于自己的還能方便修改的網站呢？

今天這篇文章就做一個進階補充。

我對上一篇教程中，我用Gemini 3 寫的一個網站做了修改，把其中的部分作品換成了我自己的用來驗證。

先說一下我上次介紹的發布工具網站，好用是好用，但我也踩了坑。

事情是這樣，我自己在寫教程的過程中，一不小心就把它送的免費積分用完了。

雖然是免費，但它每個月只送300積分，正常上傳發布訪問瀏覽量不大的情況是沒問題，但一旦你做了更多操作。比如像我寫教程，多嘗試了一個功能，刷的一下就把積分搞沒了。結果我上傳的網站全掛了，所以這就是有人說我放在教程里的網站打不開了，就是這個原因。

這就有點坑了。

所以，我后面又找了一個新的發布工具，免費發布，沒有積分要求，但免費版有提交次數要求，送了500次，對我們做一個網站來說是足夠用了。這個是我前司騰訊的產品（十足的信任感），跟谷歌一樣也是一位大善人。

它的地址是：https://console.tencentcloud.com/edgeone/pages

注冊的時候可能會讓你填很多信息，比如綁卡之類的，但基本上都可以跳過，不影響你發布網站和應用。

你注冊好了之后，就可以來到服務總覽這個頁面，然后點創建項目，導入Git倉庫。

登錄并關聯你的github賬號，然后選擇你要發布的項目。

跟上一篇介紹的一樣，各種默認設置都不用改，只需要改下環境變量

變量名填上GEMINI_API_KEY ?，右邊的變量值隨便填幾個數字，完事直接點開始部署。

稍微等一會就自動部署成功了，點上面那個藍色鏈接就能見到自己的網站了。

好，下面講講今天文章的重頭戲：

一、如何修改Gemini 生成的代碼，并發布自己的作品和資料？

如果你有一些代碼基礎，其實直接手動去改源代碼也是可以的。方法就是直接點開Code，對著代碼直接改鏈接，改文本內容即可。

只不過有一個問題就是，當你再次讓AI幫你修改時，想要它別動你已經改過的代碼，就會變得非常麻煩。因為你讓Gemini幫你改文件中的代碼，它基本上就是從頭到尾重新寫一遍，所以基本上每次都是會全部覆蓋掉之前的。也就是文章開頭提到的那位朋友遇到的問題。

這樣的修改方式就讓你想要精確控制修改變得很麻煩，尤其是對于沒有代碼經驗的同學來說。

所以，我今天重點想要寫的內容，是給完全沒有代碼基礎的同學，也能通過AI定制出一套屬于自己的網站。

咱們開始吧。

1. 代碼結構改造

我們先理清一個思路，既然AI會重頭開始寫代碼，那假如把屬于我們自己要添加的文字圖片信息和我們經常要讓AI修改的代碼分離開，當讓AI修改的時候，只要讓它不動我們自己那份文件不就行了？

這其實也就是數據庫后臺跟前端的區別，但我們這里不討論程序相關的事情，我們只討論怎么在不懂程序的情況下還能把開發的活給干好了，最終能解決問題就行。

有了思路，接下來就好辦了。

用下面的提示詞，讓Gemini幫你把它寫的網站中的圖片文本和代碼邏輯做分離。

Role: 你是一個資深的前端架構師。

Task: 請幫我重構代碼結構，實現“內容與結構分離”。

Requirements: 請把頁面中所有的 文字內容 （標題、段落）和 資源路徑 （圖片 src、鏈接 href）提取出來，放在一個單獨的 siteData 文件中，該文件在 HTML 的 或 最上方引入。 在 HTML 標簽中，通過 ID 或 JavaScript 動態渲染的方式來引用這些數據，或者保留 HTML 結構但注明數據來源。

目的： 這樣我以后讓你修改樣式或布局時，你只需要修改 CSS 和 HTML 結構，而永遠不需要觸碰 siteData 里的內容。

如果這個代碼發給它后，第一次沒成功改出來，沒關系，多試幾次就可以了。

如果試了很多次還是不行，也可以用類似我寫的這句提示詞：需要放在代碼的目錄中，不要在對話框中寫代碼，要生成文件并引用。

多點耐心，最后總是能調出來的，相信我。

改完后的代碼結構，你如果有些代碼基礎的話，應該一眼就能看明白。如果沒有基礎也沒關系，就對照我的截圖看也是能看懂的，沒有任何難度，放心。

你可以改這個文件中的內容，要是不放心還可以把它先存到本地備份一下，然后回頭再貼進去就行。這樣就能在確保AI修改代碼的時候，還能保證是你的內容了。

好，如何確保AI修改代碼的時候不覆蓋你改過的內容，這個問題已經解決了。

二、接下來就是改具體內容了

1. 改文字

先從修改文字開始。

點開Code，然后在siteData.js文件中修改對應的內容，注意不要把一些代碼符號也給改動了，比如, {}之類的，不然會不生效。參考圖片，我都標注很清楚了。

2. 改圖片

改圖片可能會稍微麻煩點，你可以看到Gemini自動生成的圖片，基本上也是從網上的公開圖片中抓下來的，比如unsplash這個網站上的圖片。

如果你復制這個鏈接，就會發現，它會直接打開一張圖片。

鏈接打開后

那么我們就可以模仿這個方式，只要能把自己的圖片生成最終這樣的鏈接即可。這個方法就有很多了，比如我上傳到Dribbble網站上的圖片，右鍵復制圖片地址，把鏈接替換到代碼里的鏈接即可。

如果你覺得還要各種網站上發作品才能得到鏈接太麻煩，我也給你找到了一個非常簡單又邪修的辦法，咱們可以利用discord來生成在線圖片鏈接。

可能有人會問discord是啥？AI繪畫工具Midjourney你聽說過吧？它就是通過discord來使用的呀。

我們打開discord：https://discord.com/channels/@me

在你自己創建的服務器里，隨便找個聊天窗口，選擇上傳文件。把你想要傳到網站上的作品，在這里上傳

上傳后，點擊上傳的圖片，在放大的圖片頁面右鍵復制圖片地址。這樣就得到了我們需要的圖片鏈接了，沒想到吧？哈哈。

把這個地址貼到Gemini生成的siteData文件的對應圖片鏈接位置。

保存代碼后，就可以看到你的大作了！

有人可能會問，如果作品比較多，給到的代碼模版里不夠用了怎么辦？

簡單，直接復制代碼段即可。

把數據中的代碼段連帶一個大括號一起復制了，然后修改好ID和你自己的內容。注意別漏了任何代碼符號，仔細檢查。

保存后，頁面效果就會被刷新，能看到下面這2張變多的圖片了，這就是我復制代碼后新增出來的。

三、接下來就是見證奇跡的時刻！

我們來驗證下，上面提到的方法到底能不能行？

比如你接下來，你突然想到還需要修改頁面的功能，調整頁面樣式效果，但又別動我上面已經改過的內容。

我舉個例子，比如我想讓圖片封面，能夠完整的顯示圖片內容，而不是被裁切。

分享一個技巧：如果你發現用自己說的大白話提示詞，Gemini給的結果總是跟你想要的結果不一致，那可能就是提示詞的問題。可以把這個問題拋給Gemini，讓它給你優化后的提示詞。

比如我說：我想讓圖片的預覽，在未點擊之前的封面圖，能夠完整的顯示圖片內容，能直接修改代碼文件，而不是在對話框中給出修改代碼的建議或結果，提示詞怎么寫會更精準？

然后，我把Gemini寫的提示詞，直接復制貼回給它。

結果就是一步到位，它果然只改了該改的文件，并沒有動過我自己修改過的另一個文件。發現它直接就解決了我的問題，它自己就閉環了，哈哈。

一切改完，在Gemini預覽都沒問題后，我們就按上一篇講的步驟，直接同步構建，你的網站就真正改好上線了。

從第一篇把網站搞上線，到第二篇能改成真正屬于自己的網站，算是完成了網站從0-1上線的全過程。

后續你也能自己改，讓AI幫你改，改完還能上線。這樣基本上不管你懂不懂代碼，都能做出屬于自己的網站。

而且，還有AI這個強大的開發專家，免費幫你做任何你想加的特效，功能，想想就覺得自己一下子可以做很多事情了，有沒有很開心？

歡迎在評論區提出你的訴求，說不定下一期就能解決你的問題哦。后續我會更新更多實用教程，比如上線一款帶AI功能的游戲，做小程序放到微信里賺錢等等，讓每一個案例都實用，保持關注吧。

說到做到，我說了會寫一系列AI實用教程和案例，今天這篇就算是第3篇了。

如果文章內容對你有幫助，幫忙點贊轉發三連，我會更加有動力去研究，分享更多更實用的AI實用方法。

寫在最后

我覺得以前說“人人都是產品經理”，多少有點虛，因為想法容易，落地太難。

但AI讓一切都不一樣了。

現在想法即產品，輸入即輸出。不再需要等排期，不再受限于技術。

現在，我們每個人都可以是自己商業閉環的起點和終點，人人都能做老板、人人都是超級個體的時代。

這么一想，真的值得讓我們期待了！