The system must have a Node to use this step.

start

1. Install the CLI

npm install -g gatsby-cli
Copy the code

2. Create a new Gatsby site by standing on someone else’s shoulders and choosing the official blog starter, Gauss-starter-Blog

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

Or the default

gatsby new 
Copy the code

gatsby new Then, select the corresponding project type as prompted:

For blogs, choose the Gatsby -starter-blog

3. Local development environment

Switch to the local folder directory and run Gatsby Develop to start the project.

Open http://localhost:8000 in your browser and see a concise blog.

Deploy to Github Pages

IO to create a project on github. For example, if your github username is lEnGKX, the project name will be lengkx.github.

1. Install dependencies

npm install gh-pages --save-dev
Copy the code

2, configuration,

Go to Gatsby -config.js and add the pathPrefix configuration

module.exports = {
  pathPrefix: `/project-name`,}Copy the code

If you don’t need a path, simply configure it to pathPrefix: /.

If configured to/project – name, visit https://username.github.io/project-name/;

If the configured to/https://username.github.io.

In package.json, add a scripts configuration that will first build static files to the public directory and then push them to the Gh-Pages branch of the Github project.

 "scripts": {
    "deploy": "gatsby build --prefix-paths && gh-pages -d public"
  }
Copy the code

If you want to push to the master branch, the configuration is as follows:

 "scripts": {
    "deploy": "gatsby build --prefix-paths && gh-pages -d public -b master"
  }
Copy the code

If you choose to push to the master branch, create a new dev branch to develop and save the source code, because pushing to the Master branch changes the directory structure and is messy.

3, publish,

npm run  deploy
Copy the code

After the execution, wait a little, open the username. Making. IO/project – nam… You can see the effect.

4. Bind the domain name

Create a new static folder in the root directory of the project, then add the CNAME file and write your domain name.

5. Domain name resolution

My own configuration is as follows:

Ant design support

Details see the node module: www.npmjs.com/package/gat…

Gatsby called restapi

Stackoverflow.com/questions/4…

conclusion

Gastby advantage

  • Quite flexible, giving personal websites a lot of room for modification
  • Support graphQL, easy data call
  • Strong ecology, 1500+ number of plug-ins basically meet most of the needs

Gastby disadvantage

  • Because of its flexibility, it is not so friendly to personal blogs. Md files and folders need to be created by themselves. Unlike Hexohexo new [layout] It’s so convenient.