1.环境准备与项目启动
1.环境准备与项目启动
当前博客采用 vuepress-hope 搭建,这是一个免费开源的项目,是我用过的最强大和灵活的静态博客生成工具。
但是想要完全用好这款工具搭建出符合自己心意的博客,必须得具有一定的知识储备和掌握必要的工具。
必要的知识储备
相对路径,命令行,文件编码,开发工具,Git,Github 都需要具备一定的概念才可以。
工具准备
命令行环境
编辑器
为了良好的体验,需要安装的插件:
Vue - Official
https://marketplace.visualstudio.com/items?itemName=Vue.volar
Prettier - Code formatter
https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
官方文档说明
它的文档结构长这样:
![vuepress-hope 网站结构](/assets/vuepress-hope%E7%BD%91%E7%AB%99%E8%AF%B4%E6%98%8E-DK3sOTYj.png)
一般来说,按照顺序一步步走下去就可以把项目成功启动起来。
开始
如果准备工作妥当,我们这里直接开始。
打开命令行,找一个自己心仪的目录执行以下命令:
pnpm create vuepress-theme-hope my-docs
命令解读
pnpm
: 这个是 Nodejs
当下最流行的的包管理器,上文中有写到。create
: 这个是 pnpm 内置的一个命令,意思是 通过 模板创建一个项目vuepress-theme-hope
: 模板的名称my-docs
: 这个是项目名称,你完全可以自定义这部分改成自己喜欢的名字。建议使用英文字母、下划线以及中短杠
执行完命令之后会有一些问题需要你回答一下:
完成之后当前目录就会创建一个项目目录,我们用 vscode 打开这个项目:
![vuepress-hope 目录结构说明](/assets/project%E7%9B%AE%E5%BD%95%E7%BB%93%E6%9E%84-BhUGWi0z.png)
其中 博客的程序和配置部分全部都会存放在 src/.vuepress
目录下。src/
目录下除开 .vuepress
目录之外的目录和文件都会被视作文档。
node_modules
是依赖存放的目录,一般不需要去管它。
package.json
是项目描述文件,其中
"scripts": {
"docs:build": "vuepress-vite build src",
"docs:clean-dev": "vuepress-vite dev src --clean-cache",
"docs:dev": "vuepress-vite dev src",
"docs:update-package": "pnpm dlx vp-update"
}
部分是你可用的脚本。比如这里就提供了 4 个脚本,你可以这么使用它:
# 安装依赖 这个是 pnpm 提供的基本能力
pnpm install
# 将项目进行打包,准备发版 , 对应 package.json scripts 里面的 docs:build 命令
pnpm run docs:build
# 清除缓存并启动服务
pnpm run docs:clean-dev
# 启动本地预览服务
pnpm run docs:dev
# 升级所有的依赖
pnpm run docs:update-package
对的,其基本的语法就是 pnpm run xxx
。 xxx
就是 package.json
的 scripts
属性提供的。
如果没什么问题,你应该可以成功启动项目并看到你的博客雏形了。
另一种方案
我当前的博客源码已经在 github
中开源了,地址为
https://github.com/mo7cc/blog-source
你可以直接点击下载并解压。
![直接下载源码](/assets/download_source_code-aJMvGqP9.png)
项目结构说明如下:
![mo7-blog 的 项目结构](/assets/mo7-blog%E9%A1%B9%E7%9B%AE%E7%BB%93%E6%9E%84-CqURW84f.png)
也就是说,我的博客项目 命令如下:
# 安装依赖
pnpm install
# 本地启动预览
pnpm run dev
# 打包变异准备发版
pnpm run build
# 更新依赖
pnpm run update-package
# 一条指令同步到远程仓库
pnpm run sync <同步说明>
# 一条指令发布博客
pnpm run deploy <发布说明>
# 开源博客的源码部分
pnpm run open <开源说明>
# 新建一个周工作计划表
pnpm run weekly
- 0
- 0
- 0
- 0
- 0
- 0