通过GitHub静态网页托管，十分钟制作一份精美的在线网页简历_如何在github写自己的在线简历

简历项目主页：Resume

如果觉得有用记得给我标记个star！谢谢！

相信你一定看过不少花哨的简历模板，甚至有的还贴心地设计出一个封面，但是我告诉你，这些东西没用。

一份真正好的简历，只需要按照既定的结构写就好了（就好像现在很多公司，你在线上投递简历之后，线下也会让你填写一份标准化的简历表格）。

那么一份优秀简历的结构，到底是什么样子的呢？

简历应该站在 HR 的角度来考虑，别人是否方便打开，字体大小、颜色、排版是否舒适，内容是否有条理等等。

我用了好久时间看了各种知乎文章总结出来几个点

1、只写关键的个人信息，如：姓名、联系方式（至于性别、生日、籍贯、自我评价等等，真的不建议写。）

2、排版整洁，推荐单列布局，按点罗列。

3、字体统一，内容尽量只有黑色字体。对于简历中的一些链接，使用一个主题色。

4、语言简短，提炼主要内容，遵循 STAR 法则，有效表达。

5、篇幅尽量控制在成倍的页数，而且每个项目最好不要跨页。

更多的简历写法，建议上知乎搜一搜，有的 HR 会在上面分享一些干货。

于是将我自己的个人网页简历分享一下。
这个项目的特点是：

• 优化构建，页面秒开无闪烁
• 自适应屏幕兼容移动端
• 支持部署到ghpages，可在线浏览
• 自动生成 PDF，全自动化流程

简历的形式是一个在线的静态网页，托管在了 GitHub 上面，整体的效果如下图，可以直接使用浏览器的打印功能导出为 PDF 的格式。

电脑端：

手机端：

下面说步骤：

fork & clone

首先进入托管在 GitHub 上的简历项目主页**[1]**，点击右上角的 Fork 按钮，等待若干秒后，你的项目列表里会多出来一个同名的仓库。

把新生成的项目用git clone 到本地，就可以开始在本地进行调试和开发了。
（gir不会的可以去查一下git使用方法）

安装依赖

项目依赖于 Node 环境，你需要先到 Node 官网 下载并安装对应系统的 Node 程序。（具体方法百度即可）

安装好后，在命令行输入 node -v，如果出现相应的版本号，说明 Node 环境安装成功。

使用 cd 命令进入到项目目录，输入 npm install 命令，安装程序所使用的依赖环境。

再输入 npm run dev 命令，项目会进行编译，并自动打开浏览器，加载出简历的页面。

这时，就可以打开编辑器对简历内容进行修改了。

简历编辑

项目的整体目录结构如下：

.
├── README.md
├── node_modules
├── package-lock.json
├── package.json
├── postcss.config.js
├── src
├── webpack-dist.config.js
├── webpack.config.js
└── webpack.js
1
2
3
4
5
6
7
8
9
10

我们只需要对 src/ 文件夹中的文件进行修改，其他文件是项目运行的一些配置文件。

如果要修改简历内容，需要编辑 index.html 文件。如果你有前端的基础，这应该很好上手。

找到模版中对应的位置，比如个人信息部分，把中文内容改成自己的就行了。
举个例子 这里面的名字改成你的名字就行

<header class="content-hd">
      <section class="title">
        <div class="name">
          <h1>张得帅</h1>
        </div>
      </section>
      <section class="info">
        <ul>
          <li>求职意向：Java开发工程师</li>
          <li>所在城市：XX省XX市</li>
          <li>出生年月：1XXX 年 XX 月</li>
          <li>联系方式：XXX-XXX-XXX</li>
          <li>
            个人邮箱：<a href="mailto:Zhss1004@163.com">XXXXX@163.com</a>
          </li>
<!--          <li>-->
<!--            GitHub：<a href="https://github.com">github.com</a>-->
<!--          </li>-->
        </ul>
      </section>
    </header>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

如果要修改简历的样式，比如主题色、字体等等，需要编辑 main.css 文件。

比如我将简历主题色改为别的颜色，只需要下载取色器然后更改一行代码。

$theme-color: #126ab8;
1

简历修改完后，刷新一下浏览器就可以看到最新的内容。

项目部署

替换webpack-dist.config.js文件里的yourwebsite.com为你自己的域名，并根据该文档配置你的域名解析 （这一步如果你没有自己的网页，则把这一行注释，这样系统生成的GitHubpages则默认设置为网址https://yourname.github.io/MyResume/ 这个域名也可以用但是太low了，建议个人主页去买一个域名，阿里云新人域名一年一块钱很方便）

回到项目输入 npm run pub 命令，会自动创建一个 gh-pages 分支并推送到你fork的 GitHub 的仓库。
（如果有什么启动不了的错误是环境问题，可以尝试回到项目，在命令行中先输入cnpm install cross-env再输入 npm run pub 命令）

打开上面 Fork 的仓库地址，点击设置，往下滑动到 GitHub Pages 设置选项，将分支选择为 gh-pages。此时上面的网站就是我说的设置域名，如果你没有设置域名则这个地方应该是https://yourname.github.io/MyResume/

然后打开刚才显示的网页即可看到在线的简历，将链接发给其他人，其他人通过浏览器打开可以直接访问

使用快捷键 ctrl+p 或者 command+p 调用浏览器的打印功能，可以将简历导出为 pdf 格式的文件。

希望大家在都能找到满意的工作。

完