alexoragz/blog

Calpa's Blog

繁體中文 | 简体中文 | English

Starter of Calpa's Blog.

If you like my blog, please star it. Many thanks.

Feature

Responsive Design
Parse Markdown in high speed (powered by remarkable)
Support to sitemap
Font Awesome is auto loaded (powererd by react-fontawesome)
Source from Contentful, a flexible and easy-to-use content management 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/blog

Open the folder

cd awesome-blog

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
Connect Contentful Server
1. add the following config into .env.development file
```
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.

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

TODO

Update the number of post pages automatically.

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

Contributing

Please read CONTRIBUTING.md for more information.

Contact

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

Thanks For Contribute... :)

alexoragz / blog