For a better reading experience, read the original article here

After more than a week of busy work, I opened the blog scaffolding that I migrated from Jekyll to Gatsby. This scaffolding is out of the box, suitable for students who do not want to touch the code, of course, it also provides high scalability, and can customize the development of their own pages

Gatsby is a page generator based on React and GraphQL, using source data (CMS, MarkDown, API, DataBase, YAML, JSON, CSV…). Generate a static page, very suitable for blog page development. See the Gatsby official website [1] for more information.

start

First install the Gatsby command line tool:

npm install -g gatsby-cli
Copy the code

Then use the blog template [2] to build a quick blog framework:

gatsby new my-blog-starter https://github.com/zhouyuexie/gatsby-starter-quiet
Copy the code

Switch to your project directory and launch

cd my-blog-starter/
gatsby dev
Copy the code

The development of

Your site runs at http://localhost:8000!

Note: This is the second linkhttp://localhost:8000/___graphqlThis is a tool that queries all your data. If you need more information about this tool, please check out the official documentationGatsby tutorial.

Open and edit the SRC /templates/posts-list.tsx file. The browser will refresh immediately after you save the Settings.

The deployment of

Run YARN Build to compile your site with all static content in the./public folder.

To upload the file to your own server, edit the./deploy.sh file to add information about your server, and then execute YARN deploy

Project directory

The project catalog is as follows:

.├ ── node_modules ├─.src ├─.getTignore ├─.getTierrc ├─.babelrc ├─.tsConfig.json ├─ ├─ Passwords.js ├─ Passwords.js ├─ Passwords.js ├─ Passwords.js ├─ Passwords.js ├─ Package-Lock. json ├── ├── ├─ ├─ download.json └.mdCopy the code

Main document meanings:

  1. /node_modules: project dependencies.
  2. / SRC: contains all project source code, which will be compiled into static pages.
  3. .gitignore: files ignored by Git
  4. . Prettierrc: Configuration file for Prettier Prettier keeps your code formatted correctly.
  5. Gatsby -browser.js: the Gatsby Browser APIs file.
  6. Gatsby -config.js: This is the main gatsby configuration file, where all plug-ins are configured and metadata data is included. Check config Docs for more information.
  7. Js: the Gatsby Node APIs file.
  8. Js: The Gatsby Server-side Rendering APIs file
  9. Json: typescript configuration file
  10. Tslint. json: Typescript code detection
  11. tasks: gatsby-node.jsRelated tasks.
  12. static: Static file, easy to copypublicAccess is provided in the file.
  13. posts: MarkDown format blog, related image references are also in the internal folderimages.

other

You can check another example article on the use of MarkDown in Gatsby to understand the features of MarkDown in Gatsby.

If you have any problems or questions, you can open an issue to me.

  1. Gatsby ↩ ︎

  2. Gatsby – the starter – the -quiet ↩ ︎