如何使用 markdown 写一个漂亮的简历（带排版和布局）

一只小青蛙
1,222 阅读7分钟

最近网上比较流行的使用 markdown 写简历，经过我对比和实战，找到一个比较好操作的，特分享一下 感谢老哥开源的代码 github.com/xzk1990314/…

先上图： 在这里插入图片描述

根据官方的介绍，有两种方式，一种是将项目 clone 到自己的 github 上，然后在线修改和在线查看，我觉得还是不如本地的方便，毕竟本地的文件方便找也方便改。 话不多说，直接来实操

1. 分析官方的本地搭建过程

  1. 在您的计算机上安装 jekyll。gem install jekyll 将对大多数用户都支持。
  2. 在计算机上克隆项目 git clone https://github.com/xzk1990314/nimo-markdown-cv
  3. 输入 jekyll serve，您将可以在本地主机上看到您的简历 （默认地址为http://localhost:4000）。
  4. 您可以编辑index.md文件，并在浏览器中实时查看更改。
  5. 要打印PDF，只需按“打印”。印刷和Web CSS媒体查询应注意样式。

2. 安装 jekyll，gem install jekyll

  1. 打开终端安装 jekyll
root@ubuntu:/home/ubuntu# gem install jekyll

	Command 'gem' not found, but can be installed with:
	
	apt install ruby

root@ubuntu:/home/ubuntu# apt install ruby  ruby-dev
root@ubuntu:/home/ubuntu# gem install jekyll
	正在处理用于 man-db (2.9.1-1) 的触发器 ...
	root@ubuntu:/home/ubuntu/nimo# gem install jekyll
	ERROR:  Could not find a valid gem 'jekyll' (>= 0), here is why:
	          Unable to download data from https://rubygems.org/ - timed out (https://rubygems.org/specs.4.8.gz)

果然，报错了，无法安装 在这里插入图片描述 2. 去官网查查如何安装 jekyll

官网： jekyllrb.com/docs/instal… 好像要梯子才能访问，我粘贴一下

在这里插入图片描述

# 安装Ruby和其他先决条件：
sudo apt-get install ruby-full build-essential zlib1g-dev

# 这步可以省略：
# 避免以root用户身份安装RubyGems软件包（称为gems）。而是为您的用户帐户设置一个gem安装目录。以下命令将环境变量添加到您的~/.bashrc文件中，以配置gem安装路径：
vim ~/.bashrc
	echo '# Install Ruby Gems to ~/gems' >> ~/.bashrc
	echo 'export GEM_HOME="$HOME/gems"' >> ~/.bashrc
	echo 'export PATH="$HOME/gems/bin:$PATH"' >> ~/.bashrc
	source ~/.bashrc

# 最后，安装Jekyll和Bundler：
gem install jekyll bundler

在这里插入图片描述 CentOS8 和 Debian 用户安装步骤：

# RHEL8/CentOS8 Permalink
sudo dnf install ruby ruby-devel
sudo dnf group install "Development Tools"

# Debian Permalink
sudo apt-get install ruby-full build-essential

windows 的用户需要在 linux 子系统上安装，参考这个 jekyllrb.com/docs/instal…

说白了，ubuntu 临时用户安装这两步骤：

root@ubuntu:~# apt-get install ruby-full build-essential zlib1g-dev
root@ubuntu:~# gem install jekyll bundler
  1. ubuntu 用户安装 执行这个命令gem install jekyll bundler 的时候总是卡住不动，猜测是安装源的问题，然后换源
root@ubuntu:~# gem sources --add https://gems.ruby-china.com/ --remove https://rubygems.org/
root@ubuntu:~# gem sources -l
# 确保只有 gems.ruby-china.com

然后再次执行命令gem install jekyll bundler，超级快，一分钟左右。

3. clone 项目，使用 jekyll 启动项目

root@ubuntu:~# git clone https://github.com/xzk1990314/nimo-markdown-cv
root@ubuntu:~# ls
nimo-markdown-cv
root@ubuntu:~# cd nimo-markdown-cv/
root@ubuntu:~/nimo-markdown-cv# ls

根据官方介绍，cd nimo-markdown-cv 之后jekyll serve就应该可以启动，然而报错了.... 在这里插入图片描述

4. 使用 jekyll 启动项目

  1. 在根目录创建一个 jekyll 空项目
root@ubuntu:~/nimo-markdown-cv# cd ~
root@ubuntu:~# jekyll -v
jekyll 4.2.0
root@ubuntu:~# jekyll new myresume
Running bundle install in /root/myresume...

可能会卡到 Running bundle install in /root/myresume... 这一步，这时候ctrl+c终止掉，进入新建的项目，将gemfile的source "https://rubygems.org"改为source "https://gems.ruby-china.com", 然后在当前目录执行bundle install就行 在这里插入图片描述

root@ubuntu:~/myresume# jekyll serve
	Configuration file: /root/myresume/_config.yml
	            Source: /root/myresume
	       Destination: /root/myresume/_site
	 Incremental build: disabled. Enable with --incremental
	      Generating... 
	       Jekyll Feed: Generating feed for posts
	                    done in 0.246 seconds.
	 Auto-regeneration: enabled for '/root/myresume'
	    Server address: http://127.0.0.1:4000/

浏览器访问http://127.0.0.1:4000/，证明环境可以用

  1. 将nimo-markdown-cv项目内容复制进myresume目录，同名文件跳过，尤其是_config.yml he Gemfile, 在这里插入图片描述 切换工作目录，执行jekyll serve，启动成功： 在这里插入图片描述 浏览器访问http://127.0.0.1:4000/： 在这里插入图片描述 虽然页面显示过宽，但是打印出来的效果看一下，打印成PDF（取消页脚和页眉），简直完美： 在这里插入图片描述 写了个中文版样例： 在这里插入图片描述

5. 修改简历文件: index.md

看起来简历的前头不好看，看看源码，改！ 项目clone的那个原来的 index.md文件记得备份，后面可以参考文件的书写格式，重命名就可以，浏览器也能访问。 在这里插入图片描述 改成啥样的呢，删除引用的那个html，直接粘贴我写的代码：

在这里插入图片描述

---
layout: cv
title: 张三四
---
<div style="margin-bottom: 40px;margin-top: 20px">
    <div style="width:80%; display:inline-block;vertical-align: top;">
        <div style="text-align:center">
            <h3 style="font-size: 30px">
            张三四
            </h3>
        </div>
        <div id="contact-info">
            <i class="fi-telephone" style="margin-left:1em"></i>
            <a href="#" style="margin-left:0.5em">13100001111</a>
            <i class="fi-mail" style="margin-left:1em"></i>
            <a href="#" style="margin-left:0.5em"> xxx@163.com</a>
            <br>
            <i class="fi-home" style="margin-left:1em"></i>
            <a href="https://blog.csdn.net/Kevinhanser" style="margin-left:0.5em">https://blog.csdn.net/Kevinhanser</a>

            <i class="fa fa-user" style="margin-left:1em"></i>
            <a href="#" style="margin-left:0.5em" font-size="10px">期望：技术岗位</a>
        </div>
    </div>
    <div style="float: right;display: flex；vertical-align: top;">
        <div style="width:60px;height:80px;">
            <img src="re.jpg" style="width:60px;height:80px">
        </div>
    </div>
</div>

设置自己照片的路径，re.jpg，大小为3:4 要在打印的地方查看最终版简历，不然页面上的简历太宽了，不好看。 在这里插入图片描述 这样板式就改好了，内容可以自己写。 __XXX__：两个下划线代表是加粗 __XXX__：一个下划线代表是斜体字，并自动右对齐 #一级标题 ##二级标题 ###三级标题 完整代码如下：

---
layout: cv
title: 张三四
---
<div style="margin-bottom: 40px;margin-top: 20px">
    <div style="width:80%; display:inline-block;vertical-align: top;">
        <div style="text-align:center">
            <h3 style="font-size: 30px">
            张三四
            </h3>
        </div>
        <div id="contact-info">
            <i class="fi-telephone" style="margin-left:1em"></i>
            <a href="#" style="margin-left:0.5em">13100001111</a>
            <i class="fi-mail" style="margin-left:1em"></i>
            <a href="#" style="margin-left:0.5em"> xxx@163.com</a>
            <br>
            <i class="fi-home" style="margin-left:1em"></i>
            <a href="#" style="margin-left:0.5em">https://blog.csdn.net/Kevinhanser</a>

            <i class="fa fa-user" style="margin-left:1em"></i>
            <a href="#" style="margin-left:0.5em" font-size="10px">期望：技术岗位</a>
        </div>
    </div>
    <div style="float: right;display: flex；vertical-align: top;">
        <div style="width:60px;height:80px;">
            <img src="re.jpg" style="width:60px;height:80px">
        </div>
    </div>
</div>


## 技术技能

1. __技能1__：本科或以上学历，计算机软件、通讯相关专业优先
2. __技能2__：5年以上互联网测试工作经验，1年以上Android测试或开发经验
3. __技能3__：熟练掌握敏捷研发流程和测试用例设计方法，有探索式测试经验者优先
4. __技能4__：掌握计算机基础知识，熟悉JAVA或Python至少一门编程语言
5. __技能5__：熟悉Android测试工具和方法，如Android Studio、Monkey等，有Android专项测试经验优先
6. __技能6__：学习能力强，有较强分析、定位和解决问题的能力，具有较强逻辑思维能力和表达能力


## 教育经历

### __中国西南大学__ `2018.9 -`

1. __技能1__：本科或以上学历，计算机软件、通讯相关专业优先
2. __技能2__：5年以上互联网测试工作经验，1年以上Android测试或开发经验
3. __技能3__：熟练掌握敏捷研发流程和测试用例设计方法，有探索式测试经验者优先
4. __技能4__：掌握计算机基础知识，熟悉JAVA或Python至少一门编程语言
5. __技能5__：熟悉Android测试工具和方法，如Android Studio、Monkey等，有Android专项测试经验优先
6. __技能6__：学习能力强，有较强分析、定位和解决问题的能力，具有较强逻辑思维能力和表达能力

### __北京大学__ `2016.9 - 2018.5`

1. __技能1__：本科或以上学历，计算机软件、通讯相关专业优先
2. __技能2__：5年以上互联网测试工作经验，1年以上Android测试或开发经验
3. __技能3__：熟练掌握敏捷研发流程和测试用例设计方法，有探索式测试经验者优先
4. __技能4__：掌握计算机基础知识，熟悉JAVA或Python至少一门编程语言
5. __技能5__：熟悉Android测试工具和方法，如Android Studio、Monkey等，有Android专项测试经验优先
6. __技能6__：学习能力强，有较强分析、定位和解决问题的能力，具有较强逻辑思维能力和表达能力

### __清华大学__ `2013.9 - 2016.5`

1. __技能1__：本科或以上学历，计算机软件、通讯相关专业优先
2. __技能2__：5年以上互联网测试工作经验，1年以上Android测试或开发经验
3. __技能3__：熟练掌握敏捷研发流程和测试用例设计方法，有探索式测试经验者优先
4. __技能4__：掌握计算机基础知识，熟悉JAVA或Python至少一门编程语言
5. __技能5__：熟悉Android测试工具和方法，如Android Studio、Monkey等，有Android专项测试经验优先
6. __技能6__：学习能力强，有较强分析、定位和解决问题的能力，具有较强逻辑思维能力和表达能力
    
## 个人项目

### __GITHUB__ `2018.9 -`

1. __技能1__：本科或以上学历，计算机软件、通讯相关专业优先
2. __技能2__：5年以上互联网测试工作经验，1年以上Android测试或开发经验
3. __技能3__：熟练掌握敏捷研发流程和测试用例设计方法，有探索式测试经验者优先
4. __技能4__：掌握计算机基础知识，熟悉JAVA或Python至少一门编程语言
5. __技能5__：熟悉Android测试工具和方法，如Android Studio、Monkey等，有Android专项测试经验优先
6. __技能6__：学习能力强，有较强分析、定位和解决问题的能力，具有较强逻辑思维能力和表达能力



<!-- ### Footer

Last updated: May 2013 -->
avatar
文章
阅读
粉丝
相关推荐
【器物·真相】掘金写文章怎么做出漂亮的排版？Markdown主题分享
2.5k阅读
 · 
3点赞
你是否好奇，前端专家的简历怎么写？
41k阅读
 · 
868点赞
基于 Tauri， 我写了一个 Markdown 桌面 App
11k阅读
 · 
106点赞
强烈推荐使用的Markdown编辑器
14k阅读
 · 
46点赞
在 React Router 中使用 JWT
302k阅读
 · 
172点赞
html简洁漂亮的个人简历,个人主页，个人简介网页版(源码)
6.0k阅读
 · 
4点赞
1-1评审了20份前端简历，其实每个人都有亮点
85k阅读
 · 
1.4k点赞
总是跳转到国内版(cn.bing.com)？New Bing使用全攻略
473k阅读
 · 
147点赞
ChatGPT保姆级教程，一分钟学会使用ChatGPT！
792k阅读
 · 
546点赞
Next.js 全栈开发微信公众号 Markdown 排版编辑器
13k阅读
 · 
96点赞