前言

感謝各位這些年來閱讀我的部落格文章，以及優化部落格系統框架，現在，我將為你帶來一個前後端徹底分離，而且可以一鍵啟動的部落格框架。

透過這個腳手架，你可以快速建立一個如同 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: '[email protected]',
  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。

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