使用github搭建个人html网站上传本地项目到GitHub github 上如何直接预览仓库中的html，搭建自己的主页

前言：搭建个人网站早就想做了，最近有空就宅在家学习，突然发现github就可以搭建个人的纯html网站，于是开始了这项工作。转载请注明出处：https://www.cnblogs.com/yuxiaole/p/9350962.html

　　我的网站地址：https://yulegh.github.io/vue-element-test/index.html

　　说一下，这两天在github上建了一个初版的，纯html网站，没有服务器，是基于vue、element ui的，样式什么的很难看（因为我不是做前端的，所以大家要求别那么高，哈哈~），后续当然会继续维护，毕竟我的目标是大家个人博客网站的（包括后台服务器）。

　　接下来，开始言归正传，如何利用github搭建html网站？

第一步，在 GitHub 上创建一个自己的项目

　　参考：上传本地项目到GitHub

第二步，使用 GitHub pages 的方式设置自己的项目

　　参考：github 上如何直接预览仓库中的html，搭建自己的主页

第三步，就是写项目中的 index.html 主页

　　我这里是使用 vue+element ui 来做的，毕竟不是很会写css，对于我，只要能达到目的就行。

　　代码可以直接从我的github上下载：vue-element-test，可以的话可以能给个Star就最好了。

　　代码如下：

<html>

<head>
    <title>基于vue+elementui</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="lib/elementui/theme-chalk/index.css" type="text/css">
    <style>
      /* 所有 */
      #app{
        width:100%; height:100%;
      }

      /* 头 */
      .header {
        color: rgba(255,255,255,0.75);
        line-height: 60px;
        background-color: #24292e;
        text-align: center;
      }
      .header div{
        display: inline;
      }
      .title{
      }
      .author{
        float: right;
      }
      .author-img{
        width: 20px;
        height: 20px;
      }

      /* 内容区 */
      .container{
        min-height: 600px;
        width:100%;
        height: 100%
      }

      /* 左边内容区 */
      .left {
        color: #4b595f;
        width: 200px;
      }
      .left ul{
        height: 90%;
      }

      /* 右边内容区 */
      .right{
        min-width: 200px;
      }
      tbody{
        font-size: 15px;
        color: #4b595f;
      }

    </style>
</head>
<body>
<div id="app">
  <el-container class="container">
    <el-header class="header">
      <div class="title">
        <span>余小乐的个人demo网站</span>
      </div>
      <div @click="openGitHub" class="author">
        <i class="el-icon-location-outline">yuleGH</i>
        <img alt="@yuleGH" class="author-img" src="https://avatars2.githubusercontent.com/u/31040588?s=40&amp;v=4">
      </div>
    </el-header>

    <el-container>
      <el-aside class="left">
        <el-menu :default-active="activeIndex">
          <el-menu-item index="1" @click="open(aboutMeUrl)"><i class="el-icon-service"></i>关于我</el-menu-item>
          <el-submenu index="firstMenu.id" v-for="firstMenu in menus" :key="firstMenu.id">
            <template slot="title"><i :class="firstMenu.iconClass"></i>{{ firstMenu.name }}</template>
            <el-menu-item-group v-for="secondMenu in firstMenu.children" :key="secondMenu.id">
              <template slot="title">{{ secondMenu.name }}</template>
              <el-menu-item v-for="thirdMenu in secondMenu.children" index="thirdMenu.id" :key="thirdMenu.id" @click="open(thirdMenu.url)">{{ thirdMenu.name }}</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
      </el-aside>

      <el-main class="right">
          <iframe style="width:100%; height:100%; border: 0;" :src="iframeUrl"></iframe>
      </el-main>

    </el-container>
  </el-container>
</div>
<!-- 引入组件库 -->
<script type="text/javascript" src="lib/vue.js"></script>
<script type="text/javascript" src="lib/elementui/index.js"></script>

<script type="text/javascript">
    new Vue({
        el: "#app",
        data: {
          activeIndex : "1",
          aboutMeUrl : "aboutme.html",
          iframeUrl : "aboutme.html",

          menus : [
            {
               name: "dialog",
               id: "dialog",
               iconClass: "el-icon-message",
               children:[
                 {
                   name: "Notification 通知",
                   id: "notification",
                   children: [
                     {name: "demo1", id: "noti-demo1", url: "dialog/notification/notification.html"}
                   ]
                 }
               ]
            }
          ]
        },
        methods: {
          open(url){
            this.iframeUrl = url;
          },
          openGitHub(){
            window.open("https://github.com/yuleGH", "_blank");
          }
        }
    });
</script>

</body>

</html>

　　网站样子，现在东西还是比较少，后续会慢慢加的。

转载请注明出处：https://www.cnblogs.com/yuxiaole/p/9350962.html

使用github搭建个人html网站 上传本地项目到GitHub github 上如何直接预览仓库中的html，搭建自己的主页

第一步，在 GitHub 上创建一个自己的项目

第二步，使用 GitHub pages 的方式设置自己的项目

第三步，就是写项目中的 index.html 主页

猜你喜欢

使用github搭建个人html网站上传本地项目到GitHub github 上如何直接预览仓库中的html，搭建自己的主页