透過這個 Starter,你可以快速建立一個如同 Calpa's Blog 的博客系統。
- GatsbyJS v2,更加快速
- Google Analytics
- 支持離線操作
- Web App Manifest
- Netlify 網站優化
- 精美評論區 (powered by Gitalk)
- 高速解析 Markdown (基於gatsby-transformer-remark)
- 支持站點地圖
- 分頁設計
- 響應式設計
- 自動加載 Font Awesome (基於 react-fontawesome)
- 流暢滑動設計 (基於 smooth-scroll)
你可以直接修改 /src/content/*.md
,或者是使用 Netlify-cms 來編輯文章。
如果你覺得這個系統需要更加完善的話,你可以從下面的地方入手:
- 搜索引擎優化
- 使用 SCSS 來自定義樣式
- 數據來源
你可以使用以下按鈕來構建和部署博客的一個副本:
在你點擊上面的按鈕之後,你就會賦予 Netlify 取得你的 Github 授權,以及選擇倉庫名稱。Netlify 會自動創建一個倉庫,並且複製那裡的文件。
之後,它會自動構建和部署一個新的網站,為你帶來一個完整的博客系統。
你可以使用以下按鈕來嘗試修改博客系統的代碼:
如果你喜歡 我的博客,請給個 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
在您喜歡的瀏覽器中打開
在 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,
},
}
Calpa 的博客 目前正在使用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。
感謝您的貢獻...... :)