美文网首页
如何将静态网页托管github?

如何将静态网页托管github?

作者: 周一ing | 来源:发表于2019-06-09 20:55 被阅读0次

    准备工作

    • 下载安装一个git软件,用来实现本地代码上传,版本控制。安装教程可参考
      https://www.liaoxuefeng.com/wiki/896043488029600/896067074338496

    • 注册一个github账号(用谷歌浏览器)

    • 然后新建一个仓库存放你的代码,点击+号,点击new repository


      image.png
    • 输入你的 repository name,一般网页的仓库命名为×××.io

    本地仓库搭建

    • 找一个目录放置你需要上传的所有网页页面资源,比如我的是e盘的github的resource目录下


      image.png
    • 打开git软件目录下的git-bash.exe
    • 打开后进入到resource 目录下(cd e:github/resource),并初始化仓库(git init)


      image.png

      将该文件夹所有文件提交至该本地仓库,git add .表示添加所有文件(注意后面有个小数点.),后期如需提交单个文件也可 git add 文件名。git commit命令是正式提交的意思,引号里面的文本是对本次提交作一个说明


      image.png
      这样本地仓库就建好啦!

    将本地仓库连接至github的远程仓库

    • 在git-bash.exe中输入ssh-keygen -t rsa -C "youremail@example.com",其中youremail@example.com替换成注册githhub的邮箱
      输入完以后就创建了ssh文件(密码学里的公钥私钥文件),位置一般在C:\Users\17876.ssh这里,
      image.png
      用记事本打开id_rsa.pub文件,将里面的内容复制,打开github网站上自己的setting,点击SSH and GPG keys,点击 New SSH key,新增一个SSH key,将刚刚在id_rsa.pub文件复制的内容粘贴进去,我这里是命名成了mykey。然后保存
    image.png image.png
    • 最后一步是在git-bash.exe中运行git push -u origin master将代码同步至github


      image.png

    然后刷新下github,就可以看到该仓库下的文件和本地电脑一样啦


    image.png

    将远程仓库部署为站点

    注意刚刚同步的代码里要有一个文件是index.html

    • 打开github上该仓库的setting,下滑至gitHub pages部分,将source下面的None改成master branch,然后点击上面出现的网址,就可以看到你的网页啦!


      image.png
    • 最后我的页面打开是这样子的
    image.png
    image.png

    虽然动态页面还是打开不了,网上查了一下貌似需要买服务器或者借助别的托管平台,不过还是挺开心的哈哈

    相关文章

      网友评论

          本文标题:如何将静态网页托管github?

          本文链接:https://www.haomeiwen.com/subject/mlonxctx.html