# 在vuepress上搭建自己的博客

# 安装node.js

安装node.js，版本要求在>= 8

node.js下载地址：https://nodejs.org/zh-cn/

选择长期支持版

下载好安装在英文路径上

# 开始搭建博客

# 目录配置及文件

创建一个文件夹，如：vuepress，进入文件夹打开命令模式

全局安装VuePress

输入：

npm install -g vuepress

创建项目目录

mkdir study_blogs
cd study_blogs

1
2

初始化项目

npm init -y

文档路径

mkdir docs

.vuepress目录

cd docs
mkdir .vuepress

1
2

新建一个 md 文件

echo '# Hello VuePress!' >README.md

config.js配置文件

cd .vuepress
echo >config.js

1
2

public目录

mkdir public

设置package.json的脚本配置

VuePress中有两个命令:

vuepress dev docs命令运行本地服务，通过访问(http://localhost:8080)即可预览网站

vuepress build docs命令用来生成静态文件，默认情况下，放置在docs/.vuepress/dist目录中，当然你也可以在docs/.vuepress/config.js中的dest字段来修改默认存放目录。在这里将两个命令封装成脚本的方式，直接使用npm run docs:dev和npm run docs:build即可。

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

1
2
3
4
5

完成后的工作目录如下：

study_blogs
├─ docs //以后要在这里面写文章，直接在此文件夹下新建文件夹，然后再建md文档就行，链接会自动生成
│  ├─ README.md // 这个将会是我们以后的首页
│  └─ .vuepress // 这个里面会存放一些配置和组建
│     └─ public  // 静态文件存放地
│     └─ config.js //配置文件，我们以后的所有配置基本都在这里写
└─ package.json

1
2
3
4
5
6
7

在 package.json 里的 scripts 中添加如下代码

输入命令启动项目,npm run docs:dev,输入显示网址

npm run docs:dev

在config.js下添加如下代码，这里的 config.js 便是一个 Vuepress 网站必要的配置文件：

module.exports = {
  base: '/haha_blogs/',//github上根目录地址
  title: 'study_blogs',
  description: 'haha的博客',
}

1
2
3
4
5

其中配置项的含义为：

base：站点的基础路径，它的值应当总是以斜杠开始，并以斜杠结束。这里设置为 /blog-demo/ ，我们再次在本地运行项目，访问路径就需要变更为 http://localhost:8081/haha_blogs/
title：网站的标题
description：网站的描述

# 首页

默认主题提供了一个首页的布局，想要使用它，需要在你的根级 README.md 以格式 YAML front matter (opens new window) 指定 home: true。因此，将我们最初创建的 README.md 修改一下：

---
home: true
heroImage: /image/head portrait.jpg
heroText: study_blogs
tagline: 测试之路
actionText: 走过路过不要错过 →
actionLink: /
features:
- title: 测试学习小笔记
  details:从0开始的测试之路，一路下来的小笔记，以免自己忘了。
- title: 测试需要的环境搭建
  details: 测试需要的环境搭建，自己踩过的坑，操作过的过程记录。
- title: 感兴趣的扩展
  details: 学习之路不断延伸，有了自己感兴趣的方面，比如：搭建自己的博客。
---

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

heroImage: 首页图片，图片放置在 .vupress/public 文件夹下，若没有该文件夹则自己创建一个，保存一张你想要的首页图片，并在此处引用，这里是放在public下image文件夹下。
其它参数请参考官方文档：Vuepress-默认主题首页 (opens new window)

# 导航栏

在 .vupress/config.js 文件添加一些导航栏链接：

module.exports = {
    themeConfig: {
        // 你的GitHub仓库，请正确填写
        repo: 'https://github.com/xxxxxxx/blog-demo',
        // 自定义仓库链接文字。
        repoLabel: 'My GitHub',
        nav: [
            { text: 'Home', link: '/' },
            { text: '第一篇博客', link: '/blog/haha1.md' }
        ]
    }
}

1
2
3
4
5
6
7
8
9
10
11
12

我们在 docs 目录下新建 blog 文件夹，在 blog 目录下创建 /blog/haha1.md 作为我们第一篇博客的内容：

# 侧边栏

最后我们配置侧边栏，让用户体验更好一些，在 .vupress/config.js 文件添加一些代码：

  themeConfig: {
    sidebar: [
      ['/', '首页'],
      ['/blog/haha1.md', '我的第一篇博客']
    ]
  }
}

1
2
3
4
5
6
7

# 我的第一篇博客

first blog

再次运行，打开网页，点击导航栏第一篇博客

# 部署

在github上创建一个名为 study_blogs 的仓库

在项目根目录中，创建一个如下的 deploy.sh 脚本文件，请自行修改github仓库地址

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

# 生成静态文件
npm run docs:build

# 进入生成的文件夹
cd docs/.vuepress/dist

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

#如果打算发布到 https://<USERNAME>.github.io/<REPO>/（也就是说你的仓库在 https://github.com/<USERNAME>/<REPO>），则将 base 设置为 /<REPO>/，此处我设置为 /study_blogs /
#git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages(分支）
git push -f git@github.com:<USERNAME>/<REPO>.git master

cd -

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

保存，运行，就可以了

在setting中找到github pages 在source下选择master branch就可以了，如果是分支，选择分支就行，显示的网址就是部署在github上，自己博客的静态网址

← 给谷歌添加谷歌访问助手