感謝各位這些年來閱讀我的博客文章,以及優化博客系統框架,現在,我將為你帶來一個前後端徹底分離,而且可以一鍵啟動的博客框架。
如果你希望閱讀英文版本的話,那麼 Github 的 Repo 上面也有提供詳細的文檔。
透過這個 Starter,你可以快速建立一個如同 Calpa's Blog 的博客系統。
如果你覺得這個系統需要更加完善的話,你可以從下面的地方入手:
如果你喜歡 我的博客,請給個 star,多謝。以下是如何使用這個博客系統的教程:
如何運行?
npm install --global gatsby-cli
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 ,分別為 主頁 和 標簽頁頂部的 #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
清除本地緩存這個博客系統,是我大學時代一直編寫,然後再進化迭代的一個項目。