基於 GatsbyJS 的博客系统正式开源：gatsby-starter-calpa-blog，及其使用方法

感谢各位这些年来阅读我的博客文章，以及优化博客系统框架，现在，我将为你带来一个前后端彻底分离，而且可以一键启动的博客框架。

透过这个腳手架，你可以快速建立一个如同Calpa's Blog 的博客系统。

Github 地址： github.com/calpa/gatsb…

功能

系统架构

1. GatsbyJS v2，更加快速
2. Google Analytics
3. 支持离线操作
4. Web App Manifest
5. Netlify 网站优化
6. 精美评论区 (powered by Gitalk )
7. 高速解析 Markdown (基于 remarkable )
8. 支持站点地图

设计

1. 响应式设计 最佳化 iPhone 6/7/8 环境，支持 iPad 等平板环境，以及 1920 * 1200 的 PC端。

   

   

2. 懒加载（图片） (基于 lozad.js )
3. 自动加载 Font Awesome (基于 react-fontawesome )
4. 流畅滑动设计 (基于 smooth-scroll )
5. 分页设计
6. 展示博客系统的组件 (基於 storybook )

数据来源

1. 源自Contentful，一个灵活且易于使用的内容管理系统
2. 经过系统更新后，你可以使用任意的数据库

可自定的地方

如果你觉得这个系统需要更加完善的话，你可以从下面的地方入手：

1. 搜索引擎优化
2. 使用 SCSS 来自定义样式
3. 数据来源

如果你喜欢我的博客，请给个 star，多谢。以下是如何使用这个博客系统的教程：

前提

1. Git
2. Node：从 8.5.0 或更高版本开始的任何 8.x 版本
3. fork 本项目 （想要贡献的话）
4. 在本地计算机上克隆本项目

开发

如何运行？

1. 安装 Gatsby-CLI

npm install --global gatsby-cli
复制代码

2. 使用 Gatsby 启动器创建新的 Gatsby 项目， awesome-blog 是您博客的文件夹

gatsby new awesome-blog https://github.com/calpa/gatsby-starter-calpa-blog
复制代码

3. 打开文件夹

cd awesome-blog
复制代码

4. 运行开发服务器

   1. npm start 启动热重载开发服务器 (基于Gatsby)
   2. open http://localhost:8000 在您喜欢的浏览器中打开

5. 连接Contentful 服务器

   1. 将以下配置添加到 .env.development 文件中

   API_SPACE_ID = Your Contentful Space ID
   API_TOKEN = Your Content Delivery (Preview) API - access token
   复制代码

   如果您使用的是 Contentful 的预览 API ，那么所有未发布的内容都将可用。

配置

在 data/config 编辑 exports 的对象

注意一下: 想要查找 theme_color 十六进制代码，请单击此处。

module.exports = {
  title: 'your blog title here',
  maxPages: 12
  meta: {
    description: 'blog description',
    keyword: 'blog, JavaScript',
    theme_color: '#hexcode',
    favicon: 'https:yourimageurl.com',
    google_site_verification: 'your google verification hash',
  },
  name: 'your name',
  email: 'your_email@gmail.com',
  iconUrl: 'https://youricon.jpg',
  License: 'by',
  url: 'https://yourblog.me',
  about: '/2018/05/01/about-your-name/',
  // Sidebar
  zhihuUsername: 'your zhiu user name here',
  githubUsername: 'your github user name here',
  friends: [
    {
      title: 'friend title',
      href: 'link to their blog',
    }
  ]
复制代码

插件的配置文件:

gaOptimizeId: 'GTM-WHP7SC5',
gaTrackId: 'UA-84737574-3',
navbarList: [
  {
    href: '/stats/',
    title: 'stat title',
  },
  {
    href: '/tags/',
    title: 'tags',
  },
  {
    href: '/guestbook/',
    title: 'guestbook',
  },
  {
    href: '/2018/10/04/about-your-blog/',
    title: 'your title',
  },
],
redirectors: [
  {
    fromPath: '/',
    toPath: '/page/1',
  },
],
复制代码

Gitalk 的配置部分：

gitalk: {
    clientID: '18255f031b5e11edd98a',
    clientSecret: '2ff6331da9e53f9a91bcc991d38d550c85026714',
    repo: 'calpa.github.io',
    owner: 'calpa',
    admin: ['calpa'],
    distractionFreeMode: true,
  },
}
复制代码

内容模型

1. 帖子

要创建帖子，只需提供以下对象模型：

{
  "name": "Post",
  "fields": {
    "title": "Post Title",
    "headerImgur": "header Image Link",
    "headerBackgroundColor": "#66ccff",
    "tags": "tag1, tag2, tag3",
    "url": "awesome-post",
    "createdDate": "new Date() or other dayjs supported datetime value",
    "content": "your markdown content",
    "jueJinLikeIconLink": "掘金 Badge Icon Url",
    "jueJinPostLink": "掘金 Post Url"
  }
}
复制代码

2. Headers

有两个可配置的 Headers ，分别为主页 和标签页顶部的 #header 。

{
  "name": "Headers",
  "fields": {
    "purpose": "Tags or Home",
    "headerImage": "header Image",
    "createdDate": "new Date() or other dayjs supported datetime value",
    "title": "Display Title",
    "titleVisible": "Do you want to show your title in the header?",
    "subTitle": "Display a smaller wordings",
    "subTitleVisible": "Do you want to show a smaller wordings in the header?"
  }
}
复制代码

部署

我的博客 目前正在使用Netlify。当然，您可以使用 Github Pages 作为替代方案。

• Github Pages

  npm run deploy 将博客部署到 Github Pages

• Netlify

  自动部署