建立個人網站 Set up Personal Website

更新於 發佈於 閱讀時間約 6 分鐘

因為最近需要建立自我品牌,所以決定來架個人網站。

架個人網站的方式非常多,最簡單的是直接找台伺服器拿現有模板套上去。

但是我喜歡自由,而且也已經有方格子部落格網站,所以打算做個簡單的名片網站。

以前寫過Html、Jsp、Asp、Php等各種網頁程式語言,不過現在聽說可以用Kotlin一個程式語言打天下,所以就來挑戰看看。

打開官網看看有什麼不錯的前端框架的時候,發現Compose框架,不由得特別留意。

raw-image

啊,Jetpack Compose for Web今年2021五月才推出,現在還是Alpha探路版,不過想到在Android的世界裡也有Compose函式庫,也許哪天這些相似的產品就整合了呢!於是決定跳下坑了。

既希望一套程式碼可以應付全部業務,又怕被賤價的矛盾工程師。
raw-image


raw-image

今年內會出正式版本,那個時候也許會有比較完整的文件,距離年底剩下一個半月,但是我已經等不及啦,所以直接來看程式碼實戰教學。

raw-image

環境要求有兩個,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
raw-image

因為還沒出穩定版,所以也沒有專案模組建立引導精靈,只能用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,並選擇信任專案。

raw-image


raw-image

在下面的Terminal執行./gradlew jsBrowserRun

先跑跑看範例,當然第一次跑就是要等待。

raw-image


raw-image

不知道為啥 http://localhost:8080/ 打開的是空白網頁。

後來才發現專案名字變動的話,index.html裡的js名稱也要隨之變動。

raw-image

修正後Control鍵+c中斷,重新執行./gradlew jsBrowserRun,就成功看到範例網頁:顯示按鈕被點擊的次數,重新整理後數字會歸零。

raw-image

目標:

  • 背景色:黑色
  • 文字色:金色

內容包含:

  • 名字
  • 自我介紹
  • 社交帳號
  • 作品集

參考https://github.com/kateLee/compose-jb/tree/master/tutorials/Web/Building_UI開始修改Main.Kt檔案。

raw-image




raw-image

好了,名字放上去了,接下來就是連結們了。

幸運的,找到一個提供各種第三方圖示的css:https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css

raw-image
raw-image

背景色屬性也從div挪移到上層的body區域。

raw-image
raw-image

再來就是放上伺服器供外網連線。

本來想放在Firebase,但是FIrebase設定上還要下載npm套件,覺得太麻煩,所以就只好放在GitHub了。

在此分享這次開發的個人網站網址:https://katelee.github.io/personal_website/

GitHub放靜態網頁的過程會另外寫一篇文章。

程式碼也會另外寫一篇文章說明,這邊先簡單帶過,附上程式碼網址:

網站內容會持續更新和擴充,比如說我最後還是把圖片按鈕的顏色都一起換成和文字一樣的金閃閃了。

請期待後續發表的文章。

留言
avatar-img
留言分享你的想法!
安立格-avatar-img
2023/10/08
很有價值的資訊,感恩😊
avatar-img
Kate的沙龍
7會員
45內容數
和 Kotlin 相關的系列文章。 給程式初學者的「Kotlin 學習系列」 給正在實戰的工程師「Kotlin 實戰系列」
Kate的沙龍的其他內容
2023/03/22
比起說這是新技術,不如說是統一前端規格。 以前在不同框架下,類似功能的東西名字各不相同。比如輸入文字的物件,Android叫做EditText,iOS叫做UITextField,Html叫做TextBox或是input標籤。 這讓跨平台的開發者非常痛苦,痛不欲生。 而統一規格意味著,只要專心寫一套程
2023/03/22
比起說這是新技術,不如說是統一前端規格。 以前在不同框架下,類似功能的東西名字各不相同。比如輸入文字的物件,Android叫做EditText,iOS叫做UITextField,Html叫做TextBox或是input標籤。 這讓跨平台的開發者非常痛苦,痛不欲生。 而統一規格意味著,只要專心寫一套程
2021/11/23
去年停了近一年這裡的文章,其實是因為忙著將2020 iThome 鐵人賽的得獎作品——每年九月會舉辦的活動,連續三十天發表IT技術類文章——集結成書。 《老姐要用Kotlin寫專案:從 Server 到 Android APP 的開發生存日記》是以小說的敘事方式,將一對姐弟工程師合作
2021/11/23
去年停了近一年這裡的文章,其實是因為忙著將2020 iThome 鐵人賽的得獎作品——每年九月會舉辦的活動,連續三十天發表IT技術類文章——集結成書。 《老姐要用Kotlin寫專案:從 Server 到 Android APP 的開發生存日記》是以小說的敘事方式,將一對姐弟工程師合作
2021/11/22
此版本的目標畫面成果是: *金色名字。 *金色社交按鈕圖示,點擊按鈕另開對應的網頁或著顯示comming soon。 *名字和按鈕在網頁中央,如果網頁寬度不夠會換行,夠就不換行。
Thumbnail
2021/11/22
此版本的目標畫面成果是: *金色名字。 *金色社交按鈕圖示,點擊按鈕另開對應的網頁或著顯示comming soon。 *名字和按鈕在網頁中央,如果網頁寬度不夠會換行,夠就不換行。
Thumbnail
看更多
你可能也想看
Thumbnail
孩子寫功課時瞇眼?小心近視!這款喜光全光譜TIONE⁺光健康智慧檯燈,獲眼科院長推薦,網路好評不斷!全光譜LED、180cm大照明範圍、5段亮度及色溫調整、350度萬向旋轉,讓孩子學習更舒適、保護眼睛!
Thumbnail
孩子寫功課時瞇眼?小心近視!這款喜光全光譜TIONE⁺光健康智慧檯燈,獲眼科院長推薦,網路好評不斷!全光譜LED、180cm大照明範圍、5段亮度及色溫調整、350度萬向旋轉,讓孩子學習更舒適、保護眼睛!
Thumbnail
創作者營運專員/經理(Operations Specialist/Manager)將負責對平台成長及收入至關重要的 Partnership 夥伴創作者開發及營運。你將發揮對知識與內容變現、影響力變現的精準判斷力,找到你心中的潛力新星或有聲量的中大型創作者加入 vocus。
Thumbnail
創作者營運專員/經理(Operations Specialist/Manager)將負責對平台成長及收入至關重要的 Partnership 夥伴創作者開發及營運。你將發揮對知識與內容變現、影響力變現的精準判斷力,找到你心中的潛力新星或有聲量的中大型創作者加入 vocus。
Thumbnail
# 簡介 身為一位專注於 Vue.js 的前端開發者,這是我第一次嘗試構建 Flutter 網頁應用。讓我們開始吧! ## 第一次嘗試 ### 第一步:創建一個 Flutter 應用 首先,通過運行以下命令來創建一個新的 Flutter 項目: ```sh flutter
Thumbnail
# 簡介 身為一位專注於 Vue.js 的前端開發者,這是我第一次嘗試構建 Flutter 網頁應用。讓我們開始吧! ## 第一次嘗試 ### 第一步:創建一個 Flutter 應用 首先,通過運行以下命令來創建一個新的 Flutter 項目: ```sh flutter
Thumbnail
其實要為專案建立操作介面的方式很多,除了網頁之外,還能另外寫個專門的手機 APP 連線,或是乾脆升級算法,讓我們能隨口喊一聲「嘿OO!」就搞定,不過⋯
Thumbnail
其實要為專案建立操作介面的方式很多,除了網頁之外,還能另外寫個專門的手機 APP 連線,或是乾脆升級算法,讓我們能隨口喊一聲「嘿OO!」就搞定,不過⋯
Thumbnail
不知道你是否有以下困擾呢? 「自己寫好的程式,若要呈現在網路上,該怎麼辦?」 「手上有個html的檔案,但是要如何分享給朋友們?」 「做一個網站要花主機的錢,如何有個免費託管主機的地方呢?」 以上問題,將由github pages來幫你解決喔!
Thumbnail
不知道你是否有以下困擾呢? 「自己寫好的程式,若要呈現在網路上,該怎麼辦?」 「手上有個html的檔案,但是要如何分享給朋友們?」 「做一個網站要花主機的錢,如何有個免費託管主機的地方呢?」 以上問題,將由github pages來幫你解決喔!
Thumbnail
萬事起頭 這個簡單到不行的極度簡略步驟,卻是一切的基礎
Thumbnail
萬事起頭 這個簡單到不行的極度簡略步驟,卻是一切的基礎
Thumbnail
自己建立自己的依賴然後去使用 準備Prepare: 1.GitHub 2.https://jitpack.io/ Step1: Create Create Dependency project . 一般的java專案都可以 Create Fun or Class or You need
Thumbnail
自己建立自己的依賴然後去使用 準備Prepare: 1.GitHub 2.https://jitpack.io/ Step1: Create Create Dependency project . 一般的java專案都可以 Create Fun or Class or You need
Thumbnail
此版本的目標畫面成果是: *金色名字。 *金色社交按鈕圖示,點擊按鈕另開對應的網頁或著顯示comming soon。 *名字和按鈕在網頁中央,如果網頁寬度不夠會換行,夠就不換行。
Thumbnail
此版本的目標畫面成果是: *金色名字。 *金色社交按鈕圖示,點擊按鈕另開對應的網頁或著顯示comming soon。 *名字和按鈕在網頁中央,如果網頁寬度不夠會換行,夠就不換行。
Thumbnail
程式碼建置後的結果一樣在build下面,我們只需要{專案資料夾}/build/js/packages/{專案名}/kotlin/裡的四個檔案。 我另外開了一個gh_pages的Git分支,命名由來是GitHub的pages,除了initial的commit以外,只新增剛剛的四個檔案。
Thumbnail
程式碼建置後的結果一樣在build下面,我們只需要{專案資料夾}/build/js/packages/{專案名}/kotlin/裡的四個檔案。 我另外開了一個gh_pages的Git分支,命名由來是GitHub的pages,除了initial的commit以外,只新增剛剛的四個檔案。
Thumbnail
因為最近需要建立自我品牌,所以決定來架個人網站。 架個人網站的方式非常多,最簡單的是直接找台伺服器拿現有模板套上去。 但是我喜歡自由,而且也已經有方格子部落格網站,所以打算做個簡單的名片網站。
Thumbnail
因為最近需要建立自我品牌,所以決定來架個人網站。 架個人網站的方式非常多,最簡單的是直接找台伺服器拿現有模板套上去。 但是我喜歡自由,而且也已經有方格子部落格網站,所以打算做個簡單的名片網站。
Thumbnail
安裝軟體:ATOM-https://atom.io/ 基本上安裝畫面上的download會顯示您目前所用的工具所需的軟體 這邊顯示是Windows的64-bit就是我所用的~Mac會顯示Mac用的 2.每個軟體學習一開始都是要從HELLO WORLD開始,是因為要確認”環境”是否安裝”完成
Thumbnail
安裝軟體:ATOM-https://atom.io/ 基本上安裝畫面上的download會顯示您目前所用的工具所需的軟體 這邊顯示是Windows的64-bit就是我所用的~Mac會顯示Mac用的 2.每個軟體學習一開始都是要從HELLO WORLD開始,是因為要確認”環境”是否安裝”完成
Thumbnail
現在,開始建立第一個檔案吧,一樣用最簡單的 Hello World 示範。 在 kotlin 資料夾按右鍵選擇 New 裡的 Kotlin File/Class 。 雖然有許多格式可以選,但其實只是 IDE 提供初始程式碼的差別,完全可以中途更改,我們這次選最基本的 File 格式就好。 命名檔案和
Thumbnail
現在,開始建立第一個檔案吧,一樣用最簡單的 Hello World 示範。 在 kotlin 資料夾按右鍵選擇 New 裡的 Kotlin File/Class 。 雖然有許多格式可以選,但其實只是 IDE 提供初始程式碼的差別,完全可以中途更改,我們這次選最基本的 File 格式就好。 命名檔案和
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News