使用 VuePress 製作線上簡歷

qinghuanI發表於2023-02-09
Vue

前言

使用線上簡歷可以讓簡歷更好看，也方便他人瀏覽，給 HR 和麵試官耳目一新的感受

VuePress 是一款基於 Vue 實現的靜態網站生成器。有介面簡潔優雅，上手簡單和擴充套件 Markdown 語法等優點。
本篇部落格帶大家學習如何使用 VuePress 製作自己的線上簡歷

初始化

首先需要在本地新建線上簡歷專案

  1. 建立並進入一個新目錄
mkdir online-resume && cd online-resume
  1. 使用您喜歡的包管理器進行初始化
yarn init
# npm init or pnpm init

根據提示，需要填寫專案名稱、版本號、專案描述和作者，其他的內容使用預設值

  1. 將 VuePress 安裝為本地依賴
yarn add vuepress -D
  1. 新增一些必要的檔案和配置
  • 在根目錄建立 docs 資料夾，在 docs 中新增 .vuepress/config.js，內容如下
module.exports = {
  themeConfig: {
    // 禁用搜尋
    search: false,
    // 不需要導航欄
    navbar: false,
  },
};
  • 在 docs 中新增 .vuepress/README.md 檔案
---
home: true
heroText: xxx
tagline: xxx開發
---

請撰寫您的工作履歷
::: slot footer
MIT Licensed | Copyright © 2023-present [qinghuanI](https://github.com/qinghuanI)
:::
  1. 在 package.json 中新增一些 scripts
{
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }
}
  1. 在本地啟動伺服器
yarn run docs:dev

VuePress 會在 http://localhost:8080 啟動一個熱過載的開發伺服器。
一個簡單的簡歷專案骨架搭建完成，如圖所示

Resume Skeleton

內容編排

在上一個章節，我們搭建了簡單的專案骨架，現在需要往 README.md 中新增您的工作履歷。
如何組織內容可以根據自己喜好來，筆者在這裡使用我的格式演示

---
home: true
heroText: XXX
tagline: Web 前端開發
---

## 專業技能

- 熟悉 XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
- 熟悉使用 XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

## 工作經歷

<div :style="{display: 'flex', justifyContent: 'space-between'}">
  <div>XXXX公司1</div>
  <div>XX工程師</div>
  <div>XXXX專案組</div>
  <div>XXXX/XX-XXXX/XX</div>
</div>

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

<div :style="{display: 'flex', justifyContent: 'space-between'}">
  <div>XXXX公司2</div>
  <div>XX工程師</div>
  <div>XXXX專案組</div>
  <div>XXXX/XX-XXXX/XX</div>
</div>

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

## 專案經歷

**XXXXXXXXXXXXXXXXXXX 專案**

專案描述：XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

專案職責：

- XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
- XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
- XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
- XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

專案業績：XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

**XXXXXXXXXXXXXXXXXXX 專案**

專案描述：XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

專案職責：

- XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
- XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
- XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
- XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

專案業績：XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

## 教育經歷

<div :style="{display: 'flex', justifyContent: 'space-between'}">
  <div>XXXX/XX-XXXX/XX</div>
  <div>XXXXX大學</div>
  <div>本科</div>
  <div>XX學歷</div>
</div>

## 個人成就

- XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
- XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
- XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

## 自我評價

- XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
- XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
- XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

::: slot footer
MIT Licensed | Copyright © 2023-present [qinghuanI](https://github.com/qinghuanI)
:::
VuePress 支援在 Markdown 檔案中使用元件，擴充套件 Markdown 的功能

簡歷骨架的顯示效果如下

Online Resume Template

此時專案的目錄結構如下：

.
├── docs
│   ├── README.md     <--- 簡歷內容
│   └── .vuepress
│       └── config.js <--- VuePress 配置
├── package.json
└── yarn.lock

美化

上面的步驟已經實現線上簡歷，但是我們還可以使用外掛最佳化，提升 HR 或面試官的瀏覽體驗

當簡歷內容比較多，一屏顯示不下所有內容時，瀏覽人員從簡歷底部回到頂部需要多次滑動滑鼠滾輪，體驗不佳，可以新增
回到頂部外掛快速回到頂部

  1. 安裝 @vuepress/plugin-back-to-top
yarn add @vuepress/plugin-back-to-top -D
  1. 在 config.js 中新增 @vuepress/plugin-back-to-top
module.exports = {
  themeConfig: {
    // 禁用搜尋
    search: false,
    // 不需要導航欄
    navbar: false,
  },
  plugins: ["@vuepress/back-to-top"],
};

外掛成功執行後，頁面右下角會出現向上的箭頭，點選箭頭，即可快速回到頁面頂部

部署

VuePress 專案有很多種部署方式。筆者在這裡使用 GitHub Pages 和 GitHub Actions 部署和整合該專案

  1. 建立 GitHub access token

在您的 GitHub 頁面，按照 Settings -> Developer settings -> Personal access tokens -> Tokens(classic) 進入建立新 tokens 頁面。如圖所示

Generate new Tokens

點選 generate new tokens 按鈕，選擇 Generate new tokens(classic) 選項，
進入 New personal access token(classic) 頁面

New personal access token

輸入 Note，選擇永不過期，勾選上所有的 scopes，最後點選 Generate token 按鈕建立 token，請存好該 token

  1. 建立 secret

在您的 GitHub 裡，建立 online-resume 倉庫，如圖所示

Create Online Resume Repo

在 online-resume 頁面，按照 Settings -> secrets and variables -> Actions 建立倉庫的 secret

Add secret

輸入 Name 和第一步建立的 personal access token，點選 Add secret 按鈕建立 secret，建立後的 secret 如圖所示

Secrets List

  1. 在專案根目錄下的 .github/workflows 目錄（沒有的話，請手動建立一個）下建立一個 .yml 或者 .yaml 檔案，如:online-resume-deploy.yml;
name: Build and Deploy
on: [push]
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@master

      - name: online-resume-deploy
        uses: jenkey2011/vuepress-deploy@master
        env:
          ACCESS_TOKEN: ${{ secrets.ONLINE_RESUME }}
          TARGET_REPO: qinghuanI/online-resume
          TARGET_BRANCH: gh_pages
          BUILD_SCRIPT: yarn && yarn docs:build
          BUILD_DIR: docs/.vuepress/dist
  1. 原生程式碼同步到遠端 online-resume 倉庫

將專案程式碼推送至 GitHub 的 online-resume 倉庫，GitHub Actions 會幫助持續整合程式碼，每次有新提交，
GitHub 都會重新構建

  1. 配置 GitHub Pages

按照 Settings -> Pages 指示，找到 Branch 配置，選擇分支，然後點選 save 按鈕儲存

GitHub Pages Configuration

等構建成功後，在位址列輸入 https://qinghuanI.github.io/online-resume/ 就可以訪問

相關文章