VuePress(一) - 10分钟开启你的个人博客生涯

有时想写个自己的博客又苦于需要一堆堆的前置技能：既要先完成优雅而具备良好兼容性的界面设计，又要购买服务器和部署后台，这严重阻碍了大众踏出搭建网站第一步的积极性，于是 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和浏览器的这一刻开始~

系列文章

VuePress(一) - 10分钟开启你的个人博客生涯 【<- 当前位置】
(二)三招让你的博客看起来有`东西

版权信息

作者：Nodreame
链接：https://segmentfault.com/a/1190000020685401
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。