The original link: www.dyuzz.club/2020/04/14/…

Writing in the front

Recently, due to the COVID-19, I have some spare time at home, and I may need to use Javascript in my future study. Therefore, I plan to build my own Blog site based on Javascript to learn and understand JS. After a quick search, the most widely used static site generator is Hexo, but I always use open source and the latest tools in Optional, so I chose GatsbyJS based on React and GraphQL.

Since I was engaged in the development of C++ desktop 3d visualization application before, I didn’t have any front-end development experience. Therefore, based on calpa’s gatsby-starter-calpa scaffolding, I reconstructed it with knife and knife for about a week, adding some new functions and modifying the layout to cater to my vulgar aesthetic taste. The resulting Blog site is here

The way of open source is to take and return. Now the Gatsby Blog Starter Dyuzz Blog framework can be deployed and started with one key. Welcome everyone to build the same or similar Blog platform with Dyuzz’s Blog through this Starter.

Github address: github.com/Dyuzz/Gatsb… If you like this framework, please give a star. If you have more starer, it will be a motivation for me to keep updating.

features

The framework characteristics

  1. Based on the GatsbyJS v2
  2. Support of Google Analytics
  3. Web App Manifest
  4. Hosted deployment on Netlify (see previous Blog: Introduction to Common Static Web hosting Platforms)
  5. Comments section (Powered by Gitalk)
  6. High-speed parsing of Markdown (available in two versions, Remarkable and MDX, currently open source, Remarkable)
  7. Automatic SiteMap for submitting SiteMap links in Google and Baidu search resource management
  8. Netlify CMS support for adding, editing and publishing blogs through an online CMS (see previous Blog: Adding a Netlify CMS to the Gatsby website)
  9. The table of TOC (Context) directory on the right is supported.

UI features

  1. Responsive design works with mobile browsers as well as PC browsers.
  2. Lazy loading (image) (based on lozad.js)
  3. Font Awesome (based on react-Fontawesome)
  4. Smooth Scroll design (based on smooth scroll)
  5. Pagination design

Prerequisites for using the Blog

  1. Git
  2. Nodejs
  3. Gatsbyjs CLI

Installation and Configuration

The installation

  1. Install gatsby cli
npm install --global gatsby-cli
Copy the code
  1. Install the Starter

Method 1: Use Gatsby to create a new Gatsby project, and XXXXX is the name of the user-defined project

gatsby new xxxxx https://github.com/Dyuzz/Gatsby-Blog-Starter-Dyuzz
Copy the code

Method 2: If method 1 fails to be installed, run the following command to install it.

  • Download the project locally from Github
git clone https://github.com/Dyuzz/Gatsby-Blog-Starter-Dyuzz.git
Copy the code
  • Go to the change directory and install the dependent JS module. Note that it may fail due to the domestic network speed. Install it several times, or suspend the agent, or replace the NPM domestic image source.
cd Gatsby-Blog-Starter-Dyuzz
npm install
Copy the code
  1. To set up a blog, type the following command, then type 127.0.0.1:8000 in Chrome or Firefox to see a one-click blog deployed
gatsby develop
Copy the code

configuration

  1. Most of the need to modify the content such as website title, Gitalk API, icon, etc., in data/template/config. Changes in json:
{
  "url": "https://www.dyuzz.club"."meta": {
    "favicon": "/favicons/android-chrome-512x512.png"."keyword": "Dyuzz, blog, C++"."description": "Essays on the development of Dyuzz."."theme_color": "#384f7c"."google_site_verification": "W1hBc-xxxxxxxxxxxxxxx_-G3ZY78q6PVBI"
  },
  "name": "Dyuzz"."about": "/2020/03/28/about-Dyuzz/"."email": "[email protected]"."stats": {
    "image": "/favicons/android-chrome-512x512.png"."title": "The month before."."description": "The month before."
  },
  "title": "Essays on the development of Dyuzz."."gitalk": {
    "repo": "GiTalkofBlog"."admin": ["Dyuzz"]."owner": "Dyuzz"."clientID": "b00xxxxxxxxx6cdx"."clientSecret": "30df6fxxxxxxxxxxxxxd"."pagerDirection": "first"."distractionFreeMode": true
  },
  "License": "by"."friends": [{"href": "http://adcfj.cn/"."title": Digital China Research Institute}]."iconUrl": "/favicons/android-chrome-512x512.png"."wordings": ["C++, geographic information engineering"."Non-professional developers"]."gaTrackId": "UA-84737574-3"."navbarList": [{"href": "/guestbook/"."title": "Message board"
    },
    {
      "href": "/tags/"."title": "Tags"
    },
    {
      "href": "/2020/03/28/about-Dyuzz/"."title": "About the Author"}]."redirectors": [{"toPath": "/2020/03/28/about-Dyuzz/"."fromPath": "/about/"}]."gaOptimizeId": "GTM-WHP7SC5"."carouselItems": [{"src": "/favicons/android-chrome-512x512.png"."target": "/stats/"}]."zhihuUsername": "dyuzz"."githubUsername": "Dyuzz"."maxPostsInPage": 10."facebook": "Dyuzz"
}

Copy the code
  1. To use Google Analytics, change the Tracking ID in gatsby-config.js:
    {
      resolve: `gatsby-plugin-google-analytics`.options: {
        // replace "UA-XXXXXXXXX-X" with your own Tracking ID
        trackingId: "xxxxxxxxxx",}},Copy the code

Thank you

Thanks to GatsbyJS open source community and Calpa open source code, I quickly build a happy Blog with zero foundation

contact

If you have any questions, can you leave a message on the message board