返回

网络开发新手也能轻松搞定博客系统？你绝对想不到，试试gridsome和strapi你就知道了

前端

前言

如今，博客已经成为了一种非常流行的信息传播方式。人们可以在博客上分享自己的想法、经验和知识，也可以通过博客来获取自己感兴趣的信息。如果你也想创建一个属于自己的博客，那么你一定不能错过gridsome和strapi这两个神器！

gridsome是一个基于Vue.js的静态网站生成器，它可以帮助你快速生成一个具有良好性能和SEO优化的静态网站。strapi则是一个无头内容管理系统(CMS)，它可以帮助你轻松管理你的博客内容。

一、安装gridsome和strapi

  1. 安装gridsome
npm install -g gridsome
  1. 安装strapi
npm install -g strapi

二、创建gridsome项目

gridsome create my-blog

三、创建strapi项目

strapi new my-strapi-project

四、配置gridsome项目

  1. 在my-blog项目的gridsome.config.js文件中添加以下代码：
module.exports = {
  plugins: [
    {
      use: '@gridsome/source-strapi',
      options: {
        apiURL: 'http://localhost:1337',
        queryLimit: 100,
      },
    },
  ],
};
  1. 在my-blog项目的package.json文件中添加以下代码：
{
  "scripts": {
    "dev": "gridsome develop",
    "build": "gridsome build"
  }
}

五、配置strapi项目

  1. 在my-strapi-project项目的config/environments/development.js文件中添加以下代码：
module.exports = ({ env }) => ({
  defaultConnection: 'default',
  connections: {
    default: {
      connector: 'bookshelf',
      settings: {
        client: 'mysql',
        host: '127.0.0.1',
        port: 3306,
        database: 'strapi',
        username: 'root',
        password: '',
      },
      options: {
        useNullAsDefault: true,
      },
    },
  },
});
  1. 在my-strapi-project项目的package.json文件中添加以下代码：
{
  "scripts": {
    "develop": "strapi develop",
    "build": "strapi build"
  }
}

六、启动gridsome和strapi项目

cd my-blog
npm run dev

cd my-strapi-project
npm run develop

七、创建strapi内容类型

  1. 在strapi后台点击"Content Types"菜单项。
  2. 点击"Create New Content Type"按钮。
  3. 在"Content Type Name"字段中输入"Post"。
  4. 在"Display Name"字段中输入"文章"。
  5. 点击"Save"按钮。

八、创建strapi内容

  1. 在strapi后台点击"Content Types"菜单项。
  2. 点击"Post"内容类型。
  3. 点击"Create New Entry"按钮。
  4. 在"Title"字段中输入"我的第一篇文章"。
  5. 在"Content"字段中输入"这是我的第一篇文章的内容。"。
  6. 点击"Publish"按钮。

九、在gridsome中使用strapi数据

<template>
  <div>
    <h1>{{ post.title }}</h1>
    <p>{{ post.content }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      post: null,
    };
  },
  async mounted() {
    this.post = await this.$gridsome.api.getPost({ id: 1 });
  },
};
</script>

十、部署gridsome网站

cd my-blog
npm run build

vercel deploy

十一、部署strapi后台

cd my-strapi-project
npm run build

vercel --prod deploy

十二、结语

现在，你的博客网站已经完全搭建好了！你可以通过访问你的gridsome网站的URL来查看你的博客，也可以通过访问你的strapi后台的URL来管理你的博客内容。

gridsome和strapi是两个非常强大的工具，它们可以帮助你快速创建一个功能齐全的博客网站。如果你想创建一个属于自己的博客，那么你一定要试试这两个神器！