使用heroku快速建置一個能分享的網頁(純HTML+CSS)
4 min readFeb 4, 2021
前置安裝作業：
請先到Heroku網站註冊一個帳號。
安裝Heroku CLI及download網址：
Mac OSX & Windows安裝方式不太一樣，請參照上述的網址，或Mac OSX可使用終端機輸入以下指令進行安裝。
#Mac
請先安裝 brew
brew tap heroku/brew && brew install heroku#ubuntu 16+
sudo snap install --classic heroku
使用 heroku結合git進行部署，以下是部署可參考的文件網址：
使用heroku以基本HTML+CSS靜態網頁部署的操作：
heroku login
heroku git:clone -a serene-cove-46135git add .
git commit -am "make it better"
git push heroku master# 把主頁檔案改成php副檔名， ex. index.php
對象：
針對剛入門的前端網頁設計者或視覺設計師，有玩過一些HTML+CSS者可以看此篇。
Heroku可針對很多種程式語言，此篇是以純靜態視覺網頁為主，主要就是快速讓客戶看到自己網站想要的畫面而寫的，如有其他語言要使用Heroku的需求，可以自行研究，或日後撰寫新的文章特別針對該語言做分享唷。
附註 HTML基礎架構：
<!-- index.php -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Front-end web page</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
</body>
<script src="js/index.js"></script>
</html>結論：
以上，是部署的流程，對於非工程師來說，可能不容易一次就吸收，但最重要是先瞭解這些流程，最重要是要如何設計思考，你要做什麼，把需求應用出來，呈現部署就夠了！至於技術會透過應用的過程一點一滴向上成長。接著下集會著重在Heroku的各種應用，以及簡單程式碼的演示並無私分享給大家。
