Gatsby Starter - Calpa's Blog
Build a blog system like Calpa's Blog in ease.
If you like this project, please don't hesitate to star it. Thank you.
Feature
Structure
- GatsbyJS v2, faster than faster
- Google Analytics
- Offline support
- Web App Manifest
- Page pagination
- Netlify optimization
- Awesome comment component (powered by Gitalk)
- Search Engine Optimization (SEO)
- Parse Markdown in high speed (powered by remarkable)
- Support to sitemap
Design
- Lazy loading (powered by lozad.js)
- Responsive Web Design
- Font Awesome is auto loaded (powered by react-fontawesome)
- Scroll smoothly (powered by smooth-scroll)
- Show system components (powered by storybook)
Data Souce
- Source from Contentful, a flexible and easy-to-use content management system
- For now, not just Contentful content source, you can use any database
Customization for developers
- SEO
- Styled using SCSS
- Data Source
Get Started
Deploy with Netlify
Use the button below to build and deploy your own copy of the repository:
After clicking that button, you’ll authenticate with GitHub and choose a repository name. Netlify will then automatically create a repository in your GitHub account with a copy of the files from the template.
Next, it will build and deploy the new site on Netlify, bringing you to the blog system when the build is complete.
You may use Contentful as your content management system.
Code with Codesandbox
Use the button below to code with the blog system:
Prerequisites
- Git
- Node: any 8.x version starting with 8.5.0 or greater
- A fork of the repo (for any contributions)
- A clone of the this repo on your local machine
Develop
How to start this project?
- Install Gatsby-CLI
npm install --global gatsby-cli
- Create new Gatsby project using this starter,
awesome-blog
is your blog's folder
gatsby new awesome-blog https://github.com/calpa/gatsby-starter-calpa-blog
- Open the folder
cd awesome-blog
-
Run Development Server
npm start
to start the hot-reloading development server (powered by Gatsby)open http://localhost:8000
to open the site in your favorite browser
-
Connect Contentful Server
- add the following config into
.env.development
file
API_BASE_URL = 'https://cdn.contentful.com' API_SPACE_ID = Your Contentful Space ID API_TOKEN = Your Content Delivery (Preview) API - access token
If you are using contentful preview API, then all unpublished content will be available.
- add the following config into
Configuration
Edit the export object in data/config
Note: To look up theme_color hex code, click here.
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',
}
]
Plugins in the configuration file:
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 plugin configuration
gitalk: {
clientID: '18255f031b5e11edd98a',
clientSecret: '2ff6331da9e53f9a91bcc991d38d550c85026714',
repo: 'calpa.github.io',
owner: 'calpa',
admin: ['calpa'],
distractionFreeMode: true,
},
}
Content Model
- Posts
To create a post, just provide the following object model:
{
"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
There are two configurable headers, Homepage and tags page.
{
"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?"
}
}
Deploy
Calpa's blog is currently using Netlify, though, you may use Github Pages as an alternative.
-
Github Pages
npm run deploy
to deploy the blog to Github Pages -
Netlify
Auto Deploy
Troubleshooting
-
For
window is defined
, wrap the require in check for window:if (typeof window !== `undefined`) { const module = require("module"); }
-
npm run reset
to clear the local cache -
Check GatsbyJS Debugging Docs
Scripts
- Backup config.js as raw-config.js, create config.json (npm start)
node ./scripts/index.js
- Delete raw-config.js and create config.js (do this before you commit)
npm run revert
Contributing
Please read CONTRIBUTING.md for more information.
And don't hesitate to put your star and watch this starter project.
Contact
If you are interested in this project, please feel free to contact Calpa Liu.
Thanks For Contribute... :)