VuePress搭建个人blog

近期想要搭个blog，认真写写笔记，想来想去还是放在github上吧，静态网站生成，hexo已经有几年了。前段时间刷github，发现vue出了个vuepress，想想尝试下新的东西。

官网: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

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


# 启动方式改为
npm run docs:dev

npm run docs:build

配置部署

采用github 方式

在 docs/.vuepress/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脚本: 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 示例

---
sidebar: auto
---


# 环境配置

#### 201805
- [记Windows开发迁移至Mac环境](./记Windows开发迁移至Mac环境.md)
- [VuePress搭建个人blog](./VuePress搭建个人blog.md)

原理探索（待完成）

一个 VuePress 网站是一个由 Vue、Vue Router 和 webpack 驱动的单页应用

---

后面陆续把blog搬上去吧...哎，总算开始要认真了