Skip to main content

创建发布第一篇博客

技术背景

本项目使用Meta开源的Docusaurus构建。这是一个类似于Vuepress的博客构建器,区别在于Vuepress基于Vue.js,而Docusaurus基于react.js。使用Docusaurus可以搭建带有快速客户端导航的单页应用,充分利用了React,让网站具有交互能力。它提供了开箱即用的文档功能,不过也可用于搭建各种网站(个人网站、产品、博客、营销主页,等等),也就是说,Docusaurus为我们封装了建立文档网站所必要的基本功能,比如夜间模式、自动生成目录等。
下面我将讲一讲如何在本站新建一篇博客。

克隆文件

进入源代码仓库,克隆项目。

image.png

必要配置

使用vscode打开项目,项目结构如下:

1657442908775.png

安装依赖。

npm install

image.png

caution

安装依赖要求您的环境中安装了Node.js及其附带安装的包管理器npm。
在cmd窗口中查看Nodejs版本:

node -v #检查nodejs版本
npm -v #检查npm版本

如果你只需要增加一篇文章,您只用关注docs文件夹。打开文件夹,在docs/技术分享目录下新建文件,可以命名为你的名字缩写+文章名称.md,当然,你也可以新建一个文件夹。

image.png

创建成功后如图所示:

image.png

然后,为这边文章添加格式头

tip

格式头用于填写文章的标题、作者信息等,便于Docusaurus解析。

02.修改官网配置.md
---
title: 修改官网配置 # 文章标题
date: 2022-07-10 # 文章修改时间
authors: Chengzihan # 作者昵称
tags: [技术分享] # Tag标签
---

如图:
image.png

开始写作

如此您就可以开始写你的第一篇文章了,文章使用markdown语法,上手极为容易,请参考下面的链接,简单学习Markdown语法以及Docusaurus支持的容器。

Markdown特性
标题和目录
代码块
告示

运行检查

在vscode终端中,运行以下指令:

npm start

即可在浏览器端口进行在线预览。

发布

在你完成之后,请提交pull request,这样我们才能将您的文章更新到官网,PR提交方法请参考:http://t.csdn.cn/SEar4

tip

本项目使用Github Action持续集成,不需要您构建代码,只需要将源代码提交即可。请确定在npm start中运行无误再进行提交。

留名

北京林业大学数字媒体技术20级 程子涵
网站搭建于2022年夏
MyGithub
我的博客