gatsby starter gcn下载 - gatsby starter gcn源码下载

gatsby starter gcn

其他类别

v3.0.1

下载

gatsby-starter-gcn

用于使用 Gatsby、Contentful 和 Netlify 构建令人惊叹的静态网站的入门模板。受到 gatsby-contentful-starter 的启发。

特征

与随时可用的占位符内容进行内容集成
Netlify 集成，包括预先构建的联系表单
最小响应式设计 - 定制或拆解
分页逻辑
主题界面
SEO 友好组件
- OpenGraph 共享支持
- 站点地图生成
谷歌分析
渐进式网络应用程序
离线支持
Gatsby 标准模块，用于使用 StandardJS 检测 Javascript
Stylelint 支持样式组件以检查 JS 中的 CSS

演示

https://gcn.netlify.app/

入门

安装

 git clone https://github.com/ryanwiemer/gatsby-starter-gcn.git
yarn install

或者通过 Gatsby CLI

 gatsby new gatsby-starter-gcn https://github.com/ryanwiemer/gatsby-starter-gcn.git

设置内容丰富

注册 Contentful 并创建一个新的空白空间
yarn run setup
输入您在此处找到的 Contentful 空间的请求信息： app.contentful.com →空间设置→ API 密钥。您需要提供标准 API 密钥（第一个选项卡）和管理密钥（第二个选项卡）。

定制化

网站数据

编辑/src/gatsby-config.js中的 siteMeta 数据

  siteMetadata: {
    title : 'GCN' , // Title of the website
    description : // Description of the website
      'A starter template to build amazing static websites with Gatsby, Contentful and Netlify' ,
    siteUrl : 'https://gcn.netlify.app' , // Website URL. Do not include trailing slash
    image : '/images/share.jpg' , // Path to default image for SEO
    menuLinks : [ // The links used in the top menu
      {
        name : 'Home' ,
        slug : '/' ,
      } ,
      {
        name : 'About' ,
        slug : '/about/' ,
      } ,
      {
        name : 'Contact' ,
        slug : '/contact/' ,
      } ,
    ] ,
    postsPerFirstPage : 7 , // Number of posts on the first page
    postsPerPage : 6 , // Number of posts used on all other pages
    /*
      Root URL for posts and tags
      For example: 'blog' will result in:
        - www.example.com/blog/
        - www.example.com/blog/post-name/
        - www.example.com/blog/tag/tag-name/
    */
    basePath : '/' , // Defaults to the homepage
  }

注意：如果您在本地开发时没有看到更改得到反映，您可能需要运行yarn clean然后通过yarn develop重新启动服务器。

主题界面

编辑/src/gatsby-plugin-theme-ui/index.js

 export default {
  colors : {
    background : '#ffffff' ,
    text : '#121212' ,
    primary : '#121212' ,
    secondary : '#e9e9e9' ,
    tertiary : '#f3f3f3' ,
    highlight : '#5b8bf7' ,
  } ,
  fonts : {
    body : '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif' ,
  } ,
  sizes : {
    maxWidth : '1050px' ,
    maxWidthCentered : '650px' ,
  } ,
  responsive : {
    small : '35em' ,
    medium : '50em' ,
    large : '70em' ,
  } ,
}

使用盖茨比标准

使用yarn test脚本快速检查代码是否有错误
您可以查看 Gatsby Standard 自述文件，详细了解如何将此项目包含的 Gatsby Standard、Stylelint 和 Prettier 模块集成到您的文本编辑器中

内容和搜索引擎优化

您可以替换static/images目录中的share.jpg和favicon.png文件。
元描述在 Contentful 中定义。如果您选择在新帖子中将此字段留空，则将使用帖子/页面的 320 个字符摘录。

部署

手动 Netlify 部署

运行gatsby build
将文件夹/public/拖放到 Netlify 中

从 Git 进行 Netlify 部署（推荐）

来自 Git 的新 Netlify 网站
连接 GitHub 并选择您的存储库
导航到 Netlify：设置→构建和部署→构建环境变量。使用空间 ID 和内容交付 API 添加以下环境变量 - 来自 Contentful 的访问令牌。此外，如果需要，您可以输入 Google Analytics ID。变量的命名必须与此完全相同才能正常工作。

 ACCESS_TOKEN
SPACE_ID
GOOGLE_ANALYTICS

导航到 Netlify：部署.单击Trigger deploy以手动触发部署，以确认网站正在使用您的构建环境变量成功构建。此时请注意，每次您推送到master时，部署都会自动启动并发布到生产环境。

附加设置

内容丰富的 Webhook（可选）

导航到 Netlify：设置→构建和部署→构建挂钩。创建一个新的构建挂钩。
导航到 Contentful： app.contentful.com →空间设置→ Webhooks 。使用您刚刚创建的 Netlify 构建 URL 创建一个 Webhook，并配置哪些事件应触发生产构建。例如，每次发布、取消发布或删除帖子或页面时，以下内容都会重建生产网站：