关于这个博客搭建过程的点滴

缘起

在倒腾博客之前用 VuePress 做了一个笔记项目，由于我希望这个笔记项目的内容是比较规范的，所以在写笔记的时候一直都放不开手脚，觉得似乎少了一个可以打草稿的地方，自然而然想到了做博客，那博客比起笔记项目在风格上就自(hua)由(shao)很多，这样才符合博客的态度 😋。

为什么是 VuePress

之前在工作中接触过 Nuxt.js 写的数据标签管理界面，算是初次认识到了 Vue 这个框架。之后在 Vue3 发布的时候没忍住学了一把，用 NaiveUI 写了一个 demo，算是入了门也种草 Vue 友好的开发体验。VuePress 对我来说有诸多的有点，下面列一下：

由 Vue 驱动
由于我学了 Vue，而且 Vue 的开发对于新手友好，在需要定制主题或者组件的时候使用 Vue 开发会很方便。
基于 Vite 构建
如果你切身体验过 Vite 和 Webpack，你应该知道孰优孰劣。
内置默认主题开箱即用（懒人友好）
丰富的主题
丰富的插件

缺点

主要的缺点就是当前的版本还是 Beta，大部分插件和主题还没有适配 2.x 新版本 😝。在选用 VuePress 的时候对比了 GoLang 下的 HuGo、Facebook 的 Docusaurus、Rust 的 Zola。还有很多没试用过的 Hexo/Docsify/GitBook/WordPress/Jekyll 等等。

废话说的够多了，开始进入正题了。

环境准备

其实跟着官网教程走就行。

mkdir vuepress-starter
cd vuepress-starter

初始化项目

git init
yarn init

git init
npm init

添加 VuePress 依赖

yarn add -D vuepress@next

npm i -D vuepress@next

配置 Git 忽略 VuePress 的临时文件

echo 'node_modules' >> .gitignore
echo '.temp' >> .gitignore
echo '.cache' >> .gitignore

添加 Npm 运行脚本到 package.json

{
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }
}

吐槽

这里吐槽一下,完全可以添加一些命令行的 init 命令或 create 命令。类似tsc --init会自动生成 tsconfig.json 配置文件一样。前 5 步都是可以自动生成的。

博客主题安装

经过上面的步骤你的 VuePress 就可以正常运行了，但是还没有内容，同时还不是一个博客。

VuePress 内置了 theme-default 主题，这个主题不是我们要的，我们要去挑选一个博客主题，先看看我们有什么主题。

Awesome VuePress - V2 Themes

github.com

Awesome VuePress 列表

我的博客就选择了其中的vuepress-theme-gungnir主题。我们可以去主题的文档页看看如何安装这个主题。

第一步当让是添加依赖

pnpm add -D vuepress-theme-gungnir@next

yarn add -D vuepress-theme-gungnir@next

npm install -D vuepress-theme-gungnir@next

主题配置

然后在 .vuepress/config.js 或 .vuepress/config.ts（如果你在使用 TypeScript 的话）中指定主题：

// .vuepress/config.js

const { gungnirTheme } = require("vuepress-theme-gungnir");

module.exports = {
  ...
  theme: gungnirTheme({
    // 你的主题配置
  })
}

// .vuepress/config.ts

import { defineUserConfig } from "vuepress";
import { gungnirTheme } from "vuepress-theme-gungnir";

export default defineUserConfig({
  ...
  theme: gungnirTheme({
    // 你的主题配置
  })
});

这时候博客主页还不会显示任何东西，仍需要进行一些基本配置

作者信息

// .vuepress/config.js
import { GungnirThemeOptions } from "vuepress-theme-gungnir";

const themeConfig: GungnirThemeOptions = {
  theme: gungnirTheme({
    personalInfo: {
      // 必须：名称，将在首页、移动端侧边栏和文章作者信息处显示
      name: "Cool Dragon",

      // 必须：头像，将在首页和移动端侧边栏显示
      avatar: "/img/avatar.jpeg",

      // 必须：个人简介，将在首页显示
      description: "A cool dragon lost in human world.",

      // 可选：社交平台账号，将在首页和移动端侧边栏显示
      sns: {
        github: "Renovamen", // Github
        linkedin: "xiaohan-zou-55bba0160", // 领英
        facebook: "renovamen.zou", // Facebook
        twitter: "renovamen_zxh", // 推特
        zhihu: "chao-neng-gui-su", // 知乎
        weibo: "your-weibo-id", // 新浪微博
        email: "renovamenzxh@gmail.com", // 邮箱
        rss: "/rss.xml", // RSS 文件的链接
        // 添加其他的社交平台
        bilibili: {
          // 随便什么名字
          icon: "ri-bilibili-line", // 社交平台的图标
          link: "https://www.example.com/", // 主页链接
        },
        // ...
      },
    },
  }),
};

在加上这个配置之后启动项目就可以看到主页了

pnpm docs:dev

npm run docs:dev

yarn docs:dev

不过这个时候还没有头像、页面背景图和博文。还需要根据主题文档继续配置，这里就不废话了。

Github Pages

突然有点懒，就放个链接吧，Vuepress 部署。文档都是中文的，相信你能看懂。

Vercel

Vercel 是什么，Vercel 是一个用于前端框架和静态站点的平台。他的优点很多，对我来说最突出的就是快，这个快不是构建、不是部署，而是他有香港的节点，所以国内访问会比较快 👍。他操作简单，还可以和 github 集成。基本没什么多说的，就连Vuepress 官方部署教程都简单的不行。

关于这个博客搭建过程的点滴

# 缘起

# 为什么是 VuePress

# 环境准备

# 博客主题安装

# 主题配置

# 作者信息

# Github Pages

# Vercel

缘起