首页手记简历优化！GitHub Pages快速搭建个人主站

简历优化！GitHub Pages快速搭建个人主站

标签：

Html/CSS Html5 JavaScript

与之前发表的：Markdown打造高逼格博客，类似，但这里有下面这些内容：

介绍Material Design与Human Interface Guidelines两个主流UI交互框架，一个Google一个Apple。
使用Materialize，一个Material Design的第三方HTML框架。
Git的一点点知识。
其他。

道理上来说，空的html文件也算是页面，但是作为个人主站的面子，起码要有三个东西：头（header），内容（content），脚（footer）。

我们使用一个个人偏爱的第三方框架，Materialize，快速搭建出头、内容、脚。

以下为正文：

Materialize

这是一个比较牛逼的Google Style即Material Design风格的前端框架

关于Material Design，可查阅：Android官网（自配梯子），Material Studies（同梯子），以及MD中文网（延迟更新）。

顺带附送Human Interface Guidelines（人机交互指南，苹果设计），查阅官网才是一名合格的设计师。啥，你说你不知道MD和苹果的设计规范、8像素和4像素规格？那先别看文章，赶紧去拜读各自的说明吧！

Material Design与Human Interface Guidelines

咳咳，绕一圈，回到Materialize。

官网，其目前在GitHub的star数量为30000+，相比于BS是差了很多，但是BS多少年了不是？而且，Materialize就我所知应该是MD风最优的了（按照star来算）。

别愁英语，人家也有Materialize中文站，唯一可惜的就是，所有国外资源中文站通病，更新慢一拍。但是就Materialize来说，中文站用来学习是足够足够的（下面避免网络问题，我们使用中文网学习）。

这里顺手把首页的文件下载了，省事，不用自己去找了。

我们所说的网站头，这里就用导航栏来代替，即在Materialize左侧找到导航条，在组件目录下：

右侧箭头所指的就是接下来要用的实例代码，页面下面有很多种，我们随便取用一个就好。

讲刚刚下载的压缩包解压到任意地方，然后使用你喜欢的编辑器打开，本人使用VS Code：

注意坑，中文版跟官网版本差了n个版本，如果你的网络ok，请务必使用官网版，这里中文版可能暂时都不更新了。

搭建网页

头

我们在根目录新建一个index.html文件，然后写上如下代码，其中关键代码来自导航条的实例代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>我的小站</title>
  <!-- 引用CSS，使用CDN加速访问 -->
  <!-- <link rel="stylesheet" href="css/materialize.min.css"> -->
  <link href="https://cdn.bootcss.com/materialize/1.0.0-rc.1/css/materialize.min.css" rel="stylesheet">
</head>
<body>
  <nav>
    <div class="nav-wrapper">
      <a href="#" class="brand-logo">放置Logo</a>
      <ul id="nav-mobile" class="right hide-on-med-and-down">
        <!-- 空的链接 -->
        <li><a href="#">首页</a></li>
        <li><a href="#">博客</a></li>
        <li><a href="#">关于我</a></li>
      </ul>
    </div>
  </nav>
  <!-- 挂个JQ的CDN，Materialize是依赖于JQ的 -->
  <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  <!-- 引用JS，使用CDN加速访问 -->
  <!-- <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/materialize.min.js"></script> -->
  <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.bootcss.com/materialize/1.0.0-rc.1/js/materialize.min.js"></script>
</body>
</html>

然后把index.html直接拖到浏览器中打开，效果如下：

注意看这里：上面已经把js与css资源换成了CDN（最新版），所以可以此时将js与css还有font文件夹删除了，避免版本落后与push慢问题。更换CDN不是必须的，比如你就本地跑跑，完全没有必要（功能跟引用本地js或css一样），这里这样做主要就是为了push和别人访问加速。

所以这里就相当于新建一个文件夹->然后编辑器打开文件->新建index.html文件->复制内容。

内容

然后中间内容我们选取几张卡片放进去，卡片位置在组件=>卡片，代码自己挑喜欢的。然后类似下方代码与效果：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>我的小站</title>
  <!-- 引用CSS，使用CDN加速访问 -->
  <!-- <link rel="stylesheet" href="css/materialize.min.css"> -->
  <link href="https://cdn.bootcss.com/materialize/1.0.0-rc.1/css/materialize.min.css" rel="stylesheet">
  <style>
  </style>
</head>
<body>
  <nav>
    <div class="nav-wrapper">
      <a href="#" class="brand-logo">放置Logo</a>
      <ul id="nav-mobile" class="right hide-on-med-and-down">
        <!-- 空的链接 -->
        <li><a href="#">首页</a></li>
        <li><a href="#">博客</a></li>
        <li><a href="#">关于我</a></li>
      </ul>
    </div>
  </nav>
  <div id="content">
    <div class="row">
      <div class="col s12 m6">
        <div class="card blue-grey darken-1">
          <div class="card-content white-text">
            <span class="card-title">卡片标题</span>
            <p>我是一个很简单的卡片。我很擅长于包含少量的信息。我很方便，因为我只需要一个小标记就可以有效地使用。</p>
          </div>
          <div class="card-action">
            <a href="#">这是一个链接</a>
            <a href="#">这是一个链接</a>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col s12 m7">
        <div class="card">
          <div class="card-image">
            <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534224928436&di=89e448fd55f6bcdd72d77994fa318bcb&imgtype=0&src=http%3A%2F%2Fs8.sinaimg.cn%2Fmiddle%2F8ee3e0acxb0171b491f27%26690">
            <span class="card-title">Card Title</span>
          </div>
          <div class="card-content">
            <p>我是一个很简单的卡片。我很擅长于包含少量的信息。我很方便，因为我只需要一个小标记就可以有效地使用。</p>
          </div>
          <div class="card-action">
            <a href="#">这是一个链接</a>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col s12 m6">
        <div class="card">
          <div class="card-image">
            <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534224928435&di=8bd66382afde6b3a9391826c09c02ded&imgtype=0&src=http%3A%2F%2Fpic.feizl.com%2Fupload%2Fallimg%2F180126%2F291186uuwuygmswlt.png">
            <span class="card-title">卡片标题</span>
            <a class="btn-floating halfway-fab waves-effect waves-light red"><i class="material-icons">add</i></a>
          </div>
          <div class="card-content">
            <p>我是一个很简单的卡片。我很擅长于包含少量的信息。我很方便，因为我只需要一个小标记就可以有效地使用。</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 挂个JQ的CDN -->
  <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  <!-- 引用JS，使用CDN加速访问 -->
  <!-- <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/materialize.min.js"></script> -->
  <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.bootcss.com/materialize/1.0.0-rc.1/js/materialize.min.js"></script>
</body>
</html>

图片是我瞎找的链接。

脚

脚自然就是页脚，页脚位置在组件=>页脚，代码自己挑喜欢的。最终类似下方代码与效果：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>我的小站</title>
  <!-- 引用CSS，使用CDN加速访问 -->
  <!-- <link rel="stylesheet" href="css/materialize.min.css"> -->
  <link href="https://cdn.bootcss.com/materialize/1.0.0-rc.1/css/materialize.min.css" rel="stylesheet">
  <style>
  </style>
</head>
<body>
  <nav>
    <div class="nav-wrapper">
      <a href="#" class="brand-logo">放置Logo</a>
      <ul id="nav-mobile" class="right hide-on-med-and-down">
        <!-- 空的链接 -->
        <li><a href="#">首页</a></li>
        <li><a href="#">博客</a></li>
        <li><a href="#">关于我</a></li>
      </ul>
    </div>
  </nav>
  <div id="content">
    <div class="row">
      <div class="col s12 m6">
        <div class="card blue-grey darken-1">
          <div class="card-content white-text">
            <span class="card-title">卡片标题</span>
            <p>我是一个很简单的卡片。我很擅长于包含少量的信息。我很方便，因为我只需要一个小标记就可以有效地使用。</p>
          </div>
          <div class="card-action">
            <a href="#">这是一个链接</a>
            <a href="#">这是一个链接</a>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col s12 m7">
        <div class="card">
          <div class="card-image">
            <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534224928436&di=89e448fd55f6bcdd72d77994fa318bcb&imgtype=0&src=http%3A%2F%2Fs8.sinaimg.cn%2Fmiddle%2F8ee3e0acxb0171b491f27%26690">
            <span class="card-title">Card Title</span>
          </div>
          <div class="card-content">
            <p>我是一个很简单的卡片。我很擅长于包含少量的信息。我很方便，因为我只需要一个小标记就可以有效地使用。</p>
          </div>
          <div class="card-action">
            <a href="#">这是一个链接</a>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col s12 m6">
        <div class="card">
          <div class="card-image">
            <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534224928435&di=8bd66382afde6b3a9391826c09c02ded&imgtype=0&src=http%3A%2F%2Fpic.feizl.com%2Fupload%2Fallimg%2F180126%2F291186uuwuygmswlt.png">
            <span class="card-title">卡片标题</span>
            <a class="btn-floating halfway-fab waves-effect waves-light red"><i class="material-icons">add</i></a>
          </div>
          <div class="card-content">
            <p>我是一个很简单的卡片。我很擅长于包含少量的信息。我很方便，因为我只需要一个小标记就可以有效地使用。</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <footer class="page-footer">
      <div class="container">
        <div class="row">
          <div class="col l6 s12">
            <h5 class="white-text">页脚内容</h5>
            <p class="grey-text text-lighten-4">你可以用行和列来组织你的页脚内容。</p>
          </div>
          <div class="col l4 offset-l2 s12">
            <h5 class="white-text">链接</h5>
            <ul>
              <li><a class="grey-text text-lighten-3" href="#!">链接 1</a></li>
              <li><a class="grey-text text-lighten-3" href="#!">链接 2</a></li>
              <li><a class="grey-text text-lighten-3" href="#!">链接 3</a></li>
              <li><a class="grey-text text-lighten-3" href="#!">链接 4</a></li>
            </ul>
          </div>
        </div>
      </div>
      <div class="footer-copyright">
        <div class="container">
        © 2014 Copyright 文本
        <a class="grey-text text-lighten-4 right" href="#!">更多链接</a>
        </div>
      </div>
    </footer>

  <!-- 挂个JQ的CDN -->
  <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  <!-- 引用JS，使用CDN加速访问 -->
  <!-- <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/materialize.min.js"></script> -->
  <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.bootcss.com/materialize/1.0.0-rc.1/js/materialize.min.js"></script>
</body>
</html>