跳到主要内容位置

使用react+docusaurus快速搭建一个博客网站

快速搭建一个react个人静态博客网站,并使用vercel免费部署发布到线上#

首先看下成果图:

image-20210520214105685

本篇你将您学到:

1 如何快速搭建一个自己的博客网站,可以在这个网站里面上传自己的博客、撰写自己的文档;

2 通过github、vercel 自动化部署一个前端项目到线上,免费的。(正常我们要买域名、服务器才能,而这里不需要,当然免费的话网就有点慢了,后面也可以自己搞一个域名服务器发布)

博客框架:

  • docusaurus,快速构建一个静态网站。

官方文档:https://docusaurus.io/zh-CN/

网站UI及源码参考:

(已联系过峰华大佬,再次感谢峰华大佬,可以让我在他的源码基础上再进行创作!)

关于docusaurus的讲解,可以看峰华的视频,有讲解,本篇不再赘述。

【JAMSTACK】使用 Docusaurus 静态网站生成器搭建个人博客:https://www.bilibili.com/video/BV1uE411x7mE

【JAMSTACK】部署 Docusaurus 搭建的个人博客:https://www.bilibili.com/video/BV11E411M7WL

本网站源码:

https://github.com/JACK-ZHANG-coming/my-now-blog

本网站ip地址:

https://zhangqiang.vercel.app/


1 拉取github源码到本地,然后运行#

此处可以选择峰华的源码,也可以选择我的这个仓库的源码,我这个仓库源码是改完之后的,下面我将以我的仓库源码作为演示。

image-20210522104648826

2 修改页眉页脚、首页#

b站视频10:00’往后;

3 上传自己的博客(blog)#

b站视频16:40‘往后;

4 上传自己的文档(doc)#

b站视频27:35秒往后;

5 将前端网站部署发布到线上 (vercel)#

见b站视频;

6 本篇博客网站搭建视频教程#

https://www.bilibili.com/video/BV19K4y197yA/

注:本网站仅作为个人记录博客、分享学习知识所用。如果觉得这些内容有对你有用的话,就请点个赞吧~ 谢谢~