基於 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

  自動部署

故障排除

• 對於 window is defined, 引包前檢查 window :

  if (typeof window !== `undefined`) {
    const module = require("module");
  }
  複製代碼

• npm run reset 清除本地緩存

• 查 GatsbyJS 調試文檔

貢獻

請閱讀 CONTRIBUTING.md 獲取更多信息。

聯繫

若是您對此項目感興趣，請隨時聯繫Calpa Liu。

感謝您的貢獻...... :)