Recently and double 叒 to sort out their blog website, found a relatively fast way to build their own blog, very suitable for lazy me, extremely simple to record the process. Because he is a small front-end, so this way is more front-end.

Use of gatsby

1. Install

# Install the Gatsby scaffolding
npm install -g gatsby-cli
Download a template
gatsby new my-blog-starter https://github.com/gatsbyjs/gatsby-starter-blog
# run
cd my-blog-starter
npm install
npm start
Copy the code

2. Modify the configuration

The gatsby configuration is set in the gatsby-config file.


module.exports = {
  siteMetadata: {
    title: `Gatsby Starter Blog`.// Title of the article
    author: {
      name: `Kyle Mathews`.// Your name
      summary: `who lives and works in San Francisco building useful things.`.// Summarize yourself in one sentence
    },
    description: `A starter blog demonstrating what Gatsby can do.`.siteUrl: `https://gatsbystarterblogsource.gatsbyjs.io/`.social: {
      twitter: `kylemathews`,}},... }Copy the code

Plus some ability to generate templates quickly;

You need to install an additional library to support it
npm install --save-dev oops-blogger
Copy the code

Script in package.json adds a new command:

{
  "script": {
    "new": "blogger -r ./content/blog -d iso"}}Copy the code

After completing these two steps, you should be able to generate the template using NPM run new and start your first blog post under the content/blog/{filename} path! And see your results after NPM start.

3. Modify the style

I’m not going to list them all. Just make a change to the SRC CSS and you’ll have the style you want. The built-in style is very simple.

build

npm run build
Copy the code

Everything in the public file that we build is our entire website.

Put into making

Here is the main github page used. The use of this will not be described, there are a lot of online information. How to use Github Pages?

Follow the tutorial above and push the contents of the public file.

At this point

done! perfect!

Find a quick way to build a blog