从零到一搭建个人博客（一）

18年的时候，我做了我人生中第一个网站，从网站代码到服务器，域名…就这样，我开始了对新世界的探索之旅。

18年那个网站，如今早已不能再访问，在它刚入世的时候，我拿给一个后端同事看…，后端同事表示不错，就是界面不敢恭维…

纵使如此，我很开心，因此而受到了极大鼓舞，感谢当时的同事。

就不扯以前的事了，在开始写这个系列之前，声明本人水平尚浅，写这类帖子不够专业，但会尽可能把我做这个博客用到的东西，以及如何解决遇到的问题都列出来，也算是一个记录吧。

所使用到的技术栈

• React
• AntdDesignUI
• Nest

这个博客共有三个项目，两个前端项目，博客前台和后台管理系统，都使用React+AntD搭建，还有一个中台服务，使用nest做的，提供博客的数据服务。

React搭建前后台

创建项目

yarn create react-app my-app --template typescript

运行项目

yarn start

前台部分分为以下几个部分，把他们拆分出来做，这样方便管理，结构也比较清晰。

• Author.tsx 个人简介
• Header.tsx 公共头部
• Footer.tsx 公共底部
• Msg.tsx 留言模块
• list.tsx 文章列表
• detail.tsx 文章详情

以上是前台部分的主要模块划分，然后把通用的部分封装成组件，提高效率及可复用性，避免写重复的代码。

Markdown

本博客的文章内容皆由MD语法编写，那么文章详情就必须要可以解析MD语法，这里使用了一款插件。

• 为什么使用MD语法编写博客内容
• MD语法有哪些优点

Markdown将Md语法编写的语言转换成了HTML内容，方便灵活，内容丰富。另外本博客的内容主要以学习笔记为主，所以会牵扯到代码部分，于是就选择了md的内容解析。

// 安装插件
npm install marked --save
npm install highlight.js 

// 手动引用样式
import hljs  from 'highlight.js'
import 'highlight.js/styles/github.css'
// 文章内容
let markdown = content
const render = new marked.Renderer()
marked.setOptions({
  renderer:render,
  highlight: (code) => {
    return hljs.highlightAuto(code).value;
  },
  pedantic: false,
  gfm: true,
  breaks: false,
  sanitize: false,
  smartLists: true,
  smartypants: false,
  xhtml: false
})
// 解析成HTML
let html = marked(markdown, { renderer: render }) 
// 节点使用
<div dangerouslySetInnerHTML={{__html:html}}></div>
// 相关配置参考官方文档
https://marked.js.org/#/USING_ADVANCED.md#highlight

• 路由配置

// 遍历路由列表
<Router >
    <Switch>
        {
            routes.map((item,index)=>
                <Route key={index} path={item.path} exact component={item.component} />
            )
        }
    </Switch>
</Router>

• 数据请求

// 安装
npm install axios 

// 封装示例
const http = axios.create({
    baseURL:'http://localhost:3001'
})
export async function xxx(url,data,type = 'GET'){
    return  await http({url,params:data, method:type})
}

• 基本上，到这里准备工作就做的差不多了，src目录（个人）

src 
└─ components  // 组件
└─ api        // 接口封装
└─ static    // 静态文件
└─ routers  // 路由文件
└─ views   // 页面

博客地址

使用浏览器打开：https://sonders.cn