2

0.png

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

打开命令行链接访问网站如下即成功:
9.png

4) 尝试本地打包项目

运行 yarn docs:build 或者 npm run docs:build
2.png

2. 用 Github Page 展示博客

参(fan)考(yi): 官方教程-Deploying

1)在 Github 创建博客项目

Tip: 注意项目命名必须符合标准否则无法展示, 项目名应为:Github用户名.github.io, 如下所示.
4.png

5.png

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 ,开始部署

3.png

  • 查看 Github 上 blog 项目的文件目录

6.png

4) 预览 Github Page 的 blog 项目

  • 点击 Github 上 blog 项目的 Settings:

7.png

  • 下拉到 Github Page 部分:

8.png

  • 点击链接预览 Github Page 上的 blog 项目:

9.png

至此最简版本的 VuePress 博客网站已经成功发布到 Github Page 了. 看看时钟的指针才划过一小段,而且现在的博客也还很简陋,但你现在已经踏出了个人博客生涯的第一步了,记录自己的学习生活,踏上大佬之路的起点也许就在现在你打开Visual Code和浏览器的这一刻开始~

系列文章

版权信息


Nodreame
155 声望32 粉丝

伪全栈|前端|前软粉