前言
感谢各位这些年来阅读我的博客文章,以及优化博客系统框架,现在,我将为你带来一个前后端彻底分离,而且可以一键启动的博客框架。
透过这个腳手架,你可以快速建立一个如同 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: '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,
},
}
复制代码
内容模型
- 帖子
要创建帖子,只需提供以下对象模型:
{
"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
自动部署
故障排除
-
对于
window is defined
, 引包前检查 window :if (typeof window !== `undefined`) { const module = require("module"); } 复制代码
-
npm run reset
清除本地缓存
贡献
请阅读 CONTRIBUTING.md 获取更多信息。
联系
如果您对此项目感兴趣,请随时联系Calpa Liu。
感谢您的贡献...... :)