如何極速極速搭建我的博客？Copy攻城獅用的這一招很優秀！

做者：胡琦

摘要：在中國功夫中，「天下武功，無堅不摧，惟快不破」，在編程的世界裏，如何快速搭建一個屬於本身的博客呢？那麼 Pagic + Vercel 應該是個不錯的選擇！接下來，由Copy攻城獅和您一塊兒搭建博客！

預覽地址： https://pagic.vercel.app/

Pagic

Pagic 是一個由 Deno + React 驅動的靜態網站生成器。它配置簡單，支持將 md/tsx 文件渲染成靜態頁面，並且還有大量的官方或第三方主題和插件可供擴展，也就意味着您能夠自由地開發定製您喜歡的主題風格或者功能插件。相比其餘靜態網站生成器， Pagic有哪些優點呢？

如此優秀的 Pagic 應該如何使用呢？

首先，安裝 Deno :

而後，安裝最新版本的 Pagic :

`deno install --unstable--allow-read--allow-write--allow-net--allow-run--name=pagic
https://deno.land/x/pagic/mod.ts`

初始化 Pagic 項目：

mkdir site &&cd site && echo "export default {};">pagic.config.ts && echo "# Hello
world" > README.md

運行 pagic build:

pagic build --watch--serve

如今您訪問 127.0.0.1:8000 就能看到 「Hello world」 的頁面：

Vercel

Vercel是一個用於靜態站點和 Serverless 功能的雲平臺，徹底符合您的工做流。它使開發人員可以託管網站和web服務，這些網站和服務能夠即時部署、自動擴展，而且不須要任何監督，全部這些都不須要配置。

部署到 Vercel 須要咱們先在項目根目錄建立 deploy-vercel.sh 文件：

而後在項目根目錄建立 package.json :

Vercel 支持 Github、GitLab、Bitbucket 等方式進行登陸：

我使用 Github 比較多，所以我在Github 上新建一個倉庫 pagic_template :

而後將本地的代碼提交到 Github：

接下來，在 Vercel 網站完成如下步驟：

1. 在首頁點擊導入項目 (Import Project)
2. 填寫倉庫地址，從 Github 導入要部署的倉庫，點擊繼續
3. 配置項目信息

o 填寫項目名，框架預設默認 Other 便可

o 打包與輸出配置，構建命令: npm run deploy:vercel 輸出目錄: dist (也能夠根據本身的配置填寫)

點擊部署，等待部署完成便可訪問

Blog

目前， Pagic 支持三種主題： Default、DOC、Blog，咱們嘗試修改pagic.config.ts 文件開啓 Pagic 的博客模式:

在上邊的代碼中，咱們爲博客配置了 Title、description等參數，其中 social ，可配置咱們的社交帳號，默認支持 Github、Email、Twitter、V2ex、Zhihu,固然您也能夠本身開發主題或者插件來自定義您想要的。

接着咱們開始完善博客中經常使用到的導航、分類、標籤、外鏈等,這時咱們須要添加一些目錄，如about、archive、links等等，爲了統一管理，咱們將這些文件夾所有放置在 src目錄下,咱們的目錄結構以下：

配置方面，咱們增長了 nav ，並把 srcDir 設置爲 src ：

在移動端， Pagic 也有不錯的體驗：

接着咱們在 posts 目錄下以markdown的形式寫文章，咱們能夠在 .md 文件頭加一些字段以便進行分類統計，如：

編寫一些文章以後，咱們的博客看起來很豐富了！

此時，咱們將代碼提交到遠程倉庫就會自動部署到 Vercal，之後，咱們每寫一篇文章提交到遠程倉庫就 Vercal 就能自動部署更新，簡直太棒了！

感謝多多指教： https://github/hu-qi/pagic_te...

本文分享自華爲雲社區《Pagic + Vercel 極速搭建我的博客》，原文做者：胡琦。

點擊關注，第一時間瞭解華爲雲新鮮技術~