从Hexo迁移到VuePress

# 前言

之前的博客搭建在基于Hexo的博客系统中。由于对Hexo及其相关的配套技术不熟悉，难以对其进行修改或二次开发。正好域名到期，因此决定迁移博客。由于我会一点点vue，所以选择了使用VuePress搭建新的博客并将旧博客中的内容迁移到新博客中。

VuePress 是一个以 Markdown 为中心的静态网站生成器。好处是可以使用 Markdown 来书写内容文档，并且将vue组件插入到文档中

# 参考资料

# 主题选用

VuePress作为一个开源项目，除了默认的主题之外，提供了扩展主题的能力。不同的主题内置了不同的插件以及样式。经过选择，我使用了vuepress-theme-hope 1.4k⭐

# 项目创建

这里参照官方文档，直接使用官方的方式创建项目。我选择使用pnpm作为包管理器，速度比较快。之后一步步按照官方的提示走就行了

1

pnpm create vuepress-theme-hope oneearmouse.com

这里说一下一个容易导致误区的项目结构

/src/.vuepress是vuepress以及主题的的项目配置文件存放路径
/src/.vuepress/config.ts是vuepress的配置文件
/src/.vuepress/theme.ts是vuepress-theme-hope的配置文件

# 旧博客日志导入

由于我旧的Hexo项目中的文章都是MarkDown格式写的，在MarkDown头部有相同的标识的信息,可以直接导入。

1
2
3
4
5
6
7


---
title: 
date: 
categories:
tags:
description: 
---

在/src目录下创建/posts目录，将所有旧的MarkDown文件直接复制到这个文件夹中。迁移理论上就完成了。

然后使用命令pnpm run docs:dev就可以在本地查看开发环境服务器启动后的效果。

# 项目内置功能配置

由于功能特别多，比较负责。建议直接在VuePress Theme Hope 官方文档中搜索查找自己想用的功能并修改，这里不再赘述

# 插件功能

一些插件在VuePress Theme Hope中没有直接默认提供，需要额外安装配置。这里记录一下

# 搜索功能

VuePress Theme Hope中的搜索功能需要配置后安装插件才能开启，参考

这里选择vuepress-plugin-search-pro进行配置

# 安装

1

pnpm add -D vuepress-plugin-search-pro

# 配置

在/src/.vuepress/theme.tsvuepress-theme-hope的配置文件中加入开启：

1
2
3
4
5


export default {
  plugins: [
    searchPro: true,
  ],
};

# 评论功能

VuePress Theme Hope中提供了常见的博客评论系统的支持，参考文档

这里我选择使用Giscus，一个基于Github讨论的评论插件。

# 配置

在github中创建一个公开的空仓库（或者你博客的公开仓库）。
仓库的setting->Feature->Discussions，选择Enable，并Set up discussions，使用默认公告发布
在github中安装Giscus(github.com/apps/giscus)
Giscus选择读取第一步中的公开仓库
前往(giscus.app/zh-CN)设置你的仓库和分类
将对应参数填写到/src/.vuepress/theme.ts中的对应文件中。类似

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


  plugins: {
    comment: {
      // You should generate and use your own comment service
      provider: "Giscus",
      repo: "author/repo-name", // github中的用户名/仓库名
      repoId: "xxxx", // giscus中的repo id
      category: "Announcements",
      categoryId: "xxxx" // giscus中的category
    },
 }

# google-analytics

可以直接使用@vuepress/plugin-google-analytics@next来启用Google Analytics 4。参考文档(https://ecosystem.vuejs.press/zh/plugins/google-analytics.html)

# 安装

1

pnpm add -D @vuepress/plugin-google-analytics@next

# 配置

在/src/.vuepress/config.tsvuepress的配置文件中：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


import { googleAnalyticsPlugin } from '@vuepress/plugin-google-analytics'

export default {
  plugins: [
    googleAnalyticsPlugin({
      // 配置项
      id: "your google analytics id",
    }),
  ],
}

google adsense 没有直接提供官方插件。因此我们可以选择另一种方式，将其加入所有VuePress生成的静态页面后的HTML中。

我们可以这样配置，在/src/.vuepress/config.tsvuepress的配置文件中添加head项目：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


head: [
    [
      "script",
      {
        "data-ad-client": "your google ad client tag",
        async: true,
        src: "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"
      }
    ]
  ]

这样，这个head就会带着这个参数出现在vuepress生成后的每个页面中了

# CloudFlare Page 部署

这次没有选择Github Pages，而是尝试了CloudFlare Page部署，也十分好用

部署流程：

代码同步到github仓库
确保代码master分支中存在package.json等文件，结构正确
登陆cloudflare dashboard
选择Page页面
创建项目，连接Github，选择对应仓库，授权
配置
- 框架：VuePress
- 构建命令：pnpm run docs:build
- 构建输出目录：.vuepress/dist
- 根目录：/
保存并部署
在自定义域名界面将自己需要使用的域名映射到这个CloudFlare Page上
完成
打开浏览器检验

# 总结

迁移博客到VuePress中的简单总结就完成了。vuepress-theme-hope 主题通过默认的配置就提供了丰富的开箱即用的功能，十分好用。推荐选择VuePress的使用这个主题建立博客

# 前言

# 参考资料

# 主题选用

# 项目创建

# 旧博客日志导入

# 项目内置功能配置

# 插件功能

# 搜索功能

# 安装

# 配置

# 评论功能

# 配置

# google-analytics

# 安装

# 配置

# google adsense

# CloudFlare Page 部署

# 总结