我們的前端開發(fā)逆天了！1 小時(shí)搞定了新網(wǎng)站，還跟我說 “不要錢”

大家好，我是程序員魚皮。前段時(shí)間我們上線了一個(gè)新軟件《剪切助手》（https://jianqiezhushou.com），并且針對(duì)該項(xiàng)目做了一個(gè)官網(wǎng)：

很多同學(xué)表示官網(wǎng)很好看，還好奇是怎么做的，其實(shí)這個(gè)網(wǎng)站的背后還有個(gè)有趣的小故事。。。

魚皮：我們要做個(gè)官網(wǎng)，能下載應(yīng)用就行，一周時(shí)間怎么樣？

我們的前端開發(fā) - 多喝熱水同學(xué)：一周？太小瞧我了吧，1 小時(shí)給你搞定！

魚皮：唔嘈，你很勇哦？

本來以為他是開玩笑的，沒想到，1 小時(shí)后，他真的給我看了網(wǎng)站效果，而且比預(yù)期的好太多了。我的評(píng)價(jià)是：逆天。

他給我解釋道：其實(shí)我用了一個(gè)新框架，基本不用自己寫代碼，而且還可以白票平臺(tái)來免費(fèi)部署網(wǎng)站~

魚皮：不錯(cuò)不錯(cuò)，回頭給我的讀者們也分享一下！

于是，就有了下面這篇文章：

對(duì)于前端同學(xué)來說，用的最多的 Web 框架無非就是 React/Vue/Angular 這三大件了，那本文將帶你了解一個(gè)新的 Web 框架 Astro，并手把手帶你使用 Astro 搭建一個(gè)屬于自己的站點(diǎn)，用過的都說真香！

關(guān)于技術(shù)棧的選擇

假如現(xiàn)在有這樣一個(gè)需求，公司需要你去做一個(gè)官網(wǎng)落地頁(yè)，沒什么別的要求，界面美觀且能介紹公司就行，你會(huì)怎么選技術(shù)棧？

如果是以前，我可能會(huì)挑一個(gè)自己熟悉的語(yǔ)言去快速開發(fā)，但是現(xiàn)在你問我選什么技術(shù)棧，我可能會(huì)選擇 Astro，為什么？且聽我娓娓道來～

首先如果是自己花時(shí)間去開發(fā)的話，我們需要搭建網(wǎng)站的整體布局，如導(dǎo)航欄、logo、頁(yè)腳等等，還需要考慮移動(dòng)端的適配、網(wǎng)站 SEO 優(yōu)化等等...

我不知道你們會(huì)不會(huì)覺得有點(diǎn)煩？反正我是有點(diǎn)煩了，且自己做出來的可能還沒那么好看...

如果布局、適配、SEO 這些都配好了，只需要改改文字的話那該多好！

沒錯(cuò)，依靠 Astro 強(qiáng)大的主題生態(tài)就可以幫助我們快速完成這些事情！像我們公司的產(chǎn)品剪切助手的官網(wǎng)就是用 Astro 搭建的，如下：

還是很好看的有木有，且移動(dòng)端的響應(yīng)式適配、SEO 通通都搞定，一舉多得！

接下來我們就簡(jiǎn)單了解一下 Astro 這個(gè)框架，然后使用 Astro 快速生成一個(gè)自己的站點(diǎn)！

Astro 框架介紹

關(guān)于 Astro 的介紹，官方文檔（https://docs.astro.build/zh-cn/concepts/why-astro）給出了很明確的定位：“最適合構(gòu)建像博客、營(yíng)銷網(wǎng)站、電子商務(wù)網(wǎng)站這樣的以內(nèi)容驅(qū)動(dòng)的網(wǎng)站的 Web 框架”

它默認(rèn)就支持服務(wù)端渲染，且支持 React、Preact、Svelte、Vue、Solid、Lit、HTMX、Web 組件，這意味著你可以用任意框架的寫法來編寫 Astro，這一特性在 Astro 中被稱為 “群島”。

快速擁有一個(gè) Astro 應(yīng)用

這里我們不會(huì)從零到一的去介紹 Astro 的寫法，感興趣的同學(xué)可以簡(jiǎn)單從官網(wǎng)過一遍入門指南（https://docs.astro.build/zh-cn/getting-started），我們要做的就是依靠 Astro 強(qiáng)大的主題模板，實(shí)現(xiàn)只需要改改文字、寫一寫 Markdown 就能輕松搭建一個(gè)漂亮的博客網(wǎng)站！

1）選擇主題模板

進(jìn)入 Astro 官方模板網(wǎng)站（https://astro.build/themes），挑選一個(gè)自己心儀的模板，如下：

我選擇的模板是 https://astro.build/themes/details/astro-boilerplate/ ，我們進(jìn)入到這個(gè)模板的詳情頁(yè)，可以看到有兩個(gè)按鈕，如下：

第一個(gè)是源碼，第二個(gè)是在線效果的演示。

我們點(diǎn)擊 Get Started 獲取項(xiàng)目的源代碼。

2）查看模板的 README 文檔

通過 README 文檔我們可以了解到如下信息

1. 怎么去啟動(dòng)這個(gè)項(xiàng)目？
2. 怎么構(gòu)建發(fā)布？

如下圖：

那么接下來我們就按照 README 中所描述的步驟來操作，第一步我們先把項(xiàng)目拉取到本地，執(zhí)行如下命令：

git clone --depth=1 https://github.com/ixartz/Astro-boilerplate

在編輯器中打開這個(gè)項(xiàng)目，并安裝項(xiàng)目依賴，如下：

安裝依賴完成后啟動(dòng)項(xiàng)目，項(xiàng)目啟動(dòng)后我們?cè)L問 http://localhost:4321 ，如下圖：

ok，現(xiàn)在我們就得到了一個(gè)最原始的模板，和之前的預(yù)覽效果是一致的，如下：

3）更換項(xiàng)目中的個(gè)人信息

現(xiàn)在我們要做的就是把里面的文字換成自己的信息，沒有的信息我們可以刪掉，這里可以通過查看 index.astro 文件來了解整個(gè)網(wǎng)站的大致布局，從而找到我們要調(diào)整的組件，如下：

如果你不知道怎么調(diào)整也可以用另一種更簡(jiǎn)單的方法，直接搜索內(nèi)容關(guān)鍵詞，來找到我們要修改的內(nèi)容，如下：

下面是我調(diào)整后的效果，如下：

看起來也不賴，主打一個(gè)簡(jiǎn)約風(fēng)格。

4）如何發(fā)文

這是一個(gè)博客站，所以還需要找到發(fā)文入口，我們找到 posts 文件夾，在此文件夾下編寫 markdown 文件即可，配置按已有的格式修改，如下：

ok，接下來我們就嘗試一下發(fā)一篇文章，在 posts 文件夾下新建一個(gè) md 格式的文件，往里面寫入一些內(nèi)容，如下：

可以看到，我們編寫的 markdown 已經(jīng)被解析為了文章～

至此網(wǎng)站的搭建已經(jīng)結(jié)束了，剩下的就是自己在上面添加內(nèi)容。

現(xiàn)在網(wǎng)站我們有了，還需要讓別人能夠訪問你的網(wǎng)站，一般到這一步我們需要服務(wù)器，域名等等，如果沒有的話怎么辦？

白嫖！！將白嫖貫徹到底！！！

我們可以白嫖的第三方服務(wù)有：

1）GitHub Pages

2）Netlify

3）Cloudflare

4）Vercel

等等...

這里我們就以 Netlify 為例，其他的大家感興趣可以自行去了解。

部署

1）創(chuàng)建倉(cāng)庫(kù)

首先我們需要一個(gè)能夠存放代碼的地方，我們?nèi)?GitHub 創(chuàng)建一個(gè)代碼倉(cāng)庫(kù)，并上傳代碼，如下：

2）將倉(cāng)庫(kù)關(guān)聯(lián)到 Netlify

進(jìn)入到 Netlify登錄頁(yè)（https://app.netlify.com/login），這里因?yàn)槲覀兊拇a放在了 GitHub，所以我們選擇使用 GitHub 進(jìn)行登錄，如下：

選擇導(dǎo)入已有的項(xiàng)目，如下：

從 GitHub 導(dǎo)入，如下：

找到我們博客所在的代碼倉(cāng)庫(kù)，如下：

點(diǎn)擊倉(cāng)庫(kù)我們會(huì)進(jìn)入到部署配置頁(yè)，如下：

一些關(guān)鍵的配置說明都列出來了，按照要求配置即可，沒有特別說明的目前不需要關(guān)注，點(diǎn)擊部署后等待幾分鐘即可完成部署，如下：

現(xiàn)在我們?cè)L問 https://codereshui.netlify.app 就能看到部署的網(wǎng)站了，且后續(xù)有新的內(nèi)容變更的時(shí)候（比如發(fā)文），網(wǎng)站會(huì)自動(dòng)構(gòu)建并發(fā)布！

妥妥的一條龍服務(wù)！！！

最后，必須表?yè)P(yáng)一下我們團(tuán)隊(duì)前端開發(fā) —— 多喝熱水 同學(xué)，也是這篇文章的作者。他的技術(shù)非常強(qiáng)悍，在我分配官網(wǎng)建設(shè)需求的時(shí)候，很快地通過新框架搞定了。他平時(shí)也會(huì)分享一些前端開發(fā)的技術(shù)干貨和經(jīng)驗(yàn)，歡迎大家關(guān)注一波他的公眾號(hào)，一起學(xué)習(xí)進(jìn)步：