建立個人網站 Set up Personal Website
閱讀時間約 5 分鐘
因為最近需要建立自我品牌，所以決定來架個人網站。
架個人網站的方式非常多，最簡單的是直接找台伺服器拿現有模板套上去。
但是我喜歡自由，而且也已經有方格子部落格網站，所以打算做個簡單的名片網站。
以前寫過Html、Jsp、Asp、Php等各種網頁程式語言，不過現在聽說可以用Kotlin一個程式語言打天下，所以就來挑戰看看。
打開官網看看有什麼不錯的前端框架的時候，發現Compose框架，不由得特別留意。
啊，Jetpack Compose for Web今年2021五月才推出，現在還是Alpha探路版，不過想到在Android的世界裡也有Compose函式庫，也許哪天這些相似的產品就整合了呢！於是決定跳下坑了。
既希望一套程式碼可以應付全部業務，又怕被賤價的矛盾工程師。
今年內會出正式版本，那個時候也許會有比較完整的文件，距離年底剩下一個半月，但是我已經等不及啦，所以直接來看程式碼實戰教學。
環境要求有兩個，JDK版本和IDE版本。
- JDK 11 or later
- IntelliJ IDEA Community Edition or Ultimate Edition 2020.2 or later
我的IDE本來就是2021版本，但是JDK版本太低，所以只好下載最新的JDK17。
安裝IDE和JDK屬於初階操作，此處省略。若有需要可參考我之前寫的文章 https://ithelp.ithome.com.tw/articles/10261282。
因為還沒出穩定版，所以也沒有專案模組建立引導精靈，只能用Kotlin/Multiplatform專案修改，或是直接開啟範例專案。
因為我怕漏掉需要修改的地方，所以就選擇範例專案。
Github要下載單一資料夾需要額外工作，為求以後開發方便，我決定先fork專案再把template打包壓縮，這樣就不用為了1mb的內容，佔據一百多mb的空間。
把範例web-template名字改成personal_website後，就選擇中間的Open，並選擇信任專案。
在下面的Terminal執行./gradlew jsBrowserRun
先跑跑看範例，當然第一次跑就是要等待。
不知道為啥 http://localhost:8080/ 打開的是空白網頁。
後來才發現專案名字變動的話，index.html裡的js名稱也要隨之變動。
修正後Control鍵+c中斷，重新執行./gradlew jsBrowserRun，就成功看到範例網頁：顯示按鈕被點擊的次數，重新整理後數字會歸零。
目標：
- 背景色：黑色
- 文字色：金色
內容包含：
- 名字
- 自我介紹
- 社交帳號
- 作品集
好了，名字放上去了，接下來就是連結們了。
幸運的，找到一個提供各種第三方圖示的css：https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css
背景色屬性也從div挪移到上層的body區域。
再來就是放上伺服器供外網連線。
本來想放在Firebase，但是FIrebase設定上還要下載npm套件，覺得太麻煩，所以就只好放在GitHub了。
在此分享這次開發的個人網站網址：https://katelee.github.io/personal_website/
GitHub放靜態網頁的過程會另外寫一篇文章。
程式碼也會另外寫一篇文章說明，這邊先簡單帶過，附上程式碼網址：
網站內容會持續更新和擴充，比如說我最後還是把圖片按鈕的顏色都一起換成和文字一樣的金閃閃了。
請期待後續發表的文章。
留言0
查看全部
你可能也想看
Google News 追蹤
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Hi 大家好，我是Ethan😊
相近大家都知道保濕是皮膚保養中最基本，也是最重要的一步。無論是在畫室裡長時間對著畫布，還是在旅途中面對各種氣候變化，保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水，還能提升後續保養品的吸收效率。
曾經，我的保養程序簡單到只包括清潔和隨意上乳液
這篇涵蓋了 Notion 建立網站的基礎，還有免費的教學資源，讓你不用寫程式，就能用 Notion 快速建立個人網站！
Notion 簡易入口網站適合學生、求職、接案、小店家使用，能快速產出一個網站，節省成本又快速方便。
在上次那篇... "訂閱 Tensor Art PRO 之後...我做了..." 文章中大概說明了，我訂用 Tensor Art PRO 之後想玩得一些事情。
其中的第二點，"2.想找一個地方來放圖分享..."，後來有想到我的老朋友 blogger 這個平台，勉強可以用的呀! 免費，而且圖片放上去
在當今數字化時代，個人品牌建立已成為專業成長和個人表達的重要部分。不論是自由職業者、創業者還是尋求職業發展的專業人士，一個具有吸引力的個人品牌網站都是向世界展示你的專業和獨特性的理想平台。本文將探討如何使用WordPress和Elementor工具建立一個既美觀又專業的個人品牌網頁設計。
充滿競爭的數位世界中，越來越多的人選擇創業，並將目光投向了電子商務。 互聯網的普及和電子商務的迅速崛起為個人創業者提供了前所未有的機會，讓人們可以通過網路銷售產品或服務，實現自己的創業夢想。
在這個背景下，建立一個成功的網店品牌成為了一項重要的任務。 然而要從品牌定位到網站設計，再到產品規劃和行
Neil Patel 用自己的經歷做了實驗，分享了個人品牌和公司品牌的重要性。根據他的結論，個人品牌能幫助你快速建立知名度，而公司品牌則能幫你拿下大客戶，帶來穩定收入。不管你是自由工作者還是已經穩定成長的企業，經營品牌都是非常重要的。有興趣瞭解更多嗎？來看看 Neil Patel 的分享吧！
本文章介紹了建立網頁的整個流程，包括設置 Templates, Views, Urls 等步驟。透過這些步驟，大家便能創建一個新的網頁，並成功測試。
本文將介紹如何從頭開始建立一個Django專案，包括安裝和設定，以及創建管理員帳戶和新的app。透過本文，你可以學習到建立自己的網頁的所有步驟和設定。
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Hi 大家好，我是Ethan😊
相近大家都知道保濕是皮膚保養中最基本，也是最重要的一步。無論是在畫室裡長時間對著畫布，還是在旅途中面對各種氣候變化，保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水，還能提升後續保養品的吸收效率。
曾經，我的保養程序簡單到只包括清潔和隨意上乳液
這篇涵蓋了 Notion 建立網站的基礎，還有免費的教學資源，讓你不用寫程式，就能用 Notion 快速建立個人網站！
Notion 簡易入口網站適合學生、求職、接案、小店家使用，能快速產出一個網站，節省成本又快速方便。
在上次那篇... "訂閱 Tensor Art PRO 之後...我做了..." 文章中大概說明了，我訂用 Tensor Art PRO 之後想玩得一些事情。
其中的第二點，"2.想找一個地方來放圖分享..."，後來有想到我的老朋友 blogger 這個平台，勉強可以用的呀! 免費，而且圖片放上去
在當今數字化時代，個人品牌建立已成為專業成長和個人表達的重要部分。不論是自由職業者、創業者還是尋求職業發展的專業人士，一個具有吸引力的個人品牌網站都是向世界展示你的專業和獨特性的理想平台。本文將探討如何使用WordPress和Elementor工具建立一個既美觀又專業的個人品牌網頁設計。
充滿競爭的數位世界中，越來越多的人選擇創業，並將目光投向了電子商務。 互聯網的普及和電子商務的迅速崛起為個人創業者提供了前所未有的機會，讓人們可以通過網路銷售產品或服務，實現自己的創業夢想。
在這個背景下，建立一個成功的網店品牌成為了一項重要的任務。 然而要從品牌定位到網站設計，再到產品規劃和行
Neil Patel 用自己的經歷做了實驗，分享了個人品牌和公司品牌的重要性。根據他的結論，個人品牌能幫助你快速建立知名度，而公司品牌則能幫你拿下大客戶，帶來穩定收入。不管你是自由工作者還是已經穩定成長的企業，經營品牌都是非常重要的。有興趣瞭解更多嗎？來看看 Neil Patel 的分享吧！
本文章介紹了建立網頁的整個流程，包括設置 Templates, Views, Urls 等步驟。透過這些步驟，大家便能創建一個新的網頁，並成功測試。
本文將介紹如何從頭開始建立一個Django專案，包括安裝和設定，以及創建管理員帳戶和新的app。透過本文，你可以學習到建立自己的網頁的所有步驟和設定。