实战教程｜如何制作一个简单的博客网站（上）

我们在向大家征集开发课程大纲后，便陆续收到了很多建议。大家是热情与支持，是我们持续更新的动力。

由于大家的课程建议比较散，需要结合实际案例进行讲解，因此我们先从最简单的开始。本文将会跟大家介绍，如何通过 React 和知晓云快速制作一个简单的个人博客。

适用人群：

• 🙋刚接触编程的大学生（中小学生有多余精力也可，知晓云用户最小年龄 14 岁喔）
• 🙋有兴趣学习前端开发的产品、测试和运营人员
• 🙋业余爱好，有大量的学习时间，希望通过掌握基础开发知识，未来将开发应用作为副业

如果你有兴趣分享你的开发经验，请联系小晓云投稿（微信号：minsupport3），期待你的分享。

本文会跟大家介绍，如何通过 React 和知晓云快速制作一个简单的个人博客。

本文将使用到的技术：

• React
• Geist UI 库，用于快速构建样式
• 知晓云 Web SDK
• react-router-dom，用于页面跳转
• moment.js，用于解析日期

开始前的准备

在开始构建之前，我们先构思一下常见个人博客页面的几个要素，也就是头部、内容和底部。头部一般放置网站的 Logo 和相关链接；内容则一般为文章分类、文章标题、以及文章内容；而底部一般放置一些版权所有，以及其他的一些链接。

最后这些元素可以总结为以下几点：

头部：

• Logo
• 相关链接

内容：

• 文章分类
• 文章标题
• 文章内容

底部：

• 版权所有
• 其他链接等

经过上面的一轮构思，我们可以根据这几点开始着手写代码了。

创建一个新的 React 项目

使用 create-react-app CLI 创建一个新项目

在本地目录中输入 npx create-react-app .（注意最后的英文句号表示在当前目录下创建），并删除不常用的目录文件，最终得到：

我们还需要安装一下 moment.js 和 react-router-dom，为接下来的工作作准备：

yarn add moment react-router-dom

使用 Geist React UI 库

为了快速构建个人博客，本文将会使用 Geist UI 库（https://react.geist-ui.dev/zh-cn）作为样式支撑。该依赖库有完善的样式体系，非常适合本次的博客开发：

yarn add @geist-ui/react @geist-ui/react-icons

安装完毕后，添加 Geist UI 到我们的项目中。在 src/index.js 中写入以下代码：

import React from 'react'
import ReactDOM from 'react-dom'
import { GeistProvider, CssBaseline } from '@geist-ui/react'
import './index.css'
import App from './App'
 
ReactDOM.render(
 <React.StrictMode>
   <GeistProvider>
     <CssBaseline />
     <App />
   </GeistProvider>
 </React.StrictMode>,
 document.getElementById('root')
)

构建基础页面和组件

构建首页和文章页

在 src 目录下新建 pages 文件夹，并往内分别再新建包含 index.js 的 home 和 article 文件夹，作为我们页面的支撑：