gatsby-starter-icarus-blog README
Kun 的博客 Starter
通过 Gatsby cli，你可以快速建立一个如同 Kun's Blog 的博客系統。
功能
系统架构
- GatsbyJS v3，更加快速
- 支持 Google Analytics
- Web App Manifest
- Netlify 网站构建和访问优化
- 基于 Gitalk 的评论系统 (powered by Gitalk)
- 高速解析 Markdown (基于gatsby-transformer-remark)
- 良好的 seo
- 一键切换日间夜间模式
- 支持 Chrome APP
- 支持 ts（roadMap 计划中）
- 支持 Notion （roadMap 计划中）
- 支持站内搜索 （roadMap 计划中）
设计
- 分页
- 博客支持不同分类（目录、时间、标签）
- 响应式 Css
- 使用 Font Awesome (基于 react-fontawesome)
- 流畅滑动设计 (基於 smooth-scroll)
- 整体风格与 Hexo Icarus 主题近似，支持无缝迁移
数据
你可以直接修改 /src/content/*.md，或者接入 Netlify-cms cms 系统来管理，也可以等待后续支持 Notion 更为方便。
可自定的地方
你可以基于本博客代码进行以下优化：
- 代码优化
- 使用 SCSS 添加更多样式
快速入门
使用 Netlify 部署
你可以使用以下按鈕來構建和部署博客的一個副本：
在你點擊上面的按鈕之後，你就會賦予 Netlify 取得你的 Github 授權，以及選擇倉庫名稱。Netlify 會自動創建一個倉庫，並且複製那裡的文件。
之後，它會自動構建和部署一個新的網站，為你帶來一個完整的博客系統。
如果你喜欢 我的博客，請給個 star，多謝。
前提
- Git
- Node：建议 12.0.0 或更高版本
- fork 本项目（想要修改代码提 pr）
开发
- 安裝 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在浏览器中打开
配置
在 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: '/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,
},
}部署
Kun 的博客 目前正在使用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 获取更多信息。
联系
如果您对此项目感兴趣，请联系Kun Zhang。
感謝关注本 Repo...... :)