基於 GatsbyJS 的博客系統正式開源:gatsby-starter-calpa-blog,及其使用方法

作者: Calpa Liu

出版:2018-12-03

前言

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

如果你希望閱讀英文版本的話,那麼 Github 的 Repo 上面也有提供詳細的文檔。

透過這個 Starter,你可以快速建立一個如同 Calpa’s Blog 的博客系統。

功能

系統架構

  1. GatsbyJS v2,更加快速
  2. Google Analytics
  3. 支持離線操作
  4. Web App Manifest
  5. Netlify 網站優化
  6. 精美評論區 (powered by Gitalk)
  7. 高速解析 Markdown (基於 remarkable)
  8. 支持站點地圖

設計

  1. 響應式設計
  2. 懶加載(圖片) (基於 lozad.js)
  3. 自動加載 Font Awesome (基於 react-fontawesome)
  4. 流暢滑動設計 (基於 smooth-scroll)
  5. 分頁設計

數據來源

  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
  1. 使用 Gatsby 啟動器創建新的 Gatsby 項目,awesome-blog是您博客的文件夾
gatsby new awesome-blog https://github.com/calpa/gatsby-starter-calpa-blog
  1. 打開文件夾
cd awesome-blog
  1. 運行開發服務器

    1. npm start 啟動熱重載開發服務器 (基於 Gatsby)
    2. open http://localhost:8000 在您喜歡的瀏覽器中打開
  2. 連接 Contentful 服務器

    1. 將以下配置添加到.env.development文件中
    API_SPACE_ID = Your Contentful Space ID
    API_TOKEN = Your Content Delivery (Preview) API - access token

    如果您使用的是 Contentful 的預覽 API,那麽所有未發布的內容都將可用。

    1. 您也可以使用其他服務器,只要你提供給 GraphQL 的數據符合系統數據結構。

配置

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"
  }
}
  1. 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 調試文檔

後記

這個博客系統,是我大學時代一直編寫,然後再進化迭代的一個項目。

關於 Calpa Liu

Avatar

Calpa 是一個四天工作的系統架構師,日常幫助客戶構建一站式網站應用,手機應用,雲端架構。

2023 年 9 月,Calpa 收到來自國內外不同 Web3 團隊的邀請,參加韓國的 KBW 2023 和新加坡的 TOKEN 2049 活動。十二月份,Calpa 將參加台北區塊鏈週的 Hackathon 比賽。

Calpa 擅長運用各種前沿技術,包括 TypeScript、React.js 和 Vue.js,開發具有 Responsive Web Design 的網站。另外,他透過運用 aws-cdk 和 TypeScript 技術的融合,實現了基於雲端的「基礎即代碼」(Infrastructure as Code)部署策略,建立了多套高效且具有可伸縮性的全端架構。

同時,Calpa 積極參與各個社群,活躍於香港和台灣的開源社區,分享前沿知識。他曾在 2019 年的香港開源大會中擔任重要講者,為聽眾提供寶貴的工作經驗和深刻見解。此外,Calpa 在 GitHub 上公開分享了個人博客程式碼,已獲得超過 300 顆星星和 60 個分支。

如果您對系統架構有任何問題,或需要進一步交流,請隨時聯絡 Calpa,他非常歡迎討論。