使用 Frontity 建立移植 WordPress 网站

在之前的文章中介绍了 Frontity，本篇文章将进一步介绍如何使用 Frontity 来建立一个网站（非耦合的方式），这些方法同样也可以用来移植现有的 WordPress 网站。本篇文章使用的主题是frontity-chakra-theme，该主题的 UI 基于 chakra，一个组件丰富、简洁、易用的前端 UI 框架。

一、安装 Node.js

在 Frontity 所在的服务器上安装升级 Node.js，以 Ubuntu 为例：

curl -fsSL https://deb.nodesource.com/setup_16.x | sudo -E bash –
sudo apt-get install -y nodejs
node -v && npm -v

二、创建 Frontity 项目，安装 Chakra 主题

npx frontity create sample-frontity-project
cd sample-frontity-project
npm install frontity-chakra-theme

三、把 Chakra 主题转换成本地包

在项目的 node_module目录中把 frontity-chakra-theme 目录移到项目的packages目录下，然后在项目的 package.json 文件中加入一项依赖声明：

…
“dependencies” : {
“@frontity/core” : “^1.14.3”,
…
“frontity-chakra-theme” : “./packages/frontity-chakra-theme”
}
…

然后在项目的根目录下运行下面的命令：

npm install

最后在项目的设置文件 frontity.settings.js 中加入 chakra 主题相关的配置：

const settings = {
…
packages : [
{
name: “frontity-chakra-theme”,
state: {
…

四、在项目的配置文件 frontity.setting.js 中配置 WordPress 链接

const settings = {
…
packages : [
{
name: “@frontity/wp-source”,
state: {
source: {
url: “https://your-site”,
//如果 WordPress 后台配置使用了目录和标签的前缀，加入下面两行。
categoryBase: “cat”,
tagBase: “tag”
…

五、启动应用并打开网站

执行下面的命令启动新建的应用：

npx frontity dev

打开浏览器，输入网站地址：http://localhost:3000，就可以看到 WordPress 发布的内容了。

六、把网站部署到云端（Vercel）

具体的步骤可以参考官方指南。

七、其它

如果使用非耦合的方式，可以参考官方指南对原 WordPress 的数据库进行修改。

在后续的文章中将介绍如何添加新的功能，如何对原有的 WordPress 的网站内容进行兼容性适配等。