免費，一鍵釋出web頁面

nw2018發表於2018-04-16
Web

在學習的過程中，是否存在以下痛點：希望使用現下流行的技術來開發個人的web專案，但因webpack過於繁瑣的配置而望而生畏；希望有一個線上的專案地址，但是購買雲主機費錢費時；或者是第三方編寫好的文件不夠美觀，希望有一個線上的文件地址，記錄技術積累，風格更為優雅，舒適

如果你存在以上疑問，這篇文章能很好地為你提供解決方案：

  • 使用parcel打包構建web頁面（parcel幾乎是零配置的，即可使用線下流行的技術）
  • 使用docsify編寫文件（文件風格更為優雅美觀，示例）
  • 使用firebase去託管我們頁面（提供免費的https靜態檔案託管服務）

使用以上三種工具，只需要少數幾條命令，即可完成：打包自己的web應用，編寫文件，並且擁有屬於自己完全免費的線上地址

node請使用8.x版本

使用firebase免費託管web頁面（需要翻牆）

使用firebase，首先請先註冊一個google賬號

step 1: 全域性安裝firebase-tools

npm install -g firebase-tools
複製程式碼

step 2: 首次使用firebase的話需要授權登入，如已經授權登入，請跳過該步驟

firebase login
複製程式碼

注：window環境下如果報錯了，請注意要使用cmd而不是git bash

step 3: 開啟firebase base控制檯，點選新增專案，如下圖

免費，一鍵釋出web頁面

step 4: 輸入專案名稱，並記下專案ID，如下圖

免費，一鍵釋出web頁面

step 5: 新建資料夾test-firebase（名字僅做舉例用）

step 6: cd test-firebase

step 7: firebase init，選擇Hosting，按下空格 & 回車；選擇剛才建立的專案；其他一路按回車，部分截圖如下

免費，一鍵釋出web頁面

免費，一鍵釋出web頁面
step 8: firebase deploy，執行該命令釋出應用到線上，等待一會，即可在控制檯看到你的線上地址！初始的頁面是這樣子：示例

到這裡為止，如果一切順利，即可使用firebase免費託管靜態頁面並且擁有屬於自己的線上地址，此外，還可以在firebase控制檯進行版本管理。

在step 7中，有一條選項What do you want to use as your public directory，預設是使用public作為靜態檔案最終的上傳路徑，這裡是可以修改的，在firebase.json中可以進行定製，更多內容參考firebase託管

使用parcel打包構建

現下流行的技術一般都需要編譯，而webpack被人詬病最多的地方莫過於配置過於繁瑣且容易出錯，這裡推薦使用parcel打包構建我們的應用，使用上很方便，學習參考資料如下：

雖然parcel號稱零配置，實際上還是需要配置一點點的內容，比如babel環境等，這裡寫了個種子專案，以parcel結合vue作為示例，parcel&vue demo

如你此前已安裝parcel，請確保全域性安裝的parcel版本 >= 1.7.0

npm install -g parcel-bundler
git clone git@github.com:nwa2018/parcel-vue-demo.git
cd parcel-vue-demo
npm i
parcel serve ./index.html --open -p 4567 --out-dir dist --no-cache
複製程式碼

當需要將應用釋出到線上的時候，參照上述介紹的firebase完成初始化(此處參照第一步，不再贅述)，最終釋出上線只需要兩條命令

parcel build ./index.html --out-dir public --no-cache
firebase deploy
複製程式碼

最終釋出上線的初始頁面長這樣：示例

使用docsify編寫文件

docsify支援使用md語法編寫文件，編寫出來的文件優雅舒適，甚至可以使用docsify編寫類似vue官網的文章，可以參考docsify官網以及docsify awesome，此篇文章的docsify版本

以docisfy-start-demo示例

安裝

npm i docsify-cli -g
複製程式碼

本地編寫文件

git clone git@github.com:nwa2018/docisfy-start-demo.git
docsify serve docisfy-start-demo/ -o -p 3456
複製程式碼

釋出到線上，使用firebase完成初始化(此處參照第一步，不再贅述)

注：這裡需要修改firebase.json中的public欄位為./，因為是需要將docisfy-start-demo目錄下的所有檔案提交上去進行託管

cd docisfy-start-demo
firebase deploy
複製程式碼

最終線上效果：示例

總結

  • 通過命令parcel serve ./index.html --open -p 4567 --out-dir dist --no-cache本地開發vue應用，配置內容非常少，即可使用現下流行的語法特性與工程化特性
  • 通過命令parcel build ./index.html --out-dir public --no-cache firebase deploy去打包構建我們的應用，並通過firebase deploy一鍵釋出應用，並且擁有屬於自己的線上地址
  • 通過命令docsify serve docisfy-start-demo/ -o -p 3456本地開啟服務編寫文件，並通過firebase deploy一鍵釋出文件，並且擁有屬於自己的線上地址

相關文章