摘要：在中國功夫中，“天下武功，無堅不摧，唯快不破”，在編程的世界裏，如何快速搭建一個屬於自己的博客呢？那麼 Pagic + Vercel 應該是個不錯的選擇！接下來，由Copy攻城獅和您一起搭建博客！
預覽地址： https://pagic.vercel.app/
本文分享自華爲雲社區《Pagic + Vercel 極速搭建個人博客》，原文作者：胡琦。
Pagic
Pagic 是一個由 Deno + React 驅動的靜態網站生成器。它配置簡單，支持將 md/tsx 文件渲染成靜態頁面，而且還有大量的官方或第三方主題和插件可供擴展，也就意味着您可以自由地開發定製您喜歡的主題風格或者功能插件。相比其他靜態網站生成器， Pagic有哪些優勢呢？
如此優秀的 Pagic 應該如何使用呢？
首先，安裝 Deno :
# Shell (Mac, Linux):
curl -fsSL https://deno.land/x/install/install.sh | sh
然後，安裝最新版本的 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 文件：
!/bin/sh
# Install deno
curl -fsSL https://deno.land/x/install/install.sh | sh
# Install pagic
/vercel/.deno/bin/deno install --unstable --allow-read --allow-write --allow-net https://deno.land/x/pagic/mod.ts
# Pagic build
/vercel/.deno/bin/deno run --unstable --allow-read --allow-write --allow-net --allow-run https://deno.land/x/pagic/mod.ts build然後在項目根目錄創建 package.json :
{
"scripts": {
"deploy:vercel": "sh deploy-vercel.sh"
}
}Vercel 支持 Github、GitLab、Bitbucket 等方式進行登錄：
我使用 Github 比較多，因此我在Github 上新建一個倉庫 pagic_template :
然後將本地的代碼提交到 Github：
接下來，在 Vercel 網站完成以下步驟：
- 在首頁點擊導入項目 (Import Project)
- 填寫倉庫地址，從 Github 導入要部署的倉庫，點擊繼續
- 配置項目信息
- 填寫項目名，框架預設默認 Other 即可
- 打包與輸出配置，構建命令: npm run deploy:vercel 輸出目錄: dist (也可以根據自己的配置填寫)
點擊部署，等待部署完成即可訪問
Blog
目前， Pagic 支持三種主題： Default、DOC、Blog，我們嘗試修改pagic.config.ts 文件開啓 Pagic 的博客模式:
export default {
theme: 'blog',
plugins: ['blog'],
title: 'pagic template',
description: 'Use this template to create a Pagic site with the blog theme.',
github: 'https://github.com/hu-qi/pagic_template',
blog: {
root: '/posts/',
social: {
github: 'hu-qi/pagic_template',
email: '[email protected]',
twitter: 'huqii',
v2ex: 'huqi',
zhihu: 'fashaoge'
}
}
};在上邊的代碼中，我們爲博客配置了 Title、description等參數，其中 social ，可配置我們的社交賬號，默認支持 Github、Email、Twitter、V2ex、Zhihu,當然您也可以自己開發主題或者插件來自定義您想要的。
接着我們開始完善博客中常用到的導航、分類、標籤、外鏈等,這時我們需要添加一些目錄，如about、archive、links等等，爲了統一管理，我們將這些文件夾全部放置在 src目錄下,我們的目錄結構如下：
site
├─ dist // output
├─ src // input
│ ├─ about
│ │ └─ README.md
│ ├─ archives
│ │ └─ README.md
│ ├─ assets
│ ├─ categories
│ │ └─ README.md
│ ├─ links
│ │ └─ README.md
│ ├─ posts // maybe write somethings
│ ├─ tags
│ │ └─ README.md
│ └─ README.md // homepage
├─ README.md
├─ deploy-vercel.sh
├─ package.json
└─ pagic.config.ts 配置方面，我們增加了 nav ，並把 srcDir 設置爲 src ：
export default {
+ srcDir: 'src',
+ nav: [
+ {
+ text: 'Homepage',
+ link: '/index.html',
+ icon: 'czs-home-l',
+ },
+ {
+ text: 'Categories',
+ link: '/categories/index.html',
+ icon: 'czs-category-l',
+ },
+ {
+ text: 'Tags',
+ link: '/tags/index.html',
+ icon: 'czs-tag-l',
+ },
+ {
+ text: 'About',
+ link: '/about/index.html',
+ icon: 'czs-about-l',
+ },
+ {
+ text: 'Archives',
+ link: '/archives/index.html',
+ icon: 'czs-box-l',
+ },
+ {
+ text: 'Friends',
+ link: '/links/index.html',
+ icon: 'czs-link-l',
+ },
+ ],
}
在移動端， Pagic 也有不錯的體驗：
接着我們在 posts 目錄下以markdown的形式寫文章，我們可以在 .md 文件頭加一些字段以便進行分類統計，如：
---
title: Pagic + Vercel 極速搭建個人博客
author: huqi
date: 2021/02/04
cover: 'https://assets.vercel.com/image/upload/v1595320886/front/home/globe-texture.jpg'
categories:
- Blog
tags:
- Deno
- React
- Pagic
- Vercel
---編寫一些文章之後，我們的博客看起來很豐富了！
此時，我們將代碼提交到遠程倉庫就會自動部署到 Vercal，以後，我們每寫一篇文章提交到遠程倉庫就 Vercal 就能自動部署更新，簡直太棒了！
感謝多多指教： https://github/hu-qi/pagic_template