[前端自學轉職攻略] 13. 怎麼把 side project 放到網路上?

閱讀時間約 1 分鐘
學習使用前端部署平台


將專案部署到網路上,就能直接使用網址來開啟專案,不需要再透過 http://localhost:xxxx 。除了方便使用外,也能在不同的裝置上使用,或分享給朋友。


前端部署平台


可以選擇使用 Vercel、Netlify 或 Zeabur 等前端部署平台。這些平台只需要與 GitHub 的 repository 綁定,就能透過簡單的設定將專案發布到網路上。只有少數人在使用的 side project ,通常免費方案就足夠。

當將專案部署到網路上後,就有了兩個截然不同的環境:

  • 本機環境(local):電腦中的開發環境(http://localhost:xxxx),只有自己能使用。
  • 正式環境(production):部署在網路上的環境,使用一般的網址開啟,所有人都能使用。

理解兩個環境的差異與使用方式,將幫助你學習不少前端的必備知識。



追蹤網站流量


如果想了解有多少人在使用你的網站,可以學習如何使用 Google Analytics 。對於功能較複雜的網站,也可以用 Google Analytics 的事件(event)來紀錄使用者行為,再根據實際的使用數據優化網站。



SEO(Search Engine Optimization


如果希望更多人能在 Google 搜尋看到你的網站,可以試著學習 SEO 相關知識來優化網站架構。反之,如果不希望網站出現在搜尋結果中,也可以學習如何避免網站被搜尋引擎抓取。

3會員
31內容數
零基礎到成功轉職,一路上會遇到哪些挑戰、應該如何解決? - 猶豫階段:「這適合我嗎?薪水如何?...」 - 起步階段:「怎麼開始學?要不要做 side project?...」 - 成長階段:「如何優化開發效率?選擇框架?...」 - 面試階段:「怎麼準備技術和行為面試?...」
留言0
查看全部
發表第一個留言支持創作者!
前端轉職經驗談 的其他內容
【猶豫階段】 1. 轉職前端適合我嗎? 2. 轉職前端能拿到多少薪水? 3. 前端工程師實際的工作內容是什麼? 4. 從開始到轉職成功要多久? ...
先確認是否對程式開發有興趣,再接著學習進階技術。
安裝程式 → 下載範本 → 列出專案的功能清單 → 開始開發
【猶豫階段】 1. 轉職前端適合我嗎? 2. 轉職前端能拿到多少薪水? 3. 前端工程師實際的工作內容是什麼? 4. 從開始到轉職成功要多久? ...
先確認是否對程式開發有興趣,再接著學習進階技術。
安裝程式 → 下載範本 → 列出專案的功能清單 → 開始開發
你可能也想看
Google News 追蹤
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
美國總統大選只剩下三天, 我們觀察一整週民調與金融市場的變化(包含賭局), 到本週五下午3:00前為止, 誰是美國總統幾乎大概可以猜到60-70%的機率, 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
Thumbnail
Faker昨天真的太扯了,中國主播王多多點評的話更是精妙,分享給各位 王多多的點評 「Faker是我們的處境,他是LPL永遠繞不開的一個人和話題,所以我們特別渴望在決賽跟他相遇,去直面我們的處境。 我們曾經稱他為最高的山,最長的河,以為山海就是盡頭,可是Faker用他28歲的年齡...
先學習 HTML, CSS, JavaScript 基礎觀念, 再透過實作專案,慢慢熟悉不同的語法使用方式。
Thumbnail
一開始你先把你的專案push上去後,修改vite.config.ts ,要在裡面新增  base: "/Cart/" (/放自己的專案名稱/) build: {outDir: "docs"}, 接下來你要去你的github setting 裡面 -> Page ->選Deploy fro
Thumbnail
這篇文章教你如何製作側邊欄,包括準備工作、HTML和CSS的部分,還有一些互動效果。文章涵蓋了連結、圖片、超連結、大小、顏色、排版、flex和滑鼠互動等內容。
Thumbnail
你好,在下最近在學習開發web,學了html css js,也得出一些心得,由於網路上已有許多教學,所以我會著重在如何開發出to do List,以及解釋我寫的程式碼。相關的教學我會直接貼網址。如果我有什麼地方出錯,或者是可以寫得更好,歡迎在下方留言,討論。 首先先介紹我的開發環境: 我用了vs
Thumbnail
前面已經安裝好IIS後,並且也新建站台了,那麼接下來這篇就會分享如何使用它
Thumbnail
#職場故事 #網頁設計 #前端工程師 #轉職 #跨領域 八、軟體公司的前端工程師之路 新公司不是做網頁專案的,而是自己研發資安軟體的公司,主要只有一個大專案,跟很多客製化的需求。 我在這次轉職時有考慮到,我其實不太喜歡一個案子做完就結束的感覺,因為那會讓我覺得這些作品做完好像也不是我的東西..
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
美國總統大選只剩下三天, 我們觀察一整週民調與金融市場的變化(包含賭局), 到本週五下午3:00前為止, 誰是美國總統幾乎大概可以猜到60-70%的機率, 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
Thumbnail
Faker昨天真的太扯了,中國主播王多多點評的話更是精妙,分享給各位 王多多的點評 「Faker是我們的處境,他是LPL永遠繞不開的一個人和話題,所以我們特別渴望在決賽跟他相遇,去直面我們的處境。 我們曾經稱他為最高的山,最長的河,以為山海就是盡頭,可是Faker用他28歲的年齡...
先學習 HTML, CSS, JavaScript 基礎觀念, 再透過實作專案,慢慢熟悉不同的語法使用方式。
Thumbnail
一開始你先把你的專案push上去後,修改vite.config.ts ,要在裡面新增  base: "/Cart/" (/放自己的專案名稱/) build: {outDir: "docs"}, 接下來你要去你的github setting 裡面 -> Page ->選Deploy fro
Thumbnail
這篇文章教你如何製作側邊欄,包括準備工作、HTML和CSS的部分,還有一些互動效果。文章涵蓋了連結、圖片、超連結、大小、顏色、排版、flex和滑鼠互動等內容。
Thumbnail
你好,在下最近在學習開發web,學了html css js,也得出一些心得,由於網路上已有許多教學,所以我會著重在如何開發出to do List,以及解釋我寫的程式碼。相關的教學我會直接貼網址。如果我有什麼地方出錯,或者是可以寫得更好,歡迎在下方留言,討論。 首先先介紹我的開發環境: 我用了vs
Thumbnail
前面已經安裝好IIS後,並且也新建站台了,那麼接下來這篇就會分享如何使用它
Thumbnail
#職場故事 #網頁設計 #前端工程師 #轉職 #跨領域 八、軟體公司的前端工程師之路 新公司不是做網頁專案的,而是自己研發資安軟體的公司,主要只有一個大專案,跟很多客製化的需求。 我在這次轉職時有考慮到,我其實不太喜歡一個案子做完就結束的感覺,因為那會讓我覺得這些作品做完好像也不是我的東西..