preface

Thank you for reading my blog articles over the years, and optimizing the blog system framework, now I will bring you a completely separate front and back end, and can start the blog framework with one click.

Through this scaffolding, you can quickly build a blogging system like Calpa’s Blog.

Github address: github.com/calpa/gatsb…

function

System architecture

  1. GatsbyJS V2, faster
  2. Google Analytics
  3. Offline operation
  4. Web App Manifest
  5. Netlify website optimization
  6. Excellent comments section (Powered by Gitalk)
  7. High-speed Parsing Markdown (Based on Remarkable)
  8. Support for site maps

design

  1. Responsive design optimizes iPhone 6/7/8 environments, supports tablet environments such as iPad, and 1920 * 1200 PCS.
  2. Lazy loading (image) (based on lozad.js)
  3. Font Awesome (based on react-Fontawesome)
  4. Smooth Scroll design (based on smooth scroll)
  5. Page design
  6. Show the components of the blogging system (storybook based)

The data source

  1. From Contentful, a flexible and easy to use content management system
  2. After system update, you can use any database

Customizable place

If you feel the system needs to be improved, here are some places to start:

  1. Search engine optimization
  2. Customize styles using SCSS
  3. The data source

If you like my blog, please give a star, thank you. Here is a tutorial on how to use the blogging system:

The premise

  1. Git
  2. Node: Any 8.x release starting with 8.5.0 or later
  3. Fork this project (to contribute)
  4. Clone the project on your local computer

The development of

How does it work?

  1. Install Gatsby – the CLI
npm install --global gatsby-cli
Copy the code
  1. Use the Gatsby launcher to create a new Gatsby project,awesome-blogIt is the folder for your blog
gatsby new awesome-blog https://github.com/calpa/gatsby-starter-calpa-blog
Copy the code
  1. Open folder
cd awesome-blog
Copy the code

  1. Running the development server

    1. npm startStart the hot reload development server (based onGatsby)
    2. open http://localhost:8000Open it in your favorite browser

  2. Connect to the Contentful server

    1. Add the following configuration to.env.developmentIn the file
    API_SPACE_ID = Your Contentful Space ID
API_TOKEN = Your Content Delivery (Preview) API - access token
Copy the code

    If you use the Contentful preview API, all unpublished content will be available.

configuration

Edit the exports object in data/config

Note: To find the theme_color hexadecimal 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: '[email protected]',
  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',}]Copy the code

Plug-in 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'],},Copy the code

Configuration part of Gitalk:

gitalk: {
    clientID: '18255f031b5e11edd98a',
    clientSecret: '2ff6331da9e53f9a91bcc991d38d550c85026714',
    repo: 'calpa.github.io',
    owner: 'calpa',
    admin: ['calpa'],
    distractionFreeMode: true,}}Copy the code

The content model

  1. post

To create a post, simply 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": "Nuggets Badge Icon Url"."jueJinPostLink": "Nuggets Post Url"}}Copy the code
  1. Headers

There are two configurable Headers, the home page and #header at the top of the TAB 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?"}}Copy the code

The deployment of

My blog is currently using Netlify. Of course, you can use Github Pages as an alternative.

  • Github Pages

    NPM Run deploy deploys the blog to Github Pages

  • Netlify

    Automatic deployment

troubleshooting

  • For Window is defined, check the window before importing the packet:

    if (typeof window! = =`undefined`) {
  const module = require("module");
}
Copy the code

  • NPM run reset Clears the local cache

  • Check the GatsbyJS debug documentation

contribution

Read CONTRIBUTING. Md for more information.

contact

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

Thank you for your contribution…… 🙂