嗨～我是可拟雀，一个后端开发工程师，毕业于某985大学，目前供职于bat某大厂核心部门后端。每天分享最新面经答案，希望在大环境不好的当下能帮到你，让你多积累面试经验。需要内推或者面经合集请评论哦。

最近有很多小伙伴反馈，面筋八股是熟悉了，但是简历总是通不过筛选，有什么好办法让自己脱颖而出么？于是今天和大家分享一个性价比很高，耗时短0花费收益大的做法：制作个人主页。

作为一个校招实习生，怎么能没有自己的个人博客呢？用csdn？未免显得太死板和大众化。自己搭建一个个人网页，既可以随心所欲地布置自己的“小屋”，又可以放上自己的技术文章，提升自己的技术影响力。

面试官如果打开了你的网页，对你会了解的更多，即使面试的时候有些问题回答的不好，但是他看了主页后也知道你有自己的学习和思考在，肯定会加大分。

技术栈

vuepress+主题快速开发

主题快速开发

选用VuePress Theme Hope是一款简洁的博客&文档主题，后续如果要添加文档也比较方便。

相比于原生的博客框架，各路大佬们开发的主题框架功能更加丰富，而且网站整体也更加美观：

搭建步骤

1.下载vscode编辑器

• 浏览器搜索 VS Code，下载对应操作系统的软件
• 执行简体中文扩展安装以保证界面语言为简体中文

2.下载Node

搜索npm中文网，进去下载即可，不需要魔法，下载后输入以下代码，看看是否出现版本号。

npm

node -v
npm -v

3.创建项目

• 选择位置：为了避免偶然间触发一些奇怪的问题，而你自己不会解决，请尽量避免使用包含中文文字、表情符号或空格的文

建议使用纯英文路径 (如: D:\projects\vuepress-theme-hope\)

• 打开终端cmd，进入到刚才选择的位置，执行

npm init vuepress-theme-hope@latest my-docs

// 这里的 my-docs 是一个参数，代表 VuePress Theme Hope 项目的文件夹名称，在本教程中，我们将项目生成至当前目录下的 my-docs 文件夹。可以随意替换

4.熟悉命令

打开左侧项目目录，找到 package.json ，有三个命令:

{
  "scripts": {
    "docs:build": "vuepress build src",
    "docs:clean-dev": "vuepress dev src --clean-cache",
    "docs:dev": "vuepress dev src"
  }
}

这意味着你可以打开终端，进入项目所在的目录后使用:

• npm docs:dev 启动本地开发服务器
• npm docs:build 构建项目并输出
• npm docs:clean-dev 清除缓存并启动开发服务器

开发流程：我们的改动先在文件修改保存后，运行npm docs:dev，会在localhost的8000端口运行一个网页，我们点进去看看修改是否符合预期，符合预期的话再执行npm docs:build，打包这个网页到一个文件夹中，未来用其部署（详看第八节）。

5.熟悉Markdown

VuePress 是以 Markdown编写的。你项目中的每一个 Markdown 文件都是一个单独的页面。

默认情况下，页面的路由路径是根据你的 Markdown 文件的相对路径决定的。

由于你的项目是通过创建助手生成的，那么你会得到以下文件结构:

└─ src
   ├─ demo
   │  ├─ ...
   │  └─ page.md
   │  └─ markdown.md
   │  └─ README.md
   ├─ ...
   └─ README.md

你的 Markdown 文件对应的路由路径为:

项目完整目录：

VuePress 只控制 VuePress 项目文件夹中的文件，也就是默认模板生成的 src 文件夹，项目下的其他文件不受 VuePress 控制。

一个基本的项目结构如下:

.
├── .github (可选的) → GitHub 配置文件存放路径
│    └── workflow → GitHub 工作流配置
│         └── docs-deploy.yml → 自动部署文档的工作流
│
├── src → 文档文件夹
│    │
│    ├── .vuepress (可选的) → VuePress 配置文件夹
│    │    │
│    │    ├── dist (默认的) → 构建输出目录
│    │    │
│    │    ├── public (可选的) → 静态资源目录
│    │    │
│    │    ├── styles (可选的) → 用于存放样式相关的文件
│    │    │
│    │    ├── config.{js,ts} (可选的) → 配置文件的入口文件
│    │    │
│    │    └── client.{js,ts} (可选的) → 客户端文件
│    │
│    ├── ... → 其他项目文档
│    │
│    └── README.md → 项目主页
│
└── package.json → Nodejs 配置文件

6.站在巨人的肩膀

选择我们喜欢的风格，在开源项目的基础上二次编辑：开源项目合集

7.打包项目

• 运行命令

npm docs:build

如果你在使用模板，网站内容将会输出到 VuePress 项目的 .vuepress/dist 文件夹下。这些文件就是 VuePress 的最终输出结果。

8.部署到免费的 Github Pages

我们的博客就算是正式的做好了，接下来我们部署到免费的 Github Pages 上。我们在 Github 上新建一个仓库，这里我取得仓库名为：kenique。

对应，我们需要在 config.js 添加一个 base 路径配置：

module.exports = {
  	// 路径名为 "/<REPO>/"
    base: '/kenique/',
  	//...
}

然后我们在项目 kenique 目录下建立一个脚本文件：deploy.sh，注意修改一下对应的用户名和仓库名：

# 确保脚本抛出遇到的错误
set -e

# 生成静态文件
npm run docs:build

# 进入生成的文件夹
cd docs/.vuepress/dist

git init
git add -A
git commit -m 'deploy'

# 如果发布到 https://<USERNAME>.github.io/<REPO>
git push -f **********:{用户名}/{项目名}.git master:gh-pages
// 如果没有配置密钥也可以用https协议
git push -f https://github.com/{用户名}/{项目名}.git master:gh-pages

cd -

然后打开终端命令行切换到 kenique 目录下，执行 sh deploy.sh，就会开始构建，然后提交到远程仓库，注意这里提交到了 gh-pages 分支，我们查看下对应仓库分支的代码：

我们可以在仓库的 Settings -> Pages 中看到最后的地址：

像我最后生成的地址就是 {用户名}.github.io/kenique

end~

过程中遇到任何问题请评论哦~阿雀会一一解答的。