使用github搭建我的html网站

时间 2020-05-20

标签使用 github 搭建我的 html 网站栏目 Git 繁體版

原文原文链接

前言：搭建我的网站早就想作了，最近有空就宅在家学习，忽然发现github就能够搭建我的的纯html网站，因而开始了这项工做。转载请注明出处：https://www.cnblogs.com/yuxiaole/p/9350962.htmljavascript

　　个人网站地址：https://yulegh.github.io/vue-element-test/index.htmlcss

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

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

第一步，在 GitHub 上建立一个本身的项目

　　参考：上传本地项目到GitHubvue

第二步，使用 GitHub pages 的方式设置本身的项目

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

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

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

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

　　代码以下：服务器

<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>

　　网站样子，如今东西仍是比较少，后续会慢慢加的。app

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