table of Contents
B station video - Click on transfer
History confused
I've always could not find a satisfactory blog system, wordpress this program is big, and then the configuration is not easy. Also take up more server resources. I have not wanted a quick and simple and the blog platform, and later found some static web site builder, like hexothis, but found that the above topic and look good, too lazy to write their own. Later, while I have it directly to the blog posted on other third-party blog platform. Now found this docusaurus, with its theme before I saw a big brother Dan Abramov, its overreacted.io blog, style is exactly the same, because he is one of the authors react, it is estimated that they are each other this style learn, it can switch the subject and dark day mode, looks better. Installation and deployment is particularly simple, my blog also use it to build this.
Blog dim?
First, to clarify a question, Why should there be an own blog? Benefits blog is to let programmers:
It can be treated as our sideline. If we encounter a problem when writing code or learning a new technology when we can learn these things gave organized into blog, then publish it, so it can not only consolidate our knowledge, detection technique we have not learned to understand this, then it can make other people want to learn these things can also be seen, such as after these people share more, you will slowly save some fans, so that your blog can become one of your brand , the arrival of this brand, you go to the interview, or is doing, you can put it out, then we can see your work, so for your future career or very rich promotion have helped. Now you also understand the benefits of this blog it, then we begin to build a blog with this Docusaurus
Docusaurus Profile
It is a static web site builder, before I mentioned this concept in the video front end of my road map inside, he is using React to write the source code is then compiled into a static HTML css. He wrote this article supports Markdown syntax, and then, it is with this marketdown mdx is supported markdown jsx grammar, seamless integration React, inside custom components can be introduced, then what he also supports plug-ins, as well as the theme, we can also write custom components, it defaults to a component of a theme to overwrite, particularly convenient.
Installation and operation environment
Because he is a node of the project, so you have to install about node js's environment, as well as the package manager, such as yarn, or is not installed with their own npm can, I used yarn. Specifically how to install Node.js as well as how to install yarn you can watch those videos I had hair:
Node.js installation video tutorial
Installation docusaurus
Create Docusarus this project, it has a scaffolding, used to be a node of the global library, but use npx can directly use it to create what we project on it, do not install to the global library. Run the following command to create the project:
npx @docusaurus/init@next init [name] [template]
The name is the project name and template is the template, the template start with its official classic, classic, on the line. I am here to create a fh-blogproject:
npx @docusaurus/init@next init fh-blog classic
Run docusaurus
After you create finished, to enter into this fh-blog folder inside, run
yarn start
Or run with npm:
npm start
After a successful run of it, it will automatically open a browser, and then visit is http://localhost:3000, he can see this interface, we can see with the official website before the document is the same. There are documents, blog, and github link above, dark and day mode switching.
Project structure
This project, the general structure is:
my-website
├── blog
│ ├── 2019-05-28-hola.md
│ ├── 2019-05-29-hello-world.md
│ └── 2020-05-30-welcome.md
├── docs
│ ├── doc1.md
│ ├── doc2.md
│ ├── doc3.md
│ └── mdx.md
├── package.json
├── src
│ ├── css
│ │ └── custom.css
│ └── pages
│ ├── styles.module.css
│ └── index.js
├── static
│ └── img
├── docusaurus.config.js
├── package.json
├── README.md
├── sidebars.js
└── yarn.lock
/blog/- which is to write blog articles are markdown files./docs/- which is to write the document, it is also markdown files./src/- 源代码文件夹，里面有一个css文件夹，然后它里边有个custom.css里面是写自定义的 css 代码的。/src/pages- 里边放一些自定义的页面，使用 react 语法来写。
/static/- 放静态资源文件，这些文件会出现在最后打包出来的静态网站里面，在它的根目录下边，它下边的img文件夹是放静态图片的。/docusaurus.config.js- 这个是配置这个站点的。/package.json- node.js 的工程配置文件。/sidebar.js- 配置文档页面侧边栏，只有文档页面才有，用它来定义文档的目录结构。
另外呢，也可以自己创建一个 theme 文件夹，里边可以定义一些组件用来替换默认主题里面的一些组件。
配置为博客模式
docusaurus 默认是文档风格的主页，要是把它改成一个博客形式的，需要做一点点的配置。打开它的配置文件，docusaurus.config.js 。把 presets 这个配置改成如下所示：
presets: [
[
"@docusaurus/preset-classic",
{
// docs: {
// sidebarPath: require.resolve('./sidebars.js'),
// editUrl:
// 'https://github.com/facebook/docusaurus/edit/master/website/',
// },
blog: {
path: "./blog",
routeBasePath: "/"
}
// 省略其它代码
}
]
];
如果不用文档的话，就把 docs 这个删除或者注释了，然后加上 blog ，里边添加：
path属性，它的值为”./blog”，也就是指向 blog 的文件夹。routeBasePath属性，这个是访问这个博客的路径，设置成/斜杠就是默认网站的首页。
然后把 src/pages 下边 index.js 的改成别的名字或者是给删除，这样的话他就不会同时匹配这两个文件了。
顶部导航的 docs 如果要去掉的话，可以找到 navBar 这个配置项，把 links 中的有关 docs 的这段删掉：
{ to: "docs/doc1", label: "Docs", position: "left" }
发表第一篇博客
In a blog is blogto create a markdown file inside. The title is the beginning of a date format. Docusaurus this date will be automatically resolved to our publication date of this blog, followed behind the name of the file, you can play a meaningful, for example, it is the title of the blog in English, such as the project in the Welcomeblog:
2019-05-30-welcome.md
File, which is the first stage is to configure some basic information about this blog:
---
id: welcome
title: Welcome
author: Yangshun Tay
author_title: Front End Engineer @ Facebook
author_url: https://github.com/yangshun
author_image_url: https://avatars0.githubusercontent.com/u/1315101?s=400&v=4
tags: [facebook, hello, docusaurus]
---
id- visit this blog's URL.title- title.author- author.author_title- is the author of a brief self-introduction, jobs and the like.author_image_url- Avatar.tags- blog label, is an array form.
If you want to show only part of the article is too long, you can add:
<!--truncate-->
This comment on it, it will hide behind its content, then displays a link to read more.
Such first blog is complete, it is now run on a local, behind revisit how to deploy it to the server.
