准备工作

#GitHub

#了解

什么是 GitHub?这个名字由两个单词构成:Git 和 Hub。Git 是一个流行的版本控制工具,绝大情况下被程序员们用来管理自己写的代码和文档,它的可以接管你的代码文件夹,为其创建历史版本库,比较你修改的代码与历史代码的修改点等。Hub 的意思是集散中心、聚集地等意思,这两个词组成了 GitHub ,因此 GitHub 是一个开源代码仓库聚集地。我们的 Daymd 代码就存放在上面,因此,我们必须拥有一个 Github 账号。

#注册

首先,Github处于“半墙”状态,看它主页你就知道为什么了...因此你很可能无法访问,那么你需要一个 boost 或者 ladder。
搞定 ladder 之后,进入 Github,选择注册,按照流程来就可以。注册 Github 详细操作

#克隆仓库

你将使用我的源码进行网站架构。这需要你克隆我的源代码。打开,点击右上角按钮 Fork ,将我的仓库克隆到你的仓库。
1

与此同时,请您顺手点一个 Star !拜托了!🙏🙏🙏🙏🙏🙏

2

这时,你就可以在你的 GitHub 仓库中拥有一个 Daymd 副本。

#Stackblitz

2

#介绍

Stackblitz 是一个在线的代码编辑器,主要聚焦于创建 Web 应用项目。它的最大优点是在浏览器中就可以完成一个完整 Web 应用的构建。它让 Node.js 可以在浏览器中运行,这也就帮助我们免去了 Node.js 安装和部署、NPM 安装部署工作。如果你未接触过此类 Web 开发流程,那就跟着这一章节,在浏览器中借助在线 IDE Stackblitz 开始一个 Daymd 项目(也就是一个 Next.js 项目)。

#项目导入

打开 按照提示,点击创建一个 Next.js 的工程:

1

接着,进入工程界面,点击 Connect repository:

2

点击 import an existing repository ,导入一个已存在的仓库:

2

接着,到你刚刚 Fork 好的仓库(注意是你自己的仓库,名称应该是 yourgithubid/Daymd ) 而不是 inannan423/Daymd 。复制浏览器地址栏的链接:

1

粘贴到 Stackblitz 导入界面。

1

点击按钮 import repository 导入。导入完成后显示如下:

1

#项目运行

这时,需要你重新刷新浏览器。等待重新安装完成。如果依旧如此,请尝试多次刷新。成功之后右边会展示新的预览。

点击右上角,open in new tab

1

就可以开始在线编写个人网站啦!

#代码编辑器设置

设置代码编辑区字体大小,在设置中的 User Setting 中,找到 "editor.fontSize": 20, 字段(可以使用 ctrl+F 搜索快速找到),建议值 20

1

提示

下面将介绍 Codesandbox ,实际上它和 Stackblitz 类似,你只需要选择一个使用即可,之后会使用 Stackblitz 演示。

#Codesandbox

1

#介绍

同 Stackblitz 一样,CodeSandbox 也是一个在线的代码编辑器,主要聚焦于创建 Web 应用项目。它的最大优点是在浏览器中就可以完成一个完整 Web 应用的构建。它让 Node.js 可以在浏览器中运行,这也就帮助我们免去了 Node.js 安装和部署、NPM 安装部署工作。如果你未接触过此类 Web 开发流程,那就跟着这一章节,在浏览器中借助在线 IDE Codesandbox 开始一个 Daymd 项目(也就是一个 Next.js 项目)。

#项目导入

打开 按照提示,使用 GitHub 登录后,点击右上角的 Create Sandbox ,开始一个项目导入。你可以看到下面的界面:
1
接着,到你刚刚 Fork 好的仓库(注意是你自己的仓库,名称应该是 yourgithubid/Daymd ) 而不是 inannan423/Daymd 。复制浏览器地址栏的链接:

1

粘贴到 Codesandbox 导入界面。

2

点击 Import and Fork 按钮,这样,一次导入就完成了。界面如下:

2

#项目运行

等待右边包自动安装完成:

1

进度条安装完成后,就可以在右边小窗口中看到预览。这时,为了更好的预览体验,你可以点击右上角的弹出预览按钮(如下图)。

1

如果没有自动启动完成你可以点击右下角终端中的 + 按钮,添加新终端,输入指令 npm run dev:

1

输入指令如下:

2

右下角弹出提示,告知你 3001 已经可以开始预览。点击按钮进入即可。

3

#本地运行

如同所有的 Web APP 一样,Daymd 也可以在本地运行。你可以先克隆我的项目(同时给我一个 Star)。

git bash
git clone https://github.com/inannan423/Daymd.git
cmd
npm install
cmd
npm run dev
提示
遇到问题?
如需要帮助,可以选择给电子邮箱发邮件: czhorange@foxmail.com 或者点击进入 issue 提交界面.
Last Updated:2022-08-29
文档地址