Verified Commit 3e7f676c authored by jxtxzzw's avatar jxtxzzw

README

Signed-off-by: jxtxzzw's avatarjxtxzzw <jxtxzzw@126.com>
parent 0770558c
......@@ -14,79 +14,87 @@
1. 复制 `/assets/data-sample/` 中的所有文件到 `/assets/data/`,复制 `/static/data-sample/` 中的所有文件到 `/static/data/`
2. 根据需要修改这些 `.json` 文件,并将需要的资源复制到 `/static/` 目录下,在 `.json` 文件中的 `src` 都是相对于 `/static/` 的位置
2. 根据需要修改这些 `.json` 文件,并将需要的资源复制到 `/static/` 目录下,在 `.json` 文件中的 `src` 都是相对于 `/static/` 的位置
注意 `.json` 文件中不存在的属性使用 `null` 而不是 `""`,逻辑值使用 `true``false` 而不是 `1``"1"`
3. 运行,或者生产静态文件
```bash
# install dependencies
$ npm install
```bash
# install dependencies
$ npm install
# serve with hot reload at localhost:3000
$ npm run dev
# build for production and launch server
$ npm run build
$ npm run start
# generate static project
$ npm run generate
```
# serve with hot reload at localhost:3000
$ npm run dev
5. 如果你不需要某些页面,删除 `/components/Navigation.vue` 中的菜单项
# build for production and launch server
$ npm run build
$ npm run start
翻译在 `/assets/lang/` 目录下
# generate static project
$ npm run generate
```
6. 你可以使用 `npm run build && npm run start` 运行,你可以修改默认端口,或者使用 Nginx 等工具进行反向代理、端口转发
5. 如果你不需要某些页面,删除 `/components/Navigation.vue` 中的菜单项
翻译在 `/assets/lang/` 目录下
6. 你可以使用 `npm run build && npm run start` 运行
也可以使用 `npm run generate` 生成静态文件,然后将 `dist` 目录下的所有文件上传到你的服务器目录中
如果需要部署到 GitHub Pages,你还需要在 `/static/` 目录下创建一个 `.nojekyll` 的文件
如果你需要部署到子目录,你需要修改 `setting.json` 中的 `deployDir` 字段
如果你需要部署到子目录,你需要修改 `setting.json` 中的 `deployDir` 字段,注意,当你采用 `npm run start` 方式运行时,这个参数不起作用
7. 更新时,只需要下载(或者克隆)最新的项目文件,将 `/assets/data/``/static/data/` 复制到新的项目文件夹中,重新运行这些命令即可,无需再次编辑数据
## 面向高级用户的使用说明 (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\"
```
你也许需要修改转义的次数
```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` 模块
7. 如果需要个性化的地图需求,你可以将高德地图和 MapBox 的 API KEY 添加到代码中,这里使用的是官方提供的 DEV KEY
8. `轻博客` 是直接从 WordPress 的 `wp_posts` 表中导出的,所以包含了较多的 WordPress 相关的字段,如果你不需要某些字段,请随意删改 JSON 文件的格式(当然可能需要修改代码以适应)
9. 更新时,只需要下载(或者克隆)最新的项目文件,将 `/assets/data/``/static/data/` 复制到新的项目文件夹中,重新运行这些命令即可,无需再次编辑数据
## 面向初级用户的使用说明 (For Beginners)
1. 在 https://nodejs.org/en/ 下载 LTS 版的 Node.js
2. 按照说明完成 Node.js 的安装,如果你不清楚设置选项,请全部保留默认,注意勾选 `添加到环境变量` (`Add to PATH`) 选项,你甚至可以勾选 `自动安装必要的工具` (`Automatically install the necessary tools`)
3. 安装完成后,你可以重启电脑,确保环境变量生效
......@@ -102,53 +110,77 @@ sed \"s/\\\"updated\\\":[ ]*\\\"[0-9]\\{4\\}-[0-9]\\{2\\}-[0-9]\\{2\\}\\\"/\\\"u
8. 编辑 `/assets/data/settings.json`,修改 `updated` 为当天的日期
9. 编辑 `/assets/data/` 中除了 `matomo.json` 以外的 `.json` 文件,仿照样例的格式,输入你想要展示的内容,例如对 `introduction.json` 做如下修改
明确不需要的字段,例如没有内容、不适用,这样的字段请设置为 `null`
没有内容的字段输入 `null`
```json
{
"location": "上海",
"role": "学生",
"email": null,
"qq": "12345",
"qq_qr": "/data/introduction/qrcode_qq.jpg"
}
```
如果你不清楚某些字段的作用,或者你不需要这些字段,例如,也许你的轻博客不需要跳转到正式博客,那么,这些内容可以保留为 `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` 会自动加载刷新
11. 如果有些页面你不需要,例如你不是程序员,你可能不需要 `编程题` 页面,那你可以编辑 `/components/Navigation.vue` 文件,将对应的菜单项删除,例如删除以下 3 行,就不会在菜单中出现 `编程题`
```vue
<MenuItem name="coding" to="coding">
{{ $t('navigation.coding') }}
</MenuItem>
```
同时,你还应该删除 `/pages/` 目录下的 `coding.vue` 这个文件
12. 保存后,`localhost:3000` 会自动加载刷新
如果你的修改没有错误的话,修改后的内容已经显示在页面上了,点击不同的菜单,查看是否一切正常
如果你的修改错误的话,再次修改,然后重复这个过程
12. 运行 `npm run generate`,等待静态文件生成
13. 当一切准备就绪后,同时按下 `Ctrl` `C` 停止开发环境,并运行 `npm run build``npm run start`
你可以通过 IP:3000、域名:3000 这样的方式访问这个页面(你可能需要在服务器提供商处开放 3000 端口)
你也可以使用 Nginx 这样的工具完成代理,将你的域名转发到 3000 端口上
请自行搜索关键词为 `服务器维护` 、 `Nginx 端口转发` 、 `域名配置` 相关的教程
14. 如果你不想运行这样一个服务(例如内存不足),或者你的服务器只支持静态页面,你还可以运行 `npm run generate`,等待静态文件生成
如果遇到问题,你可以先尝试反复多次运行这些命令,大多数情况下,二次运行会解决奇怪的问题,这通常是由于第一次运行时花费时间太久而被终止了
这些文件就是最终的页面,部署它们
+`/dist/` 文件夹下的所有内容(不包括 `/dist/` 文件夹本身),复制(上传)到你的服务器对应目录中,然后访问域名(例如 `www.jxtxzzw.com` )就可以了
+ 如果你的服务器提供商给你的是子目录,例如 `www.jxtxzzw.com/zzw` ,那么你需要在执行 `generate` 步骤前,将 `settings.json` 中的 `deployDir` 修改为子目录 `/zzw/`
+`/dist/` 文件夹下的所有内容(不包括 `/dist/` 文件夹本身),复制(上传)到你的服务器域名对应目录中,然后访问域名(例如 `www.jxtxzzw.com` )就可以了,你可能需要了解你的站点文件是存放在何处,以及你可能需要给这些文件授予读取的权限,请自行搜索教程,或者咨询服务器提供商
+ 如果你的服务器提供商给你的站点是子目录,或者你需要部署到某个子目录中,例如 `www.jxtxzzw.com/zzw` 方式访问,那么你需要在执行 `generate` 步骤前,将 `settings.json` 中的 `deployDir` 修改为子目录 `/zzw/`,注意,当你采用 `npm run start` 方式运行时,这个参数不起作用
如果你没有自己的服务器或者空间,你也可以使用 GitHub Pages
+ 首先注册 GitHub 账号,假设账号名是 `jxtxzzw`
+ 然后新建一个仓库,仓库名必须是 `XXX.github.io` 的形式,其中 `XXX` 是你的用户名,例如 `jxtxzzw.github.io`
+ 你可以搜索关键词为 `GitHub Pages` 的相关教程,注意,有些 GitHub Pages 的教程是指导使用 `hexo`,这需要安装额外的软件,或者要在仓库设置中进行一些配置,我们不需要这些步骤
+`/dist/` 文件夹下的所有内容(不包括 `/dist/` 文件夹本身),上传到这个仓库,注意,当你需要部署到 GitHub Pages 时,请检查 `/dist/` 目录下应该有一个 `.nojekyll` 的文件,如果没有,你应该创建它
你也可以使用 GitHub Pages
+ 你可以下载 GitHub Desktop 完成这个操作
+ 首先注册 GitHub 账号,假设账号名是 `jxtxzzw`
+ 你也可以下载安装 git 软件,利用 `git push` 操作将这些文件推送到远端仓库
+ 然后新建一个仓库,仓库名必须是 `XXX.github.io`,其中 `XXX` 是你的用户名,例如 `jxtxzzw.github.io`
+ 你可以搜索关键词为 `GitHub Pages` 的相关教程,注意,有些教程需要安装 `hexo`,或者在仓库设置中进行一些配置,我们不需要这些步骤
+ 你可以搜索关键词为 `git tutorial`、`git pull push`、`git remote` 的相关教程
+ 将 `/dist/` 文件夹下的所有内容(不包括 `/dist/` 文件夹本身),上传到这个仓库
+ 你可以下载 GitHub Desktop 完成这个操作
+ 你也可以下载安装 git 软件,利用 `git push` 操作将这些文件推送到远端仓库
+ 你可以搜索关键词为 `git tutorial``git pull push``git remote` 的相关教程
+ 你可以访问 `https://XXX.github.io`,例如 `https://jxtxzzw.github.io`,查看你的页面
+ 你可以访问 `https://XXX.github.io`,例如 `https://jxtxzzw.github.io`,查看你的页面
15. 更新时,只需要下载(或者克隆)最新的项目文件,将 `/assets/data/``/static/data/` 复制到新的项目文件夹中,重新运行这些命令即可,无需再次编辑数据
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