背景

准备

1.注册GitHub账号

2.安装git

3.安装vscode

4.安装Adobe Acrobat DC

步骤

新建一个代码仓库

添加代码仓库

填写仓库信息

填写仓库信息

选择Clone or download > Use SSH

然后复制一下url

找一个你认为合适的地方或者新建一个文件夹来存即将要clone下来的项目

点击鼠标右键选中Git Bash Here 就出出现一个命令操作的窗口

clone代码仓库

1
2
#clone 后面带的是代码仓库的地址
git clone git@github.com:G-c-chen/qptest.git

生成 ssh 密钥

1
ssh-keygen -t rsa -C "user.email" # 注册 GitHub 的邮箱地址

输入命令第一次回车提示的是输入保存地址,这里默认就好
我这里因为已经生成过一次了,所以会提示是否要覆盖,为了演示,我这里选择覆盖
下面提示设置密码,默认为空,默认就好,下面再次输入密码也是默认就行
然后密钥就生成成功了

在 GitHub 账户添加 SSH key

复制生成的密钥


然后把密钥添加到 GitHub 的 ssh key中 传送

用 Acrobat DC 把 PDF 转为 HTML 格式 (这里随便搞了一个pdf文件演示一下效果)

选择导出 PDF > 选择 HTML 网页格式


按照自己的需求去添加设置,这里是默认的设置
导出目录选择clone下来的代码仓库的目录

导出 HTML 格式完成

导出完成之后,你的目录下多了一个 html 文件和一个装有图片文件的文件夹(如果你的pdf包含有图片)

改变目录结构

**新建一个文件夹并且把刚刚生成的文件放到这个目录下,把 html 文件重命名为 index.html

修改 html 文件

把 pdf 文件转成 html 格式 一般是为了在移动端上面展示,用软件转换格式之后并没有做适应,所以这里我们自己修改一下

在代码仓库的更目录点击鼠标右键选择用 vscode 打开

安装这个插件 JS-CSS-HTML Formatter ,这是一个格式化代码的插件

然后打开 html 文件, 使用刚才安装的插件将代码格式化, 将代码格式化是为了更好的去进行编辑

代码格式化之后,按照下面的例子去修改, 第一个一定要加,第二个有图片的话就修改

1
2
3
4
5
6
7
8
9
10
11
12
<head>
...
<!-- head样例 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
...
</head>
<body>
...
<!-- 图片修改样例 -->
<img width="100%" alt="image" src="HelloWorld/Image_001.jpg"/>
...
</body>

修改完成之后记得保存,下面我们来把代码上传到 GitHub

项目上传到 GitHub

还是在项目的根目录点击鼠标右键选择 git bash here
然后按照以下的命令进行操作

1
2
3
git add .
git commit -m "commit qpTest files"
git push origin master

这时去我们的 GitHub 账号上看刚才新建的代码仓库,发现我们新增的文件已经提交上来了

设置 GitHub Pages

选择Setting

往下滚找到 GitHub Pages 配置

设置完成就会提示我们的站点已经发布到 ‘https://g-c-chen.github.io/qptest/' 地址下

然后想要访问我们刚刚生成的网页可以通过在上面这个地址后面加上包含该网页的文件夹的名称就可以访问了
例如我这里是在 helloworld 文件夹下 则访问地址为 ‘https://g-c-chen.github.io/qptest/helloworld'