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

摘要：在中國功夫中，“天下武功，無堅不摧，唯快不破”，在編程的世界里，如何快速搭建一個屬於自己的博客呢？那么 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 網站完成以下步驟：

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

• 填寫項目名，框架預設默認 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: '[e-mail]',
          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

 

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