使用github制作个人网站或者博客

简介: 使用github制作个人网站或者博客

前言

大家好,我是yma16,本文分享使用github制作个人主页

操作步骤

前提条件拥有github账号

用户名.github.io

使用github新建一个仓库“用户名.github.io”

注册登录github进去登录,这些英文基本能看懂问题不大

注意:用户名.github.io

创建成功后

为什么可以访问到这里面的html文件看设置setting

因为使用了GitHub Pages的功能

进下来就是上传自己的网页文件这里我上传一个案例背景渐变的

拖拽上传即可

上传成功等待5、6分钟访问“https://用户名.github.io”即可直接进入上传的html文件

ok完全正确!

示例index.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <style>
    body {
      margin: 0;
      padding: 0;
      background: #536976;
      /* fallback for old browsers */
      background: -webkit-linear-gradient(to right, #292E49, #536976);
      /* Chrome 10-25, Safari 5.1-6 */
      background: linear-gradient(to right, #292E49, #536976);
      /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
      overflow: hidden;
    }
    .bubbles {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    .bubbles li {
      position: absolute;
      list-style: none;
      display: block;
      width: 20px;
      height: 20px;
      background: rgba(255, 255, 255, 0.2);
      animation: animate 25s linear infinite;
      bottom: -150px;
    }
    @keyframes animate{
      0%{
        transform: translateY(0) rotate(0deg);
        opacity: 1;
        border-radius: 0%;
      }
      100%{
        transform: translateY(-1000px) rotate(720deg);
        opacity: 0;
        border-radius: 50%;
      }
    }
    .bubbles li:nth-child(1){
      left:25%;
      width:80px;
      height:80px;
      animation-delay:0;
    }
    .bubbles li:nth-child(2){
      left:10%;
      width:20px;
      height:20px;
      animation-delay:2s;
    }
    .bubbles li:nth-child(3){
      left:70%;
      width:20px;
      height:20px;
      animation-delay:4s;
    }
    .bubbles li:nth-child(4){
      left:40%;
      width:60px;
      height:60px;
      animation-delay:18s;
      animation-duration: 18s;
    }
    .bubbles li:nth-child(5){
      left:65%;
      width:50px;
      height:50px;
      animation-delay:18s;
    }
    .bubbles li:nth-child(6){
      left:65%;
      width:110px;
      height:110px;
      animation-delay:3s;
    }
    .bubbles li:nth-child(7){
      left:35%;
      width:150px;
      height:150px;
      animation-delay:7s;
    }
    .bubbles li:nth-child(8){
      left:50%;
      width:25px;
      height:25px;
      animation-delay:15s;
    }
    .bubbles li:nth-child(9){
      left:70%;
      width:35px;
      height:35px;
      animation-delay:4s;
      animation-duration: 45s;
    }
    .bubbles li:nth-child(10){
      left:70%;
      width:65px;
      height:65px;
      animation-delay:0s;
      animation-duration: 15s;
    }
  </style>
  <body>
    <br>
    <ul class="bubbles">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      
    </ul>
  </body>
</html>

结束

本文分享到这结束,如有错误或者不足之处欢迎指出,感谢大家的阅读!

目录
相关文章
|
6月前
|
Shell 网络安全 开发工具
Github Pages + Jekyll 独立博客一小时快速搭建&上线指南
Github Pages + Jekyll 独立博客一小时快速搭建&上线指南
|
6月前
|
缓存 开发工具 git
如何修改github博客主题
如何修改github博客主题
|
21天前
|
JSON 缓存 JavaScript
使用 jsDelivr 免费加速 GitHub Pages 博客的静态资源(二)
使用 jsDelivr 加速 GitHub Pages 的图片资源和动态编译的 JSON 资源。
21 2
|
2月前
|
网络协议 开发工具 git
hexo github部署,通过域名访问你的博客
本文介绍了如何使用Hexo命令部署博客到GitHub,并详细说明了如何通过自定义域名访问GitHub上部署的博客。
hexo github部署,通过域名访问你的博客
|
5月前
|
Web App开发 缓存 移动开发
四万字符数带你使用 Vitepress 构建博客并部署到 github 平台
四万字符数带你使用 Vitepress 构建博客并部署到 github 平台 最近写了好多篇 Chrome 浏览器插件相关的文章,有十几二十篇,就想着构建个博客,用来放置相应的文章。 正好前段时间看到 VitePress 1.0.0 发布了,而且是用 markdown 写文章,正好写插件文章的时候文章都是 md 格式,所有用下这个然后顺便写一篇使用教程。 Chrome 插件开发博客地址:https://18055975947.github.io/extension/
70 0
|
5月前
|
JavaScript 应用服务中间件 程序员
技术人如何利用 github+Jekyll ,搭建一个独立免费的技术博客
技术人如何利用 github+Jekyll ,搭建一个独立免费的技术博客
|
缓存 JavaScript 网络安全
基于Hexo的主题Fluid搭建Github博客
基于Hexo的主题Fluid搭建Github博客
170 1
|
5月前
VitePress 构建的博客如何部署到 github 平台?
VitePress 构建的博客如何部署到 github 平台?
88 0
|
数据采集 JavaScript 搜索推荐
hexo搭建github.io博客
hexo搭建github.io博客
179 0
|
数据采集 JavaScript 程序员
用 GitHub + Hexo 建立你的第一个博客
其中,第一种最简单,也最受限,说不定还会被删帖删号。第二种稍复杂,另外需要自己找部署的服务器,但可定制化较高,是很多程序员的选择。最后一种,是在重复造轮子,不过从另一个方面来看,倒是锻炼编程能力的好方式。