在前端开发中，Gatsby 是一个非常流行的静态网站生成器。它提供了丰富的插件和主题，使得开发者可以快速搭建自己的博客、个人网站等。@undistraction/gatsby-starter-skeleton-placeholder-mod-1 就是其中一个比较好用的 Gatsby starter。
npm 包介绍
@undistraction/gatsby-starter-skeleton-placeholder-mod-1 是一个基于 Gatsby 的 starter 模板。它提供了一个简单的骨架，可以让你快速搭建一个博客、文档网站等。这个 starter 还附带了一些常用的功能，比如 SEO、Google Analytics 等。
安装
安装这个 npm 包非常简单，只需要在命令行中运行以下命令：
npm install -g gatsby-cli gatsby new my-site https://github.com/undistraction/gatsby-starter-skeleton-placeholder-mod-1
其中 my-site 是你的网站目录名称，可以根据需要修改。
使用方法
安装完成后，就可以开始使用了。进入到项目目录中，运行以下命令启动开发服务器：
gatsby develop
这个命令会启动一个本地服务器，可以在浏览器中查看你的网站。默认情况下，它会监听 8000 端口。在浏览器中打开 http://localhost:8000 就可以看到你的网站了。
修改网站内容
@undistraction/gatsby-starter-skeleton-placeholder-mod-1 的主要文件位于 src 目录下。其中，pages 目录中的文件就是你的页面。你可以在这个目录下添加、修改页面，来定制你的网站。这里有一个简单的示例，创建一个新页面：
- 在 pages 目录下创建一个新文件，比如 hello.world.js。
- 在文件中添加以下内容：
import React from "react"
const Hello = () => {
return <h1>Hello World!</h1>
}
export default Hello- 在浏览器中打开 http://localhost:8000/hello.world/ 就可以看到你新建的页面了。
修改样式
样式文件位于 src/styles 目录下。其中，index.scss 是主要样式文件。你可以在这个文件中添加、修改样式。
SEO
@undistraction/gatsby-starter-skeleton-placeholder-mod-1 内置了一些 SEO 相关的功能，比如自动生成 meta 标签、自动生成 sitemap 等。你可以在 gatsby-config.js 中修改这些配置。比如，修改网站标题：
module.exports = {
siteMetadata: {
title: "My Website"
},
// ...
}Google Analytics
@undistraction/gatsby-starter-skeleton-placeholder-mod-1 还内置了 Google Analytics 相关的功能。你只需要在 gatsby-config.js 中添加你的 Google Analytics Tracking ID，就可以统计你网站的访问情况了。
-- -------------------- ---- -------
-------------- - -
-------- -
-
-------- ---------------------------------
-------- -
----------- -----------------------------------
-
-
-
-总结
@undistraction/gatsby-starter-skeleton-placeholder-mod-1 是一个非常好用的 Gatsby starter 模板。它提供了简单的骨架和一些常用的功能，可以让你快速搭建一个博客、文档网站等。同时，它也是一个非常好的学习资源，可以让你了解如何使用 Gatsby 开发静态网站。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056cab81e8991b448e6170