使用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 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&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搭建网站
写在前面:本博客为本人原创,严禁任何形式的转载!本博客只允许放在博客园(.cnblogs.com),如果您在其他网站看到这篇博文,请通过下面这个唯一的合法链接转到原文! 本博客全网唯一合法URL:ht ...
- GitHub搭建个人网站详细教程
GitHub搭建个人网站详细教程: http://blog.csdn.net/gane_cheng/article/details/52203759
- 使用码云或GitHub搭建简单的个人网站
视频链接:https://www.bilibili.com/video/av64294697 码云: 1.新建一个仓库 路径名会影响你的个人网站的网址(自行修改),开源(公开),其他默认 ...
- 利用git+hugo+markdown 搭建一个静态网站
利用git+hugo+markdown 搭建一个静态网站 一直想要有一个自己的文档管理系统: 可以很方便书写,而且相应的文档很容易被分享 很方便的存储.管理.历史记录 比较方面的浏览和查询 第一点用M ...
- 使用express4.X + jade + mongoose + underscore搭建个人电影网站
(-｡-;), 周末过得真是快啊, 很久以前就看到imooc上有个搭建个人电影网站一期 ,二期的视频, 这两周宅家里撸玩没事干, 我也学着搭了一个, 这些东西都是基础, 只要花点时间很好学的, no ...
- 《Hexo+github搭建个人博客》
<Hexo+github搭建个人博客> 文/冯皓林 完稿:2016.4.22-2016.4.23 注意:本节教程只针对Windows用户.本教程由无人赞助,赞助写出. <Hexo+g ...
- Django搭建博客网站(四)
Django搭建博客网站(四) 最后一篇主要讲讲在后台文章编辑加入markdown,已经在文章详情页对markdown的解析. Django搭建博客网站(一) Django搭建博客网站(二) Djan ...
- Django搭建博客网站(三)
Django搭建博客网站(三) 第三篇主要记录view层的逻辑和template. Django搭建博客网站(一) Django搭建博客网站(二) 结构 网站结构决定我要实现什么view. 我主要要用 ...
- 使用Node.js+Hexo+Github搭建个人博客（续）
一.写在前面 在我的上一篇博客<使用Nodejs+Hexo+Github搭建个人博客>中,已经介绍了如何使用 Hexo 在 Github Pages 上搭建一个简单的个人博客.该篇博文将在 ...
随机推荐
- Java基础学习篇---------多态
一.多态性的理解 1.向上转型:子类为父类对象实例化,调用的一定是子类覆写的方法,他们之间找的是共性 2.向下转型:子类扩充了父类的某些功能,而父类中没有该功能,他们之间找的是特性 案例: Numbe ...
- 深度认识 Sharding-JDBC：做最轻量级的数据库中间层
转自: https://juejin.im/entry/5905ac37a22b9d0065e1199c 基于关系型数据库的水平扩展方案有很多开源的解决方案,但成熟稳定的产品凤毛麟角.当当自研的数据库 ...
- 任务查询系统(cqoi2015,bzoj3932)(主席树)
最近实验室正在为其管理的超级计算机编制一套任务管理系统,而你被安排完成其中的查询部分.超级计算机中的 任务用三元组\((S_i,E_i,P_i)\)描述,\((S_i,E_i,P_i)\)表示任务从第 ...
- MySQL(分组、连表操作、备份数据库)
day58 分组 参考:https://www.cnblogs.com/xp796/p/5262187.html select dept, max(salary) from department gr ...
- 五，mysql优化——sql语句优化小技巧
1,大批量插入数据 (1)对于MyISAM: alter table table_name disable keys; loading data; alter table table_name ena ...
- 转载：在spring中嵌入activemq
转载:http://www.dev26.com/blog/article/137 web开发站中的邮件发送使用了activemq我这是从网上找的进行了一些修改,记录下来,为了避免发送邮件时程序对用户操 ...
- [小tips]使用vscode，根据vue模板文件生成代码
本着苍蝇虽小也是肉的精神...... 目标: 我们希望每次新建.vue文件后,VSCODE能够根据配置,自动生成我们想要的内容. 方法: 打开VSCODE编辑器,依次选择"文件 -> ...
- AQS源码泛读，梳理设计流程（jdk8）
一.AQS介绍 AQS(AbstractQueuedSynchronizer)抽象队列同步器,属于多线程编程的基本工具:JDK对其定义得很详细,并提供了多种常用的工具类(重入锁,读写锁,信号量,Cyc ...
- 安装vue后报错 bash: vue: command not found
今天参照之前写的vue的环境搭建一个新的项目 http://www.cnblogs.com/stella1024/p/7570884.html 安装完vue,并提示成功: $ npm install ...
- python3异常处理 try
一. 简介 在编程过程中为了增加友好性,在程序出现Bug时一般不会直接将错误信息展示给用户,而是提供一个友好的输出提示. 二. 使用 1.异常基础 常用结构: try: pass except Exc ...