参加小白兔的开发之路自由行的同学们,现在你可以自己在本地架设一个学习网站,启动本次的开发之旅:)
在本地架设学习网站
网站的源代码,包含文字与视频资料已经全部发送到你的邮箱里了。你可以把网站架设在家庭、公司或学校的局域网内,这样同属一个局域网的设备都可以访问到这个学习网站。
同学们可不要把网站部署到公网哦,不然地球人就都能看到了,恳请同学们手下留情。做这条学习路线我用了 800 小时,养家糊口不易呀。你可以把网站架设在内部网络,供同学,同事还有家人一起观看学习。谢谢大家了。
1:准备命令行界面
先准备一个命令行界面工具,macOS 用户可以使用系统自带的终端,Windows 用户可以去下载一个完整版的 Cmder。
2:安装 Node.js
在 Node.js 的官方网站,下载 12.x 版本的 Node.js。安装好以后,打开终端,然后执行下面的命令,如果能看到安装的 Node.js 的版本号,就说明已经安装好了 Node.js。
node -v
3:准备 Git
Git 是项目的源代码管理工具,如果你是 Windows 用户,并且之前下载安装了 Cmder ,打开 Cmder,新建一个 Bash as admin 类型的命令行标签,就可以直接使用 Git 这个工具了。macOS 用户可以去 Git 的官方网站下载并且把它安装在电脑上。
4:准备网站
准备好网站源代码,放在桌面上,解压缩以后会得到一个 xb2-book 目录。打开命令行界面,进入到这个目录的下面,然后用 NPM 安装项目依赖。
进入到网站项目所在的目录:
cd ~/desktop/xb2-book
安装项目的依赖:
npm install
参加本次自由行的同学,可以在自己的邮箱的收件箱里找到我给你发的邮件,如果没收到邮件可以用微信联系王皓。
5:启动网站
网站是基于 VuePress 做的,之前在安装项目依赖的时候已经安装好了这个包,你也可以在全局安装一下这个东西。执行:
npm install vuepress --global
然后在网站项目所在目录的下面,启动网站,可以执行:
npm run docs:dev
启动以后,你就可以在浏览器通过 http://localhost:8080 这个地址访问到在本地上运行的这个学习网站了。如果你想在内网的其它设备上访问这个网站,可以把地址里的 localhost 换成运行这个网站的设备在内网的 IP 地址。比如我的运行网站的电脑在内网的 IP 地址是 192.168.31.140,我的 iPad 与这台设备在同一个内网,所以在这台 iPad 上就可以通过 http://192.168.31.140:8080 访问这个网站。
6:修改网站
你可以修改网站的源代码与内容,它们都在项目的 docs 目录里。网站的源代码是在 .vuepress 这个目录的下面,注意这个目录的名字是用点开头的,默认在 macOS 系统里这种属于隐藏的目录,直接在 访达 里面,你是无法看到这种目录的。你可以在终端,进入到这个目录,然后用 open 命令打开这个目录,像这样:
cd ~/desktop/xb2-book/docs/.vuepress open ./
网站的静态资源,比如图片,视频等等,可以在 .vuepress/public 这个目录里找到,如果你不爽通过网页观看视频,可以用本地的视频播放器播放这些视频,网站的视频内容是在:
/docs/.vuepress/public/videos
网站的文字内容都在 docs 目录的下面,每个目录的下面都有一个 Markdown 格式的文件(.md),这些就是你在网站上看到的文字内容。如果你发现内容或格式有问题,你可以找到对应的 Markdown 文件,修改一下,然后重新运行网站。
这个网站的源代码我会在 Github 上的一个私有仓库里管理,我对自由行的同学们发出了邀请,如果你在 Github 里同意了我的邀请,就可以访问到这个私有仓库。如果仓库里有更新的内容,你可以在本地执行下面这个命令,把更新下载到本地,然后重新运行本地网站就可以了。
git pull origin master
评论
订阅会员可以有这个教程吗?
4 年 5 个月 以前
会员也可以在宁皓网上直接学习 :)
4 年 5 个月 以前
小白兔开发之路怎么看不了了呢
4 年 4 个月 以前
我换了个名字,之前的名字有点模糊,地址是:https://ninghao.net/package/xb2-node
4 年 4 个月 以前
明白 谢谢
4 年 4 个月 以前
:)
4 年 4 个月 以前
皓歌,我的node是12.18.1,npm install成功了,但是npm run start:dev却老是出错,不知道怎么回事?提示如下:
12:35:30 ├F10: AM┤ - Found 0 errors. Watching for file changes.
buffer.js:331
throw new ERR_INVALID_ARG_TYPE(
^
4 年 4 个月 以前
我是从这个仓库拉的代码
https://github.com/ninghao/xb2-node
4 年 4 个月 以前
参考一下这个课程,在本地把这个应用运行起来:https://ninghao.net/course/8606
4 年 4 个月 以前