Kotlin 系列
Kate
2021-11-18|閱讀時間 ‧ 約 6 分鐘

建立個人網站 Set up Personal Website

因為最近需要建立自我品牌，所以決定來架個人網站。
架個人網站的方式非常多，最簡單的是直接找台伺服器拿現有模板套上去。
但是我喜歡自由，而且也已經有方格子部落格網站，所以打算做個簡單的名片網站。
以前寫過Html、Jsp、Asp、Php等各種網頁程式語言，不過現在聽說可以用Kotlin一個程式語言打天下，所以就來挑戰看看。
打開官網看看有什麼不錯的前端框架的時候，發現Compose框架，不由得特別留意。
前端框架 https://kotlinlang.org/docs/js-overview.html#compose-for-web
前端框架 https://kotlinlang.org/docs/js-overview.html#compose-for-web
啊，Jetpack Compose for Web今年2021五月才推出，現在還是Alpha探路版，不過想到在Android的世界裡也有Compose函式庫，也許哪天這些相似的產品就整合了呢！於是決定跳下坑了。
既希望一套程式碼可以應付全部業務，又怕被賤價的矛盾工程師。
Android的Compose框架 https://kotlinlang.org/docs/js-overview.html#compose-for-web https://developer.android.com/jetpack/compose
Compose框架跨平台計畫 https://www.jetbrains.com/lp/compose-mpp/
今年內會出正式版本，那個時候也許會有比較完整的文件，距離年底剩下一個半月，但是我已經等不及啦，所以直接來看程式碼實戰教學。
https://github.com/JetBrains/compose-jb/tree/master/tutorials/Web/Getting_Started
環境要求有兩個，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的空間。
原始來源：https://github.com/JetBrains/compose-jb/tree/master/templates
壓縮版：https://github.com/kateLee/compose-jb/tree/master/templates
把範例web-template名字改成personal_website後，就選擇中間的Open，並選擇信任專案。
在下面的Terminal執行./gradlew jsBrowserRun
先跑跑看範例，當然第一次跑就是要等待。
不知道為啥 http://localhost:8080/ 打開的是空白網頁。
後來才發現專案名字變動的話，index.html裡的js名稱也要隨之變動。
修正後Control鍵+c中斷，重新執行./gradlew jsBrowserRun，就成功看到範例網頁：顯示按鈕被點擊的次數，重新整理後數字會歸零。
目標：
  • 背景色：黑色
  • 文字色：金色
內容包含：
  • 名字
  • 自我介紹
  • 社交帳號
  • 作品集
參考https://github.com/kateLee/compose-jb/tree/master/tutorials/Web/Building_UI開始修改Main.Kt檔案。
好了，名字放上去了，接下來就是連結們了。
幸運的，找到一個提供各種第三方圖示的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放靜態網頁的過程會另外寫一篇文章。
程式碼也會另外寫一篇文章說明，這邊先簡單帶過，附上程式碼網址：
GitHub - kateLee/personal_website at 1.0.0
You can't perform that action at this time. You signed in with another tab or window. You signed out in another tab or window. Reload to refresh your session. Reload to refresh your session.
網站內容會持續更新和擴充，比如說我最後還是把圖片按鈕的顏色都一起換成和文字一樣的金閃閃了。
請期待後續發表的文章。
分享至
成為作者繼續創作的動力吧！
Kotlin 系列
追蹤
Kotlin 系列
追蹤
從 Google News 追蹤更多 vocus 的最新精選內容從 Google News 追蹤更多 vocus 的最新精選內容

作者的相關文章

Kate的沙龍 的其他內容

你可能也想看

發表回應

成為會員 後即可發表留言
© 2024 vocus All rights reserved.