作者：胡琦
摘要：在中国功夫中，“天下文治，无坚不摧，唯快不破”，在编程的世界里，如何疾速搭建一个属于本人的博客呢？那么 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 网站实现以下步骤：
- 在首页点击导入我的项目 (Import Project)
- 填写仓库地址，从 Github 导入要部署的仓库，点击持续
- 配置我的项目信息
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 极速搭建集体博客》，原文作者：胡琦。
点击关注，第一工夫理解华为云陈腐技术~