Author: Hu Qi

Abstract: In Chinese kung fu, “the world martial arts, invincible, only fast not broken”, in the world of programming, how to quickly build a blog of their own? Pagic + Vercel should be a good choice! Next, Copy siege lion and you together to build a blog!

Preview address: pagic.vercel.app/

Pagic

Pagic is a static website generator powered by Deno + React. It is simple to configure, supports rendering MD/TSX files into static pages, and has a large number of official and third-party themes and plug-ins to extend, which means you are free to develop and customize your theme style or functionality as you like. What are Pagic’s advantages over other static web site generators?

How should such excellent Pagic be used?

First, install Deno:

Then, install the latest version of Pagic:

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

Initialize the Pagic project:

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

Run pagic build:

pagic build --watch--serve
Copy the code

Now you can visit 127.0.0.1:8000 and see the “Hello World” page:

Vercel

Vercel is a cloud platform for static sites and Serverless functionality that fits perfectly with your workflow. It enables developers to host Websites and Web services that can be deployed on the fly, scale automatically, and require no oversight, all without configuration.

Deploying to Vercel requires us to create the deploy-Vercel.sh file in the project root directory:

Then create package.json in the project root directory:

Vercel supports Github, GitLab, Bitbucket and other login methods:

I use Github a lot, so I’ll create a new repository on Github, pagic_template:

Then submit the local code to Github:

Next, complete the following steps at the Vercel site:

1. Click Import Project on the home page

2. Enter the repository address, import the repository from Github, and click Continue

3. Configure project information

O Enter the project name (Other by default)

O Package and export configuration, build command: NPM run deploy:vercel Output directory: dist (can also be configured according to your own)

Click Deploy and wait for the deployment to complete

Blog

At present, Pagic supports three themes: Default, DOC, Blog, we try to modify pagic.config.ts file to open Pagic Blog mode:

In the above code, we have configured the Title, description and other parameters for the blog. Social is used to configure our social account. By default, Github, Email, Twitter, V2ex, Zhihu are supported. Of course, you can also develop your own themes or plug-ins to customize what you want.

Then we started to improve the navigation, classification, tags, links, etc., which are often used in blogs. At this time, we need to add some directories, such as About, Archive, links, etc. For unified management, we put all these folders in the SRC directory, our directory structure is as follows:

For configuration, we added nav and set srcDir to SRC:

On mobile, Pagic also has a good experience:

Then we’ll write our posts as markdown in the posts directory. We can add some fields to the.md header for sorting statistics, such as:

After writing a few articles, our blog looks rich!

At this point, we submitted the code to the remote repository and it was automatically deployed to Vercal. After that, Vercal automatically deployed the updates every time we wrote an article and submitted it to the remote repository.

Thanks for your advice: https://github/hu-qi/pagic\_template

This article is shared from Huawei cloud community “Pagic + Vercel speed build personal blog”, the original author: Hu Qi.

Click to follow, the first time to learn about Huawei cloud fresh technology ~