创建 VuePress 项目
先决条件, 安装 Node.js 和 npm.
mkdir notes
cd notes
npm init -y
npm install -D vuepress@1.7.1
mkdir docs && echo '# Hello VuePress' > docs/README.md
npx vuepress dev docs依次执行以上 6 条命令, 即可初始化一个 VuePress 项目, 并在本地启动服务, 然后通过浏览器访问 http://localhost:8080, 就可以看到如下页面啦!
通过 Git 管理项目文件
首先添加 Git 忽略文件列表 vim .gitignore, 内容如下
node_modules
package-lock.json
dist然后执行如下命令
git init
git add .
git status可以看到如下输出
On branch master
No commits yet
Changes to be committed:
(use "git rm --cached <file>..." to unstage)
new file: .gitignore
new file: docs/README.md
new file: package.json最后提交代码
git commit -m 'init'通过云效 · Codeup 作为远程代码仓库
通过新建代码库初始化一个远程代码仓库, 然后通过 SSH 方式将本地文件推送到远端.
git remote add origin git@codeup.aliyun.com:xxx_path_xxx/notes.git
git push -u origin master通过云效 · Flow 实现自动化部署
这里选择如下流程模版
部署测试成功后的效果
实际上, 代码扫描和单元测试两个步骤可以没有, 在代码源部分开启代源码触发, 我选择的触发事件是代码提交. 接下来, 重点介绍构建和部署两个步骤的关键配置点.
Node.js 构建
这里又包含两个步骤
- Node.js 构建, 关键点, 配置构建命令
cnpm install npx vuepress build docs - 构建物上传, 关键点, 配置打包路径
docs/.vuepress/dist
主机部署
先决条件, 要有自己的云服务器, 最好就是阿里云服务器 ECS. 关键点, 下载路径和部署脚本.
- 下载路径, 设置为
/opt/app/notes/package.tgz - 部署脚本
cd /opt/app/notes tar zxvf package.tgz
配置二级域名, 方便访问
在 /etc/nginx/conf.d/ 目录下, 新增 notes.conf 配置文件, 内容如下
server {
listen 80;
server_name notes.zhiyuanbiji.cn;
root /opt/app/notes;
}接下来, 就可以通过 http://notes.zhiyuanbiji.cn/essay/deploy.html 访问啦!
配置 npm scripts
为了方便启动服务, 打包构建, 可以在 package.json 中配置 npm scripts 脚本, 比如
"prestart": "npm install",
"start": "npx vuepress dev docs",
"build": "npx vuepress build docs",以后就可以通过 npm start 本地启动, 开发测试; npm run build 打包构建.
进阶配置
其他进阶配置, 这里就不详述了, 完整项目代码参见 https://github.com/henryhyn/notes
- 配置 markdown lint
- 配置自动侧边栏, katex 等插件
- 配置样式 css
- 配置主题
- 配置 editorconfig 等