简历优化！GitHub Pages快速搭建个人主站@慕课网原创_慕课网

与之前发表的：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 src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  <!-- 引用JS，使用CDN加速访问 -->
  <!-- <script src="js/materialize.min.js"></script> -->
  <script src="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 src="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 src="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 src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  <!-- 引用JS，使用CDN加速访问 -->
  <!-- <script src="js/materialize.min.js"></script> -->
  <script src="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 src="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 src="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 src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  <!-- 引用JS，使用CDN加速访问 -->
  <!-- <script src="js/materialize.min.js"></script> -->
  <script src="https://cdn.bootcss.com/materialize/1.0.0-rc.1/js/materialize.min.js"></script>
</body>
</html>

GitHub Pages

上面内容已经初步解决你的个人主站打开没有内容以及不够好看的问题，下面就是把你的个人网站放到GitHub上，让别人访问的事情了。

GitHub Pages是GItHub提供的免费服务，可以让你的网页项目被别人访问，提供常规的html访问与Markdown访问模式（其他jsp之类的，我不清楚，应该是可以的），具体Markdown的请参考我之前的文章：Markdown打造高逼格博客。

注册

如果有账号请忽略此步。

GitHub官网，点击右上角的注册（Sign up）：

注册或登录后会到你的个人页面，此时选择新建仓库：

这里是拿别人的空号演示~~，号主是个萌妹子，你们看着办~~。

然后又到了熟悉的页面，仓库名设置这里，注意仓库名强烈建议设置成（[你的账户名].github.io），其他的不是不行，但是这个宝贵的io，还是留给自己的主站吧，后续你有自己的域名可以绑定到根域名下面。

你觉得主站是www.abc.com酷还是www.abc.com/xxx酷？。

这里需要注意选项，跟着本文走就按照这个选项来，除非你熟悉GitHub操作，否则可能进行不下去。

关于你的账号名，除了前面的选择控件可以选择（有可能你又多个组织），以右上方那个为主即可。

点击Create之后就到了一个空的项目Code页面，类似下方：

很容易想到，我们需要把自己的代码放上去（部署或称作push上去），具体做法其实GitHub已经说明了，但是我们自己操作也不是很麻烦。

这里最快速的肯定是用终端，Windows需要去单独下载Git（自己安装去吧），Mac终端输入Git，如果没有回提示你下载（同时问你是否需要下载XCode，这个随便，也就8个G大小），Linux直接使用apt安装即可（你玩Linux还问我怎么装Git？？？）。

然后各自打开各自的终端，Windows可以使用自带的cmd或powershell，亦或者是使用刚刚下载那个里面集成的Git Bash。

cd [项目工程地址即文件夹地址] cd空格，后面用鼠标把刚刚的项目文件夹拖进去，会得到类似下面的结果

cd C:\Users\ZweiZ\Desktop\materialize 因为教学，所以放到了桌面上，你的自己解压时候应该清楚在哪里。

回车后输入：

git init 初始化git

如果这里或者下面出现让配置global用户名，使用下面的命令：

git config --global user.name "Your Name"

git config --global user.email "email@example.com"

git remote add origin [远程仓库地址] 添加远程仓库，远程仓库地址就是上面空Code页面所给的地址，如下箭头：

右边可以快捷复制。

终端代码应该如下：

git remote add origin https://github.com/liugege123/liugege123.github.io.git 远程仓库绑定成功

回车不说了啊。

git add . 添加所有文件到缓冲区，概念你暂时不用管。

git commit -m '初次提交' 为本次添加缓冲区做注释与解释

git push origin master 推送到远程仓库

此时可能需要你输入GitHub的账密，账号是username，不是邮箱，密码输入是看不到长度的，正常输入回车即可。

到这里可能出现push失败，因为GitHub在国外，偶尔卡卡是很正常的，可以多试几次，知道推送成功，终端自动打印如下内容：

如果原项目里面有个别文件比较大（本项目已经处理成CDN），如果使用CDN可以明显加快push以及后面的访问速度，这里不做过多提及。

题外话，假如你电脑以前登录过别人的GitHub账号，然后push告诉你权限验证错误，你可以去windows凭证管理修改：

此时回到GitHub刷新页面，应该已经有了内容：

如果你的流程都是对的，尤其是仓库名是[用户名].github.io是正确的，此时你的页面已经可以打开（网络延时不考虑），为了验证，我们去setting看一下GitHub Pages的设置是否已经自动设置（由于你的仓库名是[用户名].github.io所以会默认帮你打开Pages服务）：

下拉到Pages服务：

应该已经默认打开，并且告诉你地址，箭头所示。点击或复制地址，打开即可，如下：

后续就是维护代码以及是否要自定义域名的事情了，至此，流程完成，你可以在你的简历里面大胆的写上，个人网站：[niubility].github.io了。

喜欢我的文章记得关注一波哦，定期更新技术文章，满满的都是干货。