How to build a personal blog quickly? This move used by the siege lion is excellent!

Time:2021-9-15

Author: Hu Qi

Abstract: in Chinese Kung Fu, “the world’s martial arts are invincible, only fast”. In the programming world, how to quickly build a blog of your own? Then pagic + vercel should be a good choice! Next, the siege lion will build a blog with you!

Preview address: https://pagic.vercel.app/

Pagic

Pagic is a static website generator driven by DeNO + react. It has simple configuration, supports rendering MD / TSX files into static pages, and has a large number of official or third-party themes and plug-ins for expansion, which means that you can freely develop and customize your favorite theme style or function plug-ins. What are pagic’s advantages over other static website generators?

How to build a personal blog quickly? This move used by the siege lion is excellent!

How should such an excellent pagic be used?

First, install DeNO:

How to build a personal blog quickly? This move used by the siege lion is excellent!

How to build a personal blog quickly? This move used by the siege lion is excellent!

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`

How to build a personal blog quickly? This move used by the siege lion is excellent!

Initialize pagic project:

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

How to build a personal blog quickly? This move used by the siege lion is excellent!

Run pagic build:

pagic build --watch--serve

Now you can see it by visiting 127.0.0.1:8000「Hello world」Page:

How to build a personal blog quickly? This move used by the siege lion is excellent!

Vercel

Vercel is a cloud platform for static sites and serverless capabilities, which fully conforms to your workflow. It enables developers to host websites and web services that can be deployed instantly, automatically expanded, and do not require any supervision, all of which do not need to be configured.

To deploy to vercel, we need to create the deploy-vercel.sh file in the root directory of the project:

How to build a personal blog quickly? This move used by the siege lion is excellent!

Then create package.json in the project root directory:

How to build a personal blog quickly? This move used by the siege lion is excellent!

Vercel supports GitHub, gitlab, bitbucket and other login methods:

How to build a personal blog quickly? This move used by the siege lion is excellent!

I use GitHub more, so I create a new warehouse pagic on GitHub_ template :

Then submit the local code to GitHub:

How to build a personal blog quickly? This move used by the siege lion is excellent!

Next, complete the following steps on the vercel website:

  1. Click Import project on the home page
  2. Fill in the warehouse address, import the warehouse to be deployed from GitHub, and click continue
  3. Configure item information

O fill in the project name, and the frame defaults to other

O packaging and output configuration, build command: NPM run deploy: vercel output directory: dist (you can also fill in according to your own configuration)

How to build a personal blog quickly? This move used by the siege lion is excellent!

Click deploy and wait for the deployment to complete

How to build a personal blog quickly? This move used by the siege lion is excellent!

Blog

At present, pagic supports three themes: default, DOC and blog. We try to modify pagic.config.ts file to enable pagic’s blog mode:

How to build a personal blog quickly? This move used by the siege lion is excellent!

In the above code, we have configured parameters such as title and description for the blog. Social can configure our social account. By default, GitHub, email, twitter, V2EX and Zhihu are supported. Of course, you can also develop your own themes or plug-ins to define what you want.

Then we begin to improve the navigation, classification, labels, external links, etc. commonly used in blogs. At this time, we need to add some directories, such as about, archive, links, etc. in order to unify management, we place all these folders in the SRC directory. Our directory structure is as follows:

How to build a personal blog quickly? This move used by the siege lion is excellent!

In terms of configuration, we added NAV and set srcdir to SRC:

How to build a personal blog quickly? This move used by the siege lion is excellent!

How to build a personal blog quickly? This move used by the siege lion is excellent!

On the mobile end, pagic also has a good experience:

How to build a personal blog quickly? This move used by the siege lion is excellent!

Then we write articles in the form of markdown in the posts directory. We can add some fields in the. MD file header for classification statistics, such as:

How to build a personal blog quickly? This move used by the siege lion is excellent!

After writing some articles, our blog looks very rich!

How to build a personal blog quickly? This move used by the siege lion is excellent!

At this time, when we submit the code to the remote warehouse, it will be automatically deployed to vercal. In the future, every time we write an article and submit it to the remote warehouse, vercal will automatically deploy updates. It’s great!

Thanks for your advice: https://github/hu-qi/pagic_ te…

This article is shared from the Huawei cloud community “pagic + vercel quickly build a personal blog”, the original author: Hu Qi.

Click focus to learn about Huawei cloud’s new technologies for the first time~

Recommended Today

Beautify your code VB (VBS) code formatting implementation code

However, vb.net does have many new functions that VB6 does not have. The automatic typesetting of code is one, which is the function we want to realize today – VB code formatting.Let’s look at the effect: Before formatting: Copy codeThe code is as follows: For i = 0 To WebBrowser1.Document.All.length – 1 If WebBrowser1.Document.All(i).tagName = […]