preface

Last time we mentioned GatsbyJS, which is a system that can take arbitrary data and generate static websites. This time, let’s use Calpa’s technology blog as an example to start building the site.

GatsbyJS introduction (A) : to build a modern front-end website out of the box

The premise

  1. Git
  2. Node: Any 8.x release starting with 8.5.0 or later

Start projects from scratch

GatsbyJS provides a command-line tool that you can use to quickly start your project.

The default Starter of the Gatsby new command is:

Github.com/gatsbyjs/ga…

If you want to experience my style of blogging, you can also choose to use my blog Starter:

Github.com/calpa/gatsb…

Operation method

  1. Install gatsby – the cliNPM install - global gatsby - the cli
  2. Command to create the Gatsby project foldergatsby new my-awesome-blog https://github.com/calpa/gatsby-starter-calpa-blog
  3. Start running projectcd my-awesome-blog npm startYour website will be inlocalhost:8000Run inside.
  4. You can use any editor to edit the code, if you modify SRC /pages/*.js, such as 404.js.

After you save, you can see that your browser is synchronized in real time.

If you want to parse the data layer through GraphQL, you can also access localhost:8000/ ___graphQL.

It is worth mentioning that:

When running gatsbyjs-starter-calpa-blog, it automatically opens Webpack Bundle Analyser with path 127.0.0.1:8888. The package analyzer allows you to read the components of the package code and optimize them.

GatsbyJS website architecture

. ├ ─ ─ data │ └ ─ ─ the template ├ ─ ─ gatsby ├ ─ ─ public ├ ─ ─ scripts ├ ─ ─ the SRC │ ├ ─ ─ API │ ├ ─ ─ components │ ├ ─ ─ pages │ │ ├ ─ ─ Guestbook │ ├── tags │ ├── exercises ─ styles │ ├── static ├─Copy the code
  1. /data: To place the data of the website, such as configuration (config), page top big picture (header), articles (posts). There will be two configuration methods here. One is to develop the page frame in the same project and modify the article data. 2. Use a remote database, such as Contentful, to obtain data, and do not store data locally.
  2. /data/template: site data template, you can refer to how to local default configuration, and then modify.
  3. /scripts: The non-Gatsby script you need to run
  4. /src: All the code you see on the front end, such as page templates, presentation layers
  5. /gatsby: Dedicated to the Gatsby build code, which has been subdivided into different life cycles for getting data, building, deploying, and running the browser.
  6. /staticGatsbyJS will call fs.copy to copy and paste files directly to the public directory
  7. /public: Static website folder generated by GatsbyJS

The system uses templates for the list design of the home page and the text design of the article, which are located in/SRC /templates/page.js and/SRC /templates/blog-post.js.

Deployment project

If you are happy with the project, you can run the Gatsby Build and GatsbyJS will optimize the site and generate HTML and JavaScript code files for each route.

You can use Gatsby Serve to start a local server to view the generated website effects.

Afterword.

The series should be about ten articles, one a week.

GatsbyJS introduction (A) : to build a modern front-end website out of the box