有时想写个自己的博客又苦于需要一堆堆的前置技能:既要先完成优雅而具备良好兼容性的界面设计,又要购买服务器和部署后台,这严重阻碍了大众踏出搭建网站第一步的积极性,于是 VuePress 横空出世,按照教程操作,从构建网站(包括完成第一篇文章)到在 Github Page 只需要短短 10 分钟不到的时间。不信?打开Visual Code和浏览器跟着文章来一遍吧~
本文基于 VuePress 1.1.0 文档编写.
0.前置
- 本地安装好 Node.js(版本>=8.0), 推荐安装 yarn.
-
具备可运行命令的终端
- Window: cmder、Git Bash
- Mac: Terminal、iTerm
- Linux: 默认终端
- 注册好 Github 账号
1. 本地创建博客项目
参(fan)考(yi): 官方教程-Getting Started
1)打开终端
mkdir blog # 本地创建 blog 项目
cd blog
yarn add -D vuepress # 或者 npm i -D vuepress, 安装 vuepress 依赖
mkdir docs
echo 'Hello, my first blog!' > docs/README.md # 编写第一篇文章(注意符号)
2)在 package.json 中加入脚本命令
{
"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs"
},
"devDependencies": {
"vuepress": "^1.1.0"
}
}
3)尝试本地运行项目
运行 yarn docs:dev
或者 npm run docs:dev
打开命令行链接访问网站如下即成功:
4) 尝试本地打包项目
运行 yarn docs:build
或者 npm run docs:build
2. 用 Github Page 展示博客
参(fan)考(yi): 官方教程-Deploying
1)在 Github 创建博客项目
Tip: 注意项目命名必须符合标准否则无法展示, 项目名应为:Github用户名.github.io, 如下所示.
2) 本地编写打包发布脚本
在 blog 项目根目录创建 build.sh,编写内容如下(每次项目重新打包都需要重新初始化 Git 并强制推送):
#!/usr/bin/env sh
# abort on errors
set -e
# build
npm run docs:build
# nav into the build out dir
cd docs/.vuepress/dist
# git
git init
git add .
git commit -m 'deploy'
git remote add origin https://github.com/Nodreame/Nodreame.github.io.git
git push -f origin master
3) 使用脚本上传 blog
- 脚本权限设置:
chmod +x build.sh
- 运行脚本
./build.sh
,开始部署
- 查看 Github 上 blog 项目的文件目录
4) 预览 Github Page 的 blog 项目
- 点击 Github 上 blog 项目的 Settings:
- 下拉到 Github Page 部分:
- 点击链接预览 Github Page 上的 blog 项目:
至此最简版本的 VuePress 博客网站已经成功发布到 Github Page 了. 看看时钟的指针才划过一小段,而且现在的博客也还很简陋,但你现在已经踏出了个人博客生涯的第一步了,记录自己的学习生活,踏上大佬之路的起点也许就在现在你打开Visual Code和浏览器的这一刻开始~
系列文章
版权信息
- 作者:Nodreame
- 链接:https://segmentfault.com/a/1190000020685401
- 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。