创建发布第一篇博客
技术背景
本项目使用Meta开源的Docusaurus构建。这是一个类似于Vuepress的博客构建器,区别在于Vuepress基于Vue.js,而Docusaurus基于react.js。使用Docusaurus可以搭建带有快速客户端导航的单页应用,充分利用了React,让网站具有交互能力。它提供了开箱即用的文档功能,不过也可用于搭建各种网站(个人网站、产品、博客、营销主页,等等),也就是说,Docusaurus为我们封装了建立文档网站所必要的基本功能,比如夜间模式、自动生成目录等。
下面我将讲一讲如何在本站新建一篇博客。
克隆文件
进入源代码仓库,克隆项目。
必要配置
使用vscode打开项目,项目结构如下:
安装依赖。
npm install
安装依赖要求您的环境中安装了Node.js及其附带安装的包管理器npm。
在cmd窗口中查看Nodejs版本:
node -v #检查nodejs版本
npm -v #检查npm版本
如果你只需要增加一篇文章,您只用关注docs
文件夹。打开文件夹,在docs/技术分享
目录下新建文件,可以命名为你的名字缩写+文章名称.md,当然,你也可以新建一个文件夹。
创建成功后如图所示:
然后,为这边文章添加格式头。
格式头用于填写文章的标题、作者信息等,便于Docusaurus解析。
---
title: 修改官网配置 # 文章标题
date: 2022-07-10 # 文章修改时间
authors: Chengzihan # 作者昵称
tags: [技术分享] # Tag标签
---
如图:
开始写作
如此您就可以开始写你的第一篇文章了,文章使用markdown语法,上手极为容易,请参考下面的链接,简单学习Markdown语法以及Docusaurus支持的容器。
运行检查
在vscode终端中,运行以下指令:
npm start
即可在浏览器端口进行在线预览。
发布
在你完成之后,请提交pull request
,这样我们才能将您的文章更新到官网,PR提交方法请参考:http://t.csdn.cn/SEar4。
本项目使用Github Action持续集成,不需要您构建代码,只需要将源代码提交即可。请确定在npm start
中运行无误再进行提交。