下面将介绍 Codesandbox ,实际上它和 Stackblitz 类似,你只需要选择一个使用即可,之后会使用 Stackblitz 演示。
准备工作
#GitHub
#了解
什么是 GitHub?这个名字由两个单词构成:Git 和 Hub。Git
是一个流行的版本控制工具,绝大情况下被程序员们用来管理自己写的代码和文档,它的可以接管你的代码文件夹,为其创建历史版本库,比较你修改的代码与历史代码的修改点等。Hub
的意思是集散中心、聚集地等意思,这两个词组成了 GitHub
,因此 GitHub 是一个开源代码仓库聚集地。我们的 Daymd 代码就存放在上面,因此,我们必须拥有一个 Github 账号。
#注册
首先,Github处于“半墙”状态,看它主页你就知道为什么了...因此你很可能无法访问,那么你需要一个 boost 或者 ladder。
搞定 ladder 之后,进入 Github,选择注册,按照流程来就可以。注册 Github 详细操作
#克隆仓库
你将使用我的源码进行网站架构。这需要你克隆我的源代码。打开,点击右上角按钮 Fork ,将我的仓库克隆到你的仓库。
与此同时,请您顺手点一个 Star
!拜托了!🙏🙏🙏🙏🙏🙏
这时,你就可以在你的 GitHub 仓库中拥有一个 Daymd 副本。
#Stackblitz
#介绍
Stackblitz 是一个在线的代码编辑器,主要聚焦于创建 Web 应用项目。它的最大优点是在浏览器中就可以完成一个完整 Web 应用的构建。它让 Node.js
可以在浏览器中运行,这也就帮助我们免去了 Node.js 安装和部署、NPM 安装部署工作。如果你未接触过此类 Web 开发流程,那就跟着这一章节,在浏览器中借助在线 IDE Stackblitz 开始一个 Daymd 项目(也就是一个 Next.js 项目)。
#项目导入
接着,进入工程界面,点击 Connect repository
:
点击 import an existing repository
,导入一个已存在的仓库:
接着,到你刚刚 Fork 好的仓库(注意是你自己的仓库,名称应该是 yourgithubid/Daymd
) 而不是 inannan423/Daymd
。复制浏览器地址栏的链接:
粘贴到 Stackblitz 导入界面。
点击按钮 import repository
导入。导入完成后显示如下:
#项目运行
这时,需要你重新刷新浏览器。等待重新安装完成。如果依旧如此,请尝试多次刷新。成功之后右边会展示新的预览。
点击右上角,open in new tab
。
就可以开始在线编写个人网站啦!
#代码编辑器设置
设置代码编辑区字体大小,在设置中的 User Setting
中,找到 "editor.fontSize": 20,
字段(可以使用 ctrl+F 搜索快速找到),建议值 20
:
#Codesandbox
#介绍
同 Stackblitz 一样,CodeSandbox 也是一个在线的代码编辑器,主要聚焦于创建 Web 应用项目。它的最大优点是在浏览器中就可以完成一个完整 Web 应用的构建。它让 Node.js
可以在浏览器中运行,这也就帮助我们免去了 Node.js 安装和部署、NPM 安装部署工作。如果你未接触过此类 Web 开发流程,那就跟着这一章节,在浏览器中借助在线 IDE Codesandbox 开始一个 Daymd 项目(也就是一个 Next.js 项目)。
#项目导入
打开 按照提示,使用 GitHub 登录后,点击右上角的 Create Sandbox
,开始一个项目导入。你可以看到下面的界面:
接着,到你刚刚 Fork 好的仓库(注意是你自己的仓库,名称应该是 yourgithubid/Daymd
) 而不是 inannan423/Daymd
。复制浏览器地址栏的链接:
粘贴到 Codesandbox 导入界面。
点击 Import and Fork
按钮,这样,一次导入就完成了。界面如下:
#项目运行
等待右边包自动安装完成:
进度条安装完成后,就可以在右边小窗口中看到预览。这时,为了更好的预览体验,你可以点击右上角的弹出预览按钮(如下图)。
如果没有自动启动完成你可以点击右下角终端中的 + 按钮,添加新终端,输入指令 npm run dev
:
输入指令如下:
右下角弹出提示,告知你 3001
已经可以开始预览。点击按钮进入即可。
#本地运行
如同所有的 Web APP 一样,Daymd
也可以在本地运行。你可以先克隆我的项目(同时给我一个 Star)。
git clone https://github.com/inannan423/Daymd.git
npm install
npm run dev
czhorange@foxmail.com
或者点击进入 issue 提交界面.