Verified Commit 0770558c authored by jxtxzzw's avatar jxtxzzw

README

Signed-off-by: jxtxzzw's avatarjxtxzzw <jxtxzzw@126.com>
parent 5b598911
Pipeline #180 passed with stages
in 7 minutes and 54 seconds
# resume
# 个人简历 (resume)
## Build Setup
这是凝神长老的个人简历页面。
我提供了 3 份详细程度不同的说明,请根据你的需要,随意使用我的代码:
+ 面向中级用户的使用说明 (For Intermediate Level)
+ 面向高级用户的使用说明 (For Advanced Users)
+ 面向初级用户的使用说明 (For Beginners)
## 面向中级用户的使用说明 (For Intermediate Level)
1. 复制 `/assets/data-sample/` 中的所有文件到 `/assets/data/`,复制 `/static/data-sample/` 中的所有文件到 `/static/data/`
2. 根据需要修改这些 `.json` 文件,并将需要的资源复制到 `/static/` 目录下,在 `.json` 文件中的 `src` 都是相对于 `/static/` 的位置
注意 `.json` 文件中不存在的属性使用 `null` 而不是 `""`,逻辑值使用 `true``false` 而不是 `1``"1"`
3. 运行,或者生产静态文件
```bash
# install dependencies
......@@ -17,4 +35,120 @@ $ npm run start
$ npm run generate
```
For detailed explanation on how things work, check out [Nuxt.js docs](https://nuxtjs.org).
5. 如果你不需要某些页面,删除 `/components/Navigation.vue` 中的菜单项
翻译在 `/assets/lang/` 目录下
6. 你可以使用 `npm run build && npm run start` 运行
也可以使用 `npm run generate` 生成静态文件,然后将 `dist` 目录下的所有文件上传到你的服务器目录中
如果需要部署到 GitHub Pages,你还需要在 `/static/` 目录下创建一个 `.nojekyll` 的文件
如果你需要部署到子目录,你需要修改 `setting.json` 中的 `deployDir` 字段
## 面向高级用户的使用说明 (For Advanced Users)
1. 只使用 Vue.js,就没有办法 SEO 了,所以选择了 Nuxt.js,提供了有限的 SEO
2. 使用 JSON 文件存放数据,而不是数据库的方式,是为了方便部署在类似于 GitHub Pages 这样不支持后端环境的平台上
一般来说,个人简历的信息很少更新,所以可以不需要数据库的支持
而且个人简历的信息是完全公开的,不涉及用户权限的问题,可以全部展示,也不需要数据库的参与
如果数据是存放在数据库中,可以使用脚本提前导出,`sql_to_json_converter.js` 提供了一个脚本,将 `.sql` 文件转化为 `.json` 文件,你只需要使用 `mysqldump` 这样的命令导出相应的表然后运行这个脚本,注意 `\` 转义已经被消除,如果你的需要转义后的 `\`,你可以自己修改 `stringify` 前后的代码
你也可以安装 `Sequelize` 或者 `Mongoose` 这样的模块,并修改 `/assets/reader.js` 以便从数据库获取数据,或者采用前后端分离的部署方法,利用 `axios` 等手段获取数据
3. 如果需要部署到 GitHub Pages,你还需要在 `/static/` 目录下创建一个 `.nojekyll` 的文件
如果你需要部署到子目录,你需要修改 `setting.json` 中的 `deployDir` 字段
4. 关于 DevOps (CI/CD),可以参考 `.gitlab-ci.yml` 文件,你也可以使用 `.travis.yml` 文件
`.gitlab.yml` 中,`load_resources` 是获取资源,`deploy` 中实现了本地部署(上传到服务器)、GitHub Pages(利用 pull 和 push),以及 GitLab Pages(利用 GitLab Runner 的自动部署)
`setting.json` 中的 `updated` 可以自动修改,利用命令 `sed`
`.gitlab-ci.yml` 中,这个命令是
```yaml
sed \"s/\\\"updated\\\":[ ]*\\\"[0-9]\\{4\\}-[0-9]\\{2\\}-[0-9]\\{2\\}\\\"/\\\"updated\\\":\\\"${RESUME_DATE}\\\"/g\"
```
你也许需要修改转义的次数
5. 你可以随意修改代码,删除你不需要的内容,或者增加、修改其他的功能
6. 如果你需要 `matomo`,你可以直接修改 `/assets/data/matomo.json`,项目已包含 `vue-matomo` 模块
## 面向初级用户的使用说明 (For Beginners)
1. 在 https://nodejs.org/en/ 下载 LTS 版的 Node.js
2. 按照说明完成 Node.js 的安装,如果你不清楚设置选项,请全部保留默认,注意勾选 `添加到环境变量` (`Add to PATH`) 选项,你甚至可以勾选 `自动安装必要的工具` (`Automatically install the necessary tools`)
3. 安装完成后,你可以重启电脑,确保环境变量生效
4. 下载并解压(或者克隆)这个项目,进入项目目录,然后执行 `npm install`,等待安装完成
5. 复制 `/assets/data-sample/` 中的所有文件到 `/assets/data/`,复制 `/static/data-sample/` 中的所有文件到 `/static/data/`
6. 执行 `npm run dev`,等待开发环境启动
7. 你可以在浏览器中访问 `localhost:3000` 查看页面,如果默认端口 3000 被占用,程序会使用其他端口,你可以在刚才的窗口中看到实际使用的端口
8. 编辑 `/assets/data/settings.json`,修改 `updated` 为当天的日期
9. 编辑 `/assets/data/` 中除了 `matomo.json` 以外的 `.json` 文件,仿照样例的格式,输入你想要展示的内容,例如对 `introduction.json` 做如下修改
没有内容的字段输入 `null`
```json
{
"location": "上海",
"role": "学生",
"email": null,
"qq": "12345",
"qq_qr": "/data/introduction/qrcode_qq.jpg"
}
```
10. 将图片等资源复制到 `/static/data/` 中对应的文件夹
类似于 `"/data/introduction/qrcode_qq.jpg"` 这样的内容表示文件路径,你在填写值后,还需要将对应文件复制到 `/static/` 的对应文件夹下面
注意文件夹都是相对 `/static/` 目录开始的,即 `"/data/introduction/qrcode_qq.jpg"` 中,`qrcode_qq.jpg` 这个文件应该被复制到 `/static/data/introduction/` 这个文件夹中,文件名为 `qrcode_qq.jpg`
11. 保存后,`localhost:3000` 会自动加载刷新
如果你的修改没有错误的话,修改后的内容已经显示在页面上了,点击不同的菜单,查看是否一切正常
如果你的修改错误的话,再次修改,然后重复这个过程
12. 运行 `npm run generate`,等待静态文件生成
这些文件就是最终的页面,部署它们
+`/dist/` 文件夹下的所有内容(不包括 `/dist/` 文件夹本身),复制(上传)到你的服务器对应目录中,然后访问域名(例如 `www.jxtxzzw.com` )就可以了
+ 如果你的服务器提供商给你的是子目录,例如 `www.jxtxzzw.com/zzw` ,那么你需要在执行 `generate` 步骤前,将 `settings.json` 中的 `deployDir` 修改为子目录 `/zzw/`
你也可以使用 GitHub Pages
+ 首先注册 GitHub 账号,假设账号名是 `jxtxzzw`
+ 然后新建一个仓库,仓库名必须是 `XXX.github.io`,其中 `XXX` 是你的用户名,例如 `jxtxzzw.github.io`
+ 你可以搜索关键词为 `GitHub Pages` 的相关教程,注意,有些教程需要安装 `hexo`,或者在仓库设置中进行一些配置,我们不需要这些步骤
+ 将 `/dist/` 文件夹下的所有内容(不包括 `/dist/` 文件夹本身),上传到这个仓库
+ 你可以下载 GitHub Desktop 完成这个操作
+ 你也可以下载安装 git 软件,利用 `git push` 操作将这些文件推送到远端仓库
+ 你可以搜索关键词为 `git tutorial``git pull push``git remote` 的相关教程
+ 你可以访问 `https://XXX.github.io`,例如 `https://jxtxzzw.github.io`,查看你的页面
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment