Skip to main content

One post tagged with "html"

View All Tags

· 6 min read
Kyle

0、前提条件

可能有的人是首次使用,那么我们可以尽量全面介绍,照顾到细节。 为了简化操作的复杂度,尽量全部用 GUI 的形式来操作。

  • Windows11
  • Python3
  • NodeJS v20.12.2
  • Git Client:OpenLinkSaaS

1、安装所需软件和运行环境配置

1)安装 Python

推荐使用 Anaconda 进行 Python 开发,它集成了 Python 解释器和常用的科学计算库,方便管理环境和软件包,尤其适合数据科学、机器学习等领域。

image.png image.png image.png

  • 验证 Python 安装成功

image.png

2)安装NodeJS

image.png image.png image.png image.png

  • 验证 NodeJS 安装成功

image.png

3)安装OpenLinkSaaS

image.png image.png image.png

2、下载开源项“开放原子开源活动贡献榜”

2.1、用你的 AtomGit 登录 OpenLinkSaaS

image.png image.png

2.2、设置 SSH,让你的本地电脑和AtomGit 进行通信

  • 生成 SSH Key

image.png

  • 复制 SSH Key 公钥

image.png

  • 在 AtomGit 中设置此公钥

image.png

2.3、推荐使用 SSH 方式下载克隆

image.png image.png image.png image.png

3、数据转换

进入“开放原子开源活动贡献榜”项目的“src”目录

image.png

在“src”目录下,打开终端

image.png

安装python 项目的依赖包:pandas

pip install pandas image.png

执行命令python3 .\convert.py

4、项目test & build

1) test

进入“开放原子开源活动贡献榜”根目录,并且打开终端

注意,以下操作都在 master分支操作。

  • 安装 Nodejs 的 NPM 包依赖,执行下面命令

npm install

  • 上线前本地查看数据和站点的渲染,执行命令

    用于在开发模式下运行应用。 打开 http://localhost:3000 在浏览器中查看。如果你进行了编辑,页面将重新加载。 你还将在控制台中看到任何 lint 错误。

npm start

image.png

2) 推送到 master 分支

此时从本地看数据和页面如果都没有什么问题,那么可以先推送到 master 分支。

这里推荐两种操作方式二选一。

方式一:用 OpenLinkSaaS 操作

  • 添加并提交有变化的文件 image.png

  • 把提交了变更的数据推送到 AtomGit 远端仓库 image.png

  • 检查更新成功 image.png image.png

方式二:用 Git 命令操纵

分别执行命令

git add ./
git commit -m '更新说明'
git push

3) build

  • npm run build,此时会产生的静态文件都将会在 "build目录"中。

4) 切换到build分支,执行静态文件编译

从此处开始,操作都将会在build 分支操作。

4-1)这里推荐两种操作方式二选一。

方式一:用 OpenLinkSaaS 操作 image.png

  • 接着手动删除“build目录”和“.gitignore”文件之外的所有文件。
  • 手动把“build目录”里面的所有内容都移动到“build目录”之外,也就是和“build目录”同级别。再把“build目录”删除。 17dd5850df728b8e0743967d8a372f8.png

推送到远端 AtomGit 上的 build 分支

  • 添加&提交 image.png

  • 把提交了变更的数据推送到 AtomGit 远端仓库 image.png image.png

  • 检查更新成功 image.png

方式二:用 Git 命令操作

git checkout build
  • 接着手动删除“build目录”和“.gitignore”文件之外的所有文件。
  • 手动把“build目录”里面的所有内容都移动到“build目录”之外,也就是和“build目录”同级别。再把“build目录”删除。 17dd5850df728b8e0743967d8a372f8.png

推送到远端 AtomGit 上的build 分支

git add .
git commit -m '更新说明'
git push
  • 检查更新成功 image.png

5、访问远端仓库地址查看更新

  • 访问仓库地址,查看是否更新了数据。
  • 如果没有请进入仓库的“设置”->"Pages",手动点击下“保存”按钮,将会更快的刷新最新的数据。如下图。 b755add1ec515c4a77aeacbebb1a8ea.png

以上。