Gatsby Starter of Calpa's Blog
Switch branches/tags
Nothing to show
Clone or download
greenkeeper[bot] and calpa Update gatsby-plugin-sentry to the latest version 🚀 (#119)
* fix(package): update gatsby-plugin-sentry to version 1.0.0

* chore(package): update lockfile package-lock.json
Latest commit d3131c2 Dec 12, 2018
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github fix: repo name Oct 30, 2018
.storybook fix: cdn scripts and stylesheet Nov 4, 2018
data Feat: extract config 20181112 (#112) Nov 12, 2018
gatsby Feat: extract config 20181112 (#112) Nov 12, 2018
scripts Feat: extract config 20181112 (#112) Nov 12, 2018
src fix: import the correct gitalk config from data (#118) Nov 13, 2018
static/favicons [ImgBot] Optimize images Nov 2, 2018
.czrc chore(releasing): Add conventional commit and semantic-release Oct 5, 2018
.eslintrc.js Feat: extract config 20181112 (#112) Nov 12, 2018
.gitignore Feat: extract config 20181112 (#112) Nov 12, 2018
.npmrc fix: npm registry to Nov 4, 2018
.nvmrc Add nvmrc Oct 31, 2017
.travis.yml fix: travisCI git clone Nov 5, 2018 Create Oct 5, 2018
LICENSE Update LICENSE Jun 16, 2018 Provide a more user friendly Oct 31, 2018 Fix readme 20181111 (#110) Nov 11, 2018 Fix readme 20181111 (#110) Nov 11, 2018 Fix readme 20181111 (#110) Nov 11, 2018
gatsby-browser.js Feat: extract config 20181112 (#112) Nov 12, 2018
gatsby-config.js fix: gatsby-plugin-feed return statement Oct 26, 2018
gatsby-node.js feat: extract gatsby-node api as single components Sep 26, 2018
netlify.toml Rename .netlify/functions entry as api Mar 29, 2018
package-lock.json Update gatsby-plugin-sentry to the latest version 🚀 (#119) Dec 13, 2018
package.json Update gatsby-plugin-sentry to the latest version 🚀 (#119) Dec 13, 2018
stylelint.config.js feat: install stylelint Sep 19, 2018

Gatsby Starter - Calpa's Blog

GitHub license Accept Pull Requests Twitter Greenkeeper badge Build Status CodeFactor

繁體中文 | 简体中文 | English


Build a blog system like Calpa's Blog in ease.

If you like this project, please don't hesitate to star it. Thank you.



  1. GatsbyJS v2, faster than faster
  2. Google Analytics
  3. Offline support
  4. Web App Manifest
  5. Page pagination
  6. Netlify optimization
  7. Awesome comment component (powered by Gitalk)
  8. Search Engine Optimization (SEO)
  9. Parse Markdown in high speed (powered by remarkable)
  10. Support to sitemap


  1. Lazy loading (powered by lozad.js)
  2. Responsive Web Design
  3. Font Awesome is auto loaded (powered by react-fontawesome)
  4. Scroll smoothly (powered by smooth-scroll)
  5. Show system components (powered by storybook)

Data Souce

  1. Source from Contentful, a flexible and easy-to-use content management system
  2. For now, not just Contentful content source, you can use any database

Customization for developers

  1. SEO
  2. Styled using SCSS
  3. Data Source


  1. Git
  2. Node: any 8.x version starting with 8.5.0 or greater
  3. A fork of the repo (for any contributions)
  4. A clone of the this repo on your local machine


How to start this project?

  1. Install Gatsby-CLI
npm install --global gatsby-cli
  1. Create new Gatsby project using this starter, awesome-blog is your blog's folder
gatsby new awesome-blog
  1. Open the folder
cd awesome-blog
  1. Run Development Server

    1. npm start to start the hot-reloading development server (powered by Gatsby)
    2. open http://localhost:8000 to open the site in your favorite browser
  2. Connect Contentful Server

    1. add the following config into .env.development file
    API_BASE_URL = ''
    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.


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: '',
    google_site_verification: 'your google verification hash',
  name: 'your name',
  email: '',
  iconUrl: 'https://youricon.jpg',
  License: 'by',
  url: '',
  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: '',
    owner: 'calpa',
    admin: ['calpa'],
    distractionFreeMode: true,

Content Model

  1. 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"
  1. 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?"


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


  • 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


Please read for more information.

And don't hesitate to put your star and watch this starter project.


If you are interested in this project, please feel free to contact Calpa Liu.

Thanks For Contribute... :)