大家好，我是程式設計師魚皮。前段時間我們上線了一個 ，並且針對該計畫做了一個官網：
很多同學表示官網很好看，還好奇是怎麽做的，其實這個網站的背後還有個有趣的小故事。。。
魚皮：我們要做個官網，能下載套用就行，一周時間怎麽樣？
我們的前端開發 - 多喝熱水同學：一周？太小瞧我了吧，1 小時給你搞定！
魚皮：唔嘈，你很勇哦？
本來以為他是開玩笑的，沒想到，1 小時後，他真的給我看了網站效果，而且比預期的好太多了。我的評價是： 逆天 。
他給我解釋道：其實我用了一個新框架，基本不用自己寫程式碼，而且還可以白票平台來免費部署網站~
魚皮：不錯不錯，回頭給我的讀者們也分享一下！
於是，就有了下面這篇文章：
對於前端同學來說，用的最多的 Web 框架無非就是 React/Vue/Angular 這三大件了，那本文將帶你了解一個新的 Web 框架 Astro ，並手把手帶你使用 Astro 搭建一個屬於自己的站點， 用過的都說真香！
關於技術棧的選擇
假如現在有這樣一個需求，公司需要你去做一個官網落地頁，沒什麽別的要求，界面美觀且能介紹公司就行，你會怎麽選技術棧？
如果是以前，我可能會挑一個自己熟悉的語言去快速開發，但是現在你問我選什麽技術棧，我可能會選擇 Astro，為什麽？且聽我娓娓道來～
首先如果是自己花時間去開發的話，我們需要搭建網站的整體布局，如導航欄、logo、頁尾等等，還需要考慮移動端的適配、網站 SEO 最佳化等等...
我不知道你們會不會覺得有點煩？反正我是有點煩了，且自己做出來的可能還沒那麽好看...
如果布局、適配、SEO 這些都配好了，只需要改改文字的話那該多好！
沒錯，依靠 Astro 強大的主題生態就可以幫助我們快速完成這些事情！像我們公司的產品剪下助手的官網就是用 Astro 搭建的，如下：
還是很好看的有木有，且移動端的響應式適配、SEO 通通都搞定，一舉多得！
接下來我們就簡單了解一下 Astro 這個框架，然後使用 Astro 快速生成一個自己的站點！
Astro 框架介紹
關於 Astro 的介紹，官方文件（https://docs.astro.build/zh-cn/concepts/why-astro）給出了很明確的定位：「最適合構建像 部落格、行銷網站、電子商務網站 這樣的以內容驅動的網站的 Web 框架」
它預設就支持伺服端渲染，且支持 React、Preact、Svelte、Vue、Solid、Lit、HTMX、Web 元件，這意味著你可以用任意框架的寫法來編寫 Astro，這一特性在 Astro 中被稱為 「 群島 」。
快速擁有一個 Astro 套用
這裏我們不會從零到一的去介紹 Astro 的寫法，感興趣的同學可以簡單從官網過一遍入門指南（https://docs.astro.build/zh-cn/getting-started），我們要做的就是依靠 Astro 強大的主題樣版，實作只需要改改文字、寫一寫 Markdown 就能輕松搭建一個漂亮的部落格網站！
1）選擇主題樣版
進入 Astro 官方樣版網站（https://astro.build/themes），挑選一個自己心儀的樣版，如下：
我選擇的樣版是 https://astro.build/themes/details/astro-boilerplate/ ，我們進入到這個樣版的詳情頁，可以看到有兩個按鈕，如下：
第一個是源碼，第二個是線上效果的演示。
我們點選 Get Started 獲取計畫的原始碼。
2）檢視樣版的 README 文件
透過 README 文件我們可以了解到如下資訊
怎麽去啟動這個計畫？
怎麽構建釋出？
如下圖：
那麽接下來我們就按照 README 中所描述的步驟來操作，第一步我們先把計畫拉取到本地，執行如下命令：
git clone --depth=1 https://github.com/ixartz/Astro-boilerplate
在編輯器中開啟這個計畫，並安裝計畫依賴，如下：
安裝依賴完成後啟動計畫，計畫啟動後我們存取 http://localhost:4321 ，如下圖：
ok，現在我們就得到了一個最原始的樣版，和之前的預覽效果是一致的，如下：
3）更換計畫中的個人資訊
現在我們要做的就是把裏面的文字換成自己的資訊，沒有的資訊我們可以刪掉，這裏可以透過檢視 index.astro 檔來了解整個網站的大致布局，從而找到我們要調整的元件，如下：
如果你不知道怎麽調整也可以用另一種更簡單的方法，直接搜尋內容關鍵詞，來找到我們要修改的內容，如下：
下面是我調整後的效果，如下：
看起來也不賴，主打一個簡約風格。
4）如何發文
這是一個部落格站，所以還需要找到發文入口，我們找到 posts 資料夾，在此資料夾下編寫 markdown 檔即可，配置按已有的格式修改，如下：
ok，接下來我們就嘗試一下發一篇文章，在 posts 資料夾下新建一個 md 格式的檔，往裏面寫入一些內容，如下：
可以看到，我們編寫的 markdown 已經被解析為了文章～
至此網站的搭建已經結束了，剩下的就是自己在上面添加內容。
現在網站我們有了，還需要讓別人能夠存取你的網站，一般到這一步我們需要伺服器，網域名稱等等，如果沒有的話怎麽辦？
白嫖！！將白嫖貫徹到底！！！
我們可以白嫖的第三方服務有：
1）GitHub Pages
2）Netlify
3）Cloudflare
4）Vercel
等等...
這裏我們就以 Netlify 為例，其他的大家感興趣可以自行去了解。
部署
1）建立倉庫
首先我們需要一個能夠存放程式碼的地方，我們去 GitHub 建立一個程式碼倉庫，並上傳程式碼，如下：
2）將倉庫關聯到 Netlify
進入到 Netlify登入頁（https://app.netlify.com/login），這裏因為我們的程式碼放在了 GitHub，所以我們選擇使用 GitHub 進行登入，如下：
選擇匯入已有的計畫，如下：
從 GitHub 匯入，如下：
找到我們部落格所在的程式碼倉庫，如下：
點選倉庫我們會進入到部署配置頁，如下：
一些關鍵的配置說明都列出來了，按照要求配置即可，沒有特別說明的目前不需要關註，點選部署後等待幾分鐘即可完成部署，如下：
現在我們存取 https://codereshui.netlify.app 就能看到部署的網站了，且後續有新的內容變更的時候（比如發文），網站會自動構建並釋出！
妥妥的一條龍服務！！！
最後，必須表揚一下我們團隊前端開發 ——
多喝熱水
同學，也是這篇文章的作者。他的技術非常強悍，在我分配官網建設需求的時候，很快地透過新框架搞定了。他平時也會分享一些前端開發的技術幹貨和經驗，歡迎大家關註一波他的公眾號，一起學習進步：
往期推薦
