VuePress 搭建个人 Blog

时隔三年，近来作者重新拾起了技术博客的折腾，记得曾经像是从看到 onevcat 漂亮的技术博客开始（起初使用的 Hexo 搭建），就想要借助 gitpage 这一免费的服务存储方式绑定自己的域名建设自己的技术博客（用来记录自己所学，所用，所看到的技术），而后发现 onevcat 又改版了，开始使用 jekyll 搭建静态博客，关键还是习惯他的博客主题，然后就又是一顿折腾，曾经因为各种环境搭建问题，报各种错误而通宵（忘记了时间的感觉真的挺好，或许这是年轻人的资本吧），还好功夫不负有心人，最终都成功了（突然想起，当时女朋友还在光线传媒的园区工作，最终我也是在那里成功搭建的）。
而这次是在这一段时间找工作的准备的过程中看到了别人使用 VuePress 搭建的 iOS 面试题技术博客，呀！原来按照技术点分类的技术文章可以通过这样的方式在静态的网页上展示得如此调理，羡慕不已，走起…

官网：VuePress

**搭建前提：**安装Node.js 且Node.js 版本 >= 8。node.js安装很简单，这里略过。

经过过去搞过的两种静态博客的搭建方式总结，搞清楚搭建的前提是至关重要的！！！

项目安装

# 创建项目文件
mkdir blog

# 将 VuePress 作为一个本地依赖安装
yarn add -D vuepress # 或者：npm install -D vuepress

# 新建一个 docs 文件夹
mkdir docs

# 新建一个 markdown 文件
echo "# Hello VuePress" > docs/README.md

# 开始写作 启动
npx vuepress dev docs

# VuePress dev server listening at http://localhost:8080/ 

配置 package.json

在 docs 同级目录下创建 package.json 文件：(以下为终端指令操作，[ ] 中的内容为输入上方指令后输出的结果)

pwd
[**/blog/]
ls
[docs]
touch package.json
ls
[docs   package.json]
vim package.json

按 i 进行 insert 操作，添加以下内容：

{
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }
}

然后按键顺序：esc->:wq
此时启动方式就更改为了：

npm run docs:dev

npm run docs:build

配置部署

配置 config.js

cd ***/blog/docs/.vuepress/
vim config.js

添加以下内容：

module.exports = {

  title: '记录集',
  description: '记录生活，记录成长',
  base: '/',
  host: '0.0.0.0',
  // mac 下 port 未生效
  port: 8081,

  themeConfig: {
    // gitc 仓库地址
    repo: 'xx/xx',
    // 导航栏
    nav: [
      { text: 'Home', link: '/' },
      { text: '技术博客', link: '/technical/' },
      { text: '个人文章', link: '/article/' },
    ],
  
    // 搜索
    search: true,
    searchMaxSuggestions: 10,
    lastUpdated: 'Last Updated', // string | boolean
  }
}

配置 shell 脚本（脚本示例，请根据自己的需求使用）

cd ***/blog/
vim deploy.sh

添加以下内容：

#!/usr/bin/env sh

# 确保脚本抛出遇到的错误
set -e

# 构建
npm run docs:build

# 进入到构建输出目录
cd docs/.vuepress/dist

# 如果你是要部署到自定义域名
# echo 'www.example.com' > CNAME

git init
git add -A
git commit -m 'deploy'

# 如果你想要部署到 https://<USERNAME>.github.io
# git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master

# 如果你想要部署到 https://<USERNAME>.github.io/<REPO>
# git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages

cd -

项目结构

在 docs 下新建文件夹 technical 开始写博客，文件夹下新建 README.md 表示改目录主页或者主要内容。

项目结构如下：

- docs
  - .vuepress
    - dist      // 编译后输出目录
    - config.js // 配置
  - technical  	// 博客文件夹
    - README.md // 博客文件夹主页
  - README.md  	// 主页
- node_modules 	// 所需 modules
- package.json 
- deploy.sh  	// 部署脚本

注意：每个文件夹下的 README.md 文件为文件夹目录下的默认首页，相当于 index.html

README.md 示例

---
sidebar: auto
---

# 环境配置

#### 2020.04
- [Runtime 的使用场景](./Runtime 的使用场景.md)
- [weak 的底层原理](./weak 的底层原理.md)

以上为简单的 Blog 使用 VuePress 搭建流程，做个记录，毕竟对于 VuePress 我也是初学者。后续进行深入的研究。