如何将上传到github上的htmlcss展示成网页

2023-04-19 05:06:02html-css019

如何将上传到github上的htmlcss展示成网页,第1张

首先确认：拥有一个GitHub账号，已经安装 Git。先在GitHub创建一个项目，名字随意，尽量全部小写字母，避免随后会碰到的URL冲突问题本地运行Git，随意选个目录，将刚才创建的项目clone下来。在项目的根目录下新建文件 _config.yml ，填写 baseurl: /blogdemo ， blogdemo是你的项目名称，这一行内容规定了整个网站的根路径。在项目的根目录下新建文件 _config.yml ，填写 baseurl: /blogdemo ， blogdemo是你的项目名称，这一行内容规定了整个网站的根路径。回到git bash, 检查一下 git status ，确认 _config.yml 与 index.html 无误后 add，commit，保持使用Git的良好习惯，记得添加提交描述然后推送到GitHub，这里注意，因为我们使用的是GitHub Pages中的 Project Pages, GitHub仅会将分支 gh-pages 下的内容进行自动生成操作，所以本地的 master 分支应推送到远端的 gh-pages 分支。稍微等待一下，最多10分钟（通常不用那么久啦），访问yourname.github.com/blogdemo ，（其中 yourname 是你的GitHub帐户名，blogdemo则是你的项目名）就会看见你新建的项目了

一、使用git上传文件到GitHub需要git客户端以及注册GitHub账号。命令简单上传通道

git官网:去git官网

github官网:去github官网

git的安装以及GitHub的注册这里就不说了。还不知道的，没安装的看这里：我要去看git安装教程

下边就直接从上传开始。

第一步：我们需要先创建一个本地的版本库（其实也就是一个文件夹）。

你可以直接在桌面右击新建文件夹，也可以右击打开Git bash命令行窗口通过命令来创建。

现在我通过命令行在桌面新建一个test文件夹（你也可以在其他任何地方创建这个文件夹），并且进入这个文件夹

第二步：在命令行中输入git init把这个文件夹变成Git可管理的仓库

这时你会发现test里面多了个.git文件夹，它是Git用来跟踪和管理版本库的，因为它默认是隐藏文件，要是看不到就设置下文件夹和搜索选项。

之后把需要上传到GitHub的文件全部复制到这test这个目录下。

然后通过git add .(注意这个"."，是有空格的，"."代表这个test这个文件夹下的目录全部都提交。你也可以通过git add 文件名提交指定的文件)把文件添加到缓存区

或者指定具体文件提交

然后可以通过git status命令，查看下现在的状态，也可以不看，随你

看到有css,js文件夹的内容都提交上去了。

然后，在使用命令git commit -m "这里面写你的注释" 把文件提交的本地仓库

第三步：下面就到了连接远程仓库（也就是连接Github）

由于本地Git仓库和Github仓库之间的传输是通过SSH加密的，所以连接时需要设置一下：

创建SSH KEY。先看一下你C盘用户目录下有没有.ssh目录，有的话看下里面有没有id_rsa和id_rsa.pub这两个文件，有就跳到下一步，没有就通过下面命令创建

$ ssh-keygen -t rsa -C "youremail@example.com"

然后一路回车。这时你就会在用户下的.ssh目录里找到id_rsa和id_rsa.pub这两个文件

第四步：登录Github,找到右上角的图标，打开点进里面的Settings，再选中里面的SSH and GPG KEYS，点击右上角的New SSH key，然后Title里面随便填，再把刚才id_rsa.pub里面的内容复制到Title下面的Key内容框里面，最后点击Add SSH key，这样就完成了SSH Key的加密。具体步骤也可看下面：

上面key默认在C:\Users\Administrator\.ssh下的id_rsa.pub文件中，把这个文件中的内容全部复制到上面的key里面就可以了。如下图：

第五步：在Github上创建一个Git仓库。

你可以直接点New repository来创建，比如我创建了一个tes2t的仓库。

上面我没有默认勾选Initialize this repository with a README，勾选和不勾选创建的结果区别如下：

下边这个是勾选的

第六步：在Github上创建好Git仓库之后我们就可以和本地仓库进行关联了，根据创建好的Git仓库页面的提示，可以在本地test仓库的命令行输入：

$ git remote add origin git@github.com:smfx1314/test2.git

第七步：关联好之后我们就可以把本地库的所有内容推送到远程仓库（也就是Github）上了，通过：

$ git push -u origin master

由于新建的远程仓库是空的，所以要加上-u这个参数。然后进去GitHub test2这个仓库刷新下就会有已经上传的文件夹了。

如果新建远程仓库不是空的，例如你勾选了 Initialize this repository with a README。那么你通过命令 $ git push -u origin master是会报错的，如下：

这是由于你新创建的那个仓库里面的README文件不在本地仓库目录中，这时我们可以通过以下命令先将内容合并以下：