基於 GatsbyJS 的部落格系統正式開源：gatsby-starter-calpa-blog，及其使用方法
摘要：
感謝各位這些年來閱讀我的部落格文章，以及優化部落格系統框架，現在，我將為你帶來一個前後端徹底分離，而且可以一鍵啟動的部落格框架。
...
感謝各位這些年來閱讀我的部落格文章，以及優化部落格系統框架，現在，我將為你帶來一個前後端徹底分離，而且可以一鍵啟動的部落格框架。
Line
透過這個腳手架，你可以快速建立一個如同Calpa's Blog 的部落格系統。
Github 地址： github.com/calpa/gatsb…
功能
系統架構
- GatsbyJS v2，更加快速
- Google Analytics
- 支援離線操作
- Web App Manifest
- Netlify 網站優化
- 精美評論區 (powered by Gitalk )
- 高速解析 Markdown (基於 remarkable )
- 支援站點地圖
設計
- 響應式設計 最佳化 iPhone 6/7/8 環境，支援 iPad 等平板環境，以及 1920 * 1200 的 PC端。
- 懶載入（圖片） (基於 lozad.js )
- 自動載入 Font Awesome (基於 react-fontawesome )
- 流暢滑動設計 (基於 smooth-scroll )
- 分頁設計
- 展示部落格系統的元件 (基於 storybook )
資料來源
- 源自Contentful，一個靈活且易於使用的內容管理系統
- 經過系統更新後，你可以使用任意的資料庫
可自定的地方
如果你覺得這個系統需要更加完善的話，你可以從下面的地方入手：
- 搜尋引擎優化
- 使用 SCSS 來自定義樣式
- 資料來源
如果你喜歡我的部落格，請給個 star，多謝。以下是如何使用這個部落格系統的教程：
前提
- Git
- Node：從 8.5.0 或更高版本開始的任何 8.x 版本
- fork 本專案 （想要貢獻的話）
- 在本地計算機上克隆本專案
開發
如何執行？
- 安裝 Gatsby-CLI
npm install --global gatsby-cli 複製程式碼
- 使用 Gatsby 啟動器建立新的 Gatsby 專案，
awesome-blog是您部落格的資料夾
gatsby new awesome-blog https://github.com/calpa/gatsby-starter-calpa-blog 複製程式碼
- 開啟資料夾
cd awesome-blog 複製程式碼
-
執行開發伺服器
-
npm start啟動熱過載開發伺服器 (基於Gatsby) -
open http://localhost:8000在您喜歡的瀏覽器中開啟
-
-
連線Contentful 伺服器
- 將以下配置新增到
.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,
},
}
複製程式碼
內容模型
- 帖子
要建立帖子，只需提供以下物件模型：
{
"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"
}
}
複製程式碼
- 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
自動部署