建立個人網站 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 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
在當今數字化時代，個人品牌建立已成為專業成長和個人表達的重要部分。不論是自由職業者、創業者還是尋求職業發展的專業人士，一個具有吸引力的個人品牌網站都是向世界展示你的專業和獨特性的理想平台。本文將探討如何使用WordPress和Elementor工具建立一個既美觀又專業的個人品牌網頁設計。
充滿競爭的數位世界中，越來越多的人選擇創業，並將目光投向了電子商務。 互聯網的普及和電子商務的迅速崛起為個人創業者提供了前所未有的機會，讓人們可以通過網路銷售產品或服務，實現自己的創業夢想。
在這個背景下，建立一個成功的網店品牌成為了一項重要的任務。 然而要從品牌定位到網站設計，再到產品規劃和行
Neil Patel 用自己的經歷做了實驗，分享了個人品牌和公司品牌的重要性。根據他的結論，個人品牌能幫助你快速建立知名度，而公司品牌則能幫你拿下大客戶，帶來穩定收入。不管你是自由工作者還是已經穩定成長的企業，經營品牌都是非常重要的。有興趣瞭解更多嗎？來看看 Neil Patel 的分享吧！
本文章介紹了建立網頁的整個流程，包括設置 Templates, Views, Urls 等步驟。透過這些步驟，大家便能創建一個新的網頁，並成功測試。
本文將介紹如何從頭開始建立一個Django專案，包括安裝和設定，以及創建管理員帳戶和新的app。透過本文，你可以學習到建立自己的網頁的所有步驟和設定。
原以為是勵志片，結果看到最後卻讓人熱淚盈眶很控制住情緒。這是一部以建立小車站為志願卻用親情來包裝的感人電影，雖然過程中都是清清淡淡的，但累積到最後面的作用力卻是非常強大，感人肺腑值得推薦！
今年五月中旬台灣疫情爆發後，政府要大家儘量不要進行「人與人連結」的活動，第一時間就關閉夜店酒家等等特種行業，甚至後來連親戚好友在家裡的聚會也受到限制，公眾場所也以「避免群聚」來規範開放與否，希望能及時阻斷病毒的傳播鏈。
疫情爆發初期幾個患者被公布得比較詳盡的疫調紀錄，大家赫然發現，一個從有正常生活
在嚴曉翠看來，人脈可分為「強連結」與「弱連結」兩種。「中國人談人際關係著重所謂的『五同』（同學、同宗、同事、同鄉、同好），就是一種強連結。」嚴曉翠說。一般人看人脈多半著重在強連結，跟自己有直接關係或常碰面的才算是人脈，但嚴曉翠認為，人脈的意義可以擴大的，那些和你沒有直接密切的關係、卻可能佔有某種關鍵
自從上次小K的個人網站突破了10000次瀏覽量之後，我為自己訂立了下一個目標，那就是25000次瀏覽量，大家看到我寫這篇文章，就代表網站瀏覽量已經突破了25000次瀏覽量了！
與上次相比，現在大約是過了兩個月，我發覺我的個人網站在Organic Search Traffic（自然搜尋流量）上面的次
「自媒體」不單單只能透過「影片」、「聲音」、「文字」去分享，也有另一種是將自己形塑成一個「訊息傳播站」，你把你想要推薦的，一一展現給網路的使用者，從影視到聲音，從娛樂到閱讀，從日常到深度的思考⋯⋯像個真正的媒體，多元地傳播好內容給其他的人。
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
在當今數字化時代，個人品牌建立已成為專業成長和個人表達的重要部分。不論是自由職業者、創業者還是尋求職業發展的專業人士，一個具有吸引力的個人品牌網站都是向世界展示你的專業和獨特性的理想平台。本文將探討如何使用WordPress和Elementor工具建立一個既美觀又專業的個人品牌網頁設計。
充滿競爭的數位世界中，越來越多的人選擇創業，並將目光投向了電子商務。 互聯網的普及和電子商務的迅速崛起為個人創業者提供了前所未有的機會，讓人們可以通過網路銷售產品或服務，實現自己的創業夢想。
在這個背景下，建立一個成功的網店品牌成為了一項重要的任務。 然而要從品牌定位到網站設計，再到產品規劃和行
Neil Patel 用自己的經歷做了實驗，分享了個人品牌和公司品牌的重要性。根據他的結論，個人品牌能幫助你快速建立知名度，而公司品牌則能幫你拿下大客戶，帶來穩定收入。不管你是自由工作者還是已經穩定成長的企業，經營品牌都是非常重要的。有興趣瞭解更多嗎？來看看 Neil Patel 的分享吧！
本文章介紹了建立網頁的整個流程，包括設置 Templates, Views, Urls 等步驟。透過這些步驟，大家便能創建一個新的網頁，並成功測試。
本文將介紹如何從頭開始建立一個Django專案，包括安裝和設定，以及創建管理員帳戶和新的app。透過本文，你可以學習到建立自己的網頁的所有步驟和設定。
原以為是勵志片，結果看到最後卻讓人熱淚盈眶很控制住情緒。這是一部以建立小車站為志願卻用親情來包裝的感人電影，雖然過程中都是清清淡淡的，但累積到最後面的作用力卻是非常強大，感人肺腑值得推薦！
今年五月中旬台灣疫情爆發後，政府要大家儘量不要進行「人與人連結」的活動，第一時間就關閉夜店酒家等等特種行業，甚至後來連親戚好友在家裡的聚會也受到限制，公眾場所也以「避免群聚」來規範開放與否，希望能及時阻斷病毒的傳播鏈。
疫情爆發初期幾個患者被公布得比較詳盡的疫調紀錄，大家赫然發現，一個從有正常生活
在嚴曉翠看來，人脈可分為「強連結」與「弱連結」兩種。「中國人談人際關係著重所謂的『五同』（同學、同宗、同事、同鄉、同好），就是一種強連結。」嚴曉翠說。一般人看人脈多半著重在強連結，跟自己有直接關係或常碰面的才算是人脈，但嚴曉翠認為，人脈的意義可以擴大的，那些和你沒有直接密切的關係、卻可能佔有某種關鍵
自從上次小K的個人網站突破了10000次瀏覽量之後，我為自己訂立了下一個目標，那就是25000次瀏覽量，大家看到我寫這篇文章，就代表網站瀏覽量已經突破了25000次瀏覽量了！
與上次相比，現在大約是過了兩個月，我發覺我的個人網站在Organic Search Traffic（自然搜尋流量）上面的次
「自媒體」不單單只能透過「影片」、「聲音」、「文字」去分享，也有另一種是將自己形塑成一個「訊息傳播站」，你把你想要推薦的，一一展現給網路的使用者，從影視到聲音，從娛樂到閱讀，從日常到深度的思考⋯⋯像個真正的媒體，多元地傳播好內容給其他的人。