您现在的位置是:首页 > Javascript
当前栏目
使用react+docusaurus快速搭建一个博客网站
2023-02-19 12:20:33 时间
快速搭建一个react个人静态博客网站,并使用vercel免费部署发布到线上#
首先看下成果图:
本篇你将您学到:
1 如何快速搭建一个自己的博客网站,可以在这个网站里面上传自己的博客、撰写自己的文档; 2 通过github、vercel 自动化部署一个前端项目到线上,免费的。(正常我们要买域名、服务器才能,而这里不需要,当然免费的话网就有点慢了,后面也可以自己搞一个域名服务器发布)
博客框架:
- docusaurus,快速构建一个静态网站。
官方文档:https://docusaurus.io/zh-CN/
网站UI及源码参考:
- 峰华前端工程师个人博客:https://zxuqian.cn/
(已联系过峰华大佬,再次感谢峰华大佬,可以让我在他的源码基础上再进行创作!)
关于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源码到本地,然后运行#
此处可以选择峰华的源码,也可以选择我的这个仓库的源码,我这个仓库源码是改完之后的,下面我将以我的仓库源码作为演示。
2 修改页眉页脚、首页#
b站视频10:00’往后;
3 上传自己的博客(blog)#
b站视频16:40‘往后;
4 上传自己的文档(doc)#
b站视频27:35秒往后;
5 将前端网站部署发布到线上 (vercel)#
见b站视频;
6 本篇博客网站搭建视频教程#
https://www.bilibili.com/video/BV19K4y197yA/
注:本网站仅作为个人记录博客、分享学习知识所用。
相关文章
- json解析模块
- JavaScript 入门基础 / 概念介绍(一)
- Vue + SpreadJS 实现高性能数据展示与分析
- SpreadJS集算表联动数据透视表,高效实现前端数据多维分析
- 如何用 JavaScript 编写你的第一个单元测试
- 如何在JavaScript中使用for循环
- JavaScript中的箭头函数
- 有用的内置Node.js APIs
- 你不知道的JavaScript APIs
- 如何在JavaScript中使用高阶函数
- React报错之Property does not exist on type 'JSX.IntrinsicElements'
- 检查原生 JavaScript 函数是否被覆盖
- React报错之Type '() => JSX.Element[]' is not assignable to type FunctionComponent
- React报错之JSX element type does not have any construct or call signatures
- React报错之组件不能作为JSX组件使用
- 理解JavaScript中的window对象
- 让Node项目支持可扩展的环境配置
- 使用 DevTools 加速调试 Node.js 应用程序
- 讲述JSON Web Token(概念)
- ?RxJs合并接口应用案例