在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

初始化项目

npm init -y

文档路径

mkdir docs

.vuepress目录

cd docs
mkdir .vuepress

新建一个 md 文件

echo '# Hello VuePress!' >README.md

config.js配置文件

cd .vuepress
echo >config.js

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"
  }
}

完成后的工作目录如下:

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

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


image.png

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

npm run docs:dev
image.png

image.png

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

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

其中配置项的含义为:

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

首页

默认主题提供了一个首页的布局,想要使用它,需要在你的根级 README.md 以格式 YAML front matter 指定 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: 学习之路不断延伸,有了自己感兴趣的方面,比如:搭建自己的博客。
---
  • heroImage: 首页图片,图片放置在 .vupress/public 文件夹下,若没有该文件夹则自己创建一个,保存一张你想要的首页图片,并在此处引用,这里是放在public下image文件夹下。
  • 其它参数请参考官方文档:Vuepress-默认主题首页

导航栏

在 .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' }
        ]
    }
}
image.png

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

侧边栏

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

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

#我的第一篇博客

first blog


image.png

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


image.png

部署

在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://.github.io//(也就是说你的仓库在 https://github.com//),则将 base 设置为 //,此处我设置为 /study_blogs /
#git push -f [email protected]:/.git master:gh-pages(分支)
git push -f [email protected]:/.git master

cd -

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


image.png

你可能感兴趣的:(在vuepress上搭建自己的博客)