使用github搭建个人html网站

时间：2023-01-09 21:47:06

前言：搭建个人网站早就想做了，最近有空就宅在家学习，突然发现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>

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

使用github搭建个人html网站

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

使用github搭建个人html网站的更多相关文章

  1. 用github搭建网站

    写在前面:本博客为本人原创,严禁任何形式的转载!本博客只允许放在博客园(.cnblogs.com),如果您在其他网站看到这篇博文,请通过下面这个唯一的合法链接转到原文! 本博客全网唯一合法URL:ht ...

  2. GitHub搭建个人网站详细教程

    GitHub搭建个人网站详细教程: http://blog.csdn.net/gane_cheng/article/details/52203759

  3. 使用码云或GitHub搭建简单的个人网站

    视频链接:https://www.bilibili.com/video/av64294697 码云: 1.新建一个仓库      ​ 路径名会影响你的个人网站的网址(自行修改),开源(公开),其他默认 ...

  4. 利用git&plus;hugo&plus;markdown 搭建一个静态网站

    利用git+hugo+markdown 搭建一个静态网站 一直想要有一个自己的文档管理系统: 可以很方便书写,而且相应的文档很容易被分享 很方便的存储.管理.历史记录 比较方面的浏览和查询 第一点用M ...

  5. 使用express4&period;X &plus; jade &plus; mongoose &plus; underscore搭建个人电影网站

    (-｡-;), 周末过得真是快啊,  很久以前就看到imooc上有个搭建个人电影网站一期 ,二期的视频, 这两周宅家里撸玩没事干, 我也学着搭了一个, 这些东西都是基础, 只要花点时间很好学的, no ...

  6. 《Hexo&plus;github搭建个人博客》

    <Hexo+github搭建个人博客> 文/冯皓林 完稿:2016.4.22-2016.4.23 注意:本节教程只针对Windows用户.本教程由无人赞助,赞助写出. <Hexo+g ...

  7. Django搭建博客网站&lpar;四&rpar;

    Django搭建博客网站(四) 最后一篇主要讲讲在后台文章编辑加入markdown,已经在文章详情页对markdown的解析. Django搭建博客网站(一) Django搭建博客网站(二) Djan ...

  8. Django搭建博客网站&lpar;三&rpar;

    Django搭建博客网站(三) 第三篇主要记录view层的逻辑和template. Django搭建博客网站(一) Django搭建博客网站(二) 结构 网站结构决定我要实现什么view. 我主要要用 ...

  9. 使用Node&period;js&plus;Hexo&plus;Github搭建个人博客（续）

    一.写在前面 在我的上一篇博客<使用Nodejs+Hexo+Github搭建个人博客>中,已经介绍了如何使用 Hexo 在 Github Pages 上搭建一个简单的个人博客.该篇博文将在 ...

随机推荐

  1. Windows Azure Web Site &lpar;7&rpar; Web Site配置

    <Windows Azure Platform 系列文章目录> 在上一章内容中,我们已经部署了Azure WebSite.我们可以在Web Site配置页面进行配置.如下图: 另外,我们还 ...

  2. Android 编译命令 make j8 2&gt&semi;&amp&semi;1 &vert; tee build&period;log 解释

    在编译Android的时候,经常看到这样的命令 make  -j8 2>&1 | tee build.log  其中 make 是编译命令, -j8 这里的 8 指的是线程数量,就是你要 ...

  3. zookeeper系列之六—zookeeper之应用

    http://www.cnblogs.com/sharpxiajun/archive/2013/06/02/3113923.html Zookeeper是hadoop的一个子项目,虽然源自hadoop ...

  4. 极路由hc5661安装tcpdump

    原先有个tcpdump的插件,但是现在已经下架了. 条件: 已root的极1s HC5661 - 1.4.11.21001s 步骤: ssh进去后,opkg install http://downlo ...

  5. 不跳转修改url（history&period;pushState&rpar;

    有时候我们会想不跳转的情况下修改url 直接上代码吧: history.pushState(null,"","?test=123") 值得注意的是,为了用户安全 ...

  6. Math&period;random&lpar;&rpar;和UUID&period;randomUUID&lpar;&rpar;&period;toString&lpar;&rpar;性能对比【纯原】

    Math.random()和UUID.randomUUID().toString()性能对比 不言而喻,因为Math.random()不需要保证唯一性,所做的操作远比UUID消耗更小的性能, 在部分要 ...

  7. 在Windows系统下搭建ELK日志分析平台

    简介: ELK由ElasticSearch.Logstash和Kiabana三个开源工具组成: Elasticsearch是个开源分布式搜索引擎,它的特点有:分布式,零配置,自动发现,索引自动分片,索 ...

  8. sql点滴—mysql中查询表的信息

    mysql中查询表的信息 查询mysql表字段信息的sql语句 SHOW DATABASES //列出 MySQL Server 数据库. SHOW TABLES [FROM db_name] //列 ...

  9. LCL Socket基类

    SocketBase类库主要是方便创建Socket客户端和Socket服务端的基础实现. 抽象基类:主要实现创建Socket public abstract class NetworkBase{} 通 ...

  10. Perl读写文件&amp&semi;字符串操作

    Perl中读写文件的方法非常简单,可以使用open或sysopen函数来打开文件,linux下运行perl脚本只需 ./XX.pl 或 perl XX.pl. 读文件 open(文件句柄, &quot ...

相关文章