Gatsby 静态网站搭建全过程 (1)—安装和搭建

最新推荐文章于 2024-08-13 08:58:28 发布

only_smile达

最新推荐文章于 2024-08-13 08:58:28 发布

阅读量2k

点赞数 2

分类专栏：前端 React 文章标签：前端

本文链接：https://blog.csdn.net/weixin_42935603/article/details/109157316

版权

本文详细介绍了如何使用Gatsby搭建静态网站，包括安装Gatsby CLI，创建和启动开发服务器，构建生产版本，理解Gatsby的结构、数据层以及配置文件的用法。还提到了Gatsby的GraphQL数据查询和页面自动化创建。

摘要由CSDN通过智能技术生成

安装和搭建

Gatsby

Gatsby

Gatsby 是一个为 React 打造的快如闪电的现代化站点生成器-静态网站。

安装Gatsby CLI

npm install -g gatsby-cli

创建站点

gatsby new gatsby-site

切换到站点目录

cd gatsby-site

启动开发服务器

gatsby develop

Gatsby 将会启动一个热更新的开发环境，你可以通过 localhost:8000 访问。

尝试修改位于 src/pages 下的页面中的 JavaScript。保存变更，浏览器中的内容会自动热更新。

构建生产版本

gatsby build

Gatsby 将会为你站点的生产版本执行一些优化工作，生产静态 HTML 和预加载的 JavaScript 代码包。

在本地启动生产版本服务器

gatsby serve

Gatsby 会启动一个本地 HTML 服务器，用于测试你构建的站点。在执行这个命令前，记得先使用 gatsby build 构建你的站点

结构

├── content            // 可放置静态资源md等文件位置
├── gatsby-browser.js // 浏览器运行时执行的文件
├── gatsby-config.js // 主要配置文件
├── gatsby-node.js // 视图层配置
├── package.json
├── public         // 打包生成文件目录
├── src
    ├── components // 组件
    ├── pages // 页面文件
    ├── templates // 模版文件

Gatsby 采用约定式路由，page文件夹要注意
test.js ==> http://localhost/test/
也可以通过gatsby-plugin-page-creator插件修改默认page下文件作为路由
在生产页面的时候 createPage 可以手动设置路由

数据层

Gatsby通过graphql查询数据的
并自带调试界面http://localhost:8000/___graphql

query {
   
  allMdx {
   
    nodes {
   
      id
      relativePath
      slug
    }
  }
}

package.json

基本的配置可按指定ip，端口启动，服务部署可配置pm2启动

  "scripts": {
   
    "start": "gatsby develop -o -H 0.0.0.0 -p 8000",
    "serve": "gatsby serve -o -H 0.0.0.0 -p 8000",
    "clean": "gatsby clean",
    "lint": "eslint --fix \"src/**/*.{js,jsx,ts,tsx,json,md}\"",
    "server": "pm2 start pm2.json",
    "stop": "pm2 stop bizdoc && pm2 stop git-script",
    "build": "gatsby build",
  },

gatsby-config主要配置文件

可参考基本使用插件，本地mock或者请求其它服务配置
siteMetadata可以直接通过graphql获取

query SiteMetadata {
   
  site {
   
  siteMetadata {
   
      title
      twitter
    }
  }
}

const postcssPresetEnv = require('postcss-preset-env');
const theme = require('./build/theme.js');
const postcssConfigPath = require('./build/postcss.config.js');
const {
    createProxyMiddleware } = require('http-proxy-middleware');

module.exports = {
   
  plugins: [
    {
   
      // 页面加载延迟时显示
      resolve: 'gatsby-plugin-nprogress',
      options: {
   
        color: '#9D7CBF',
        showSpinner: false,
      }