美文网首页web全栈技术
VuePress打造静态博客

VuePress打造静态博客

作者: 痕迹_29ac | 来源:发表于2019-02-14 17:30 被阅读0次

目录结构

├─ docs
│  ├─ README.md
│  └─ .vuepress
│     └─ config.js
│  └─ about
│     └─ README.md
│  └─ notes
│     └─ javascript
|       └─ 数组去重.md
|       └─ 数组排序.md
│     └─ vue
|       └─ VuePress打造静态博客.md
└─ node_modules
└─ deploy.sh
└─ package.json

安装

# 新建package.json
npm init -y

# 将 VuePress 作为一个本地依赖安装
npm i vuepress -D

# 新建一个 docs 文件夹
mkdir docs

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

# 编辑package.json
"scripts": {
  "dev": "vuepress dev docs",
  "build": "vuepress build docs"
}

# 本地预览效果
npm run dev

# 生成静态文件
npm run build

首页模板配置

---
home: true
heroImage: ./img/header.jpg
actionText: 关于我
actionLink: /about/
features:
- title: 装逼
  details: 在这里,你可以看到 zhjgh 在这里无限装逼,所以你可以尽情打脸。就算你懂,没关系,打了脸再说~
- title: 搞笑
  details: 在这里,你可以获得各种学习欢乐,轻松进击前端编程。点滴进步,成就不一样的你。
- title: 深沉
  details: 在这里,你可以收获一个广州自身漂泊的人的情怀,感受在这个烦躁的社会 zhjgh 如何安身立命。
footer: zhjgh 的博客 | Copyright © 2018 不折腾的前端,和咸鱼有什么区别
---

全局配置文件config.js

module.exports = {
  // 左上角标题
  title: 'zhjgh的博客',
  //描述
  description: '前端开发工程师',
  // 头部部署,右上角小图标
  head: [
    // ico 配置
    ['link', {
      rel: 'icon',
      href: '/img/logo.png'
    }]
  ],
  // 主题部署
  themeConfig: {
    /** 
     * 右侧导航条
     * text - 显示字段
     * link - 链接:注意前后带 / 符号
     */
    nav: [
      {
        text: '主页',
        link: '/'
      },
      /**
       * 多级菜单
       * 开头 text 为一级标题
       * 数组内 text 为二级标题
       * link 为链接,注意带 /
       */
      {
        text: '学习文档',
        link: '/notes/',
      },
      {
        text: '关于',
        link: '/about/'
      },
      // 链接到网站
      {
        text: 'Github',
        link: 'https://github.com/zhjgh/'
      },
    ],
    /**
     * 侧边栏配置:侧边栏组
     */
    sidebar: {
      '/note': [
        {
          title:'javascript',
          collapsable: true,
          children:[
            '/notes/javascript/数组去重',
            '/notes/javascript/数组排序',
          ]
        },
        {
          title:'vue',
          collapsable: true,
          children:[
            '/notes/vue/VuePress打造静态博客',
          ]
        },
      ]
    }
  }
}

一键部署

1.新建deploy.sh

touch deploy.sh

2.配置

#!/usr/bin/env sh

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

# 生成静态文件
npm run 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 https://github.com/zhjgh/zhjgh.github.io.git master

# 如果发布到 https://<USERNAME>.github.io/<REPO>
# git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages

cd -

3.新建命令到package.json

"scripts": {
  "dev": "vuepress dev docs",
  "build": "vuepress build docs",
  "deploy": "bash deploy.sh"
},

4.发布

npm run deploy

相关文章

  • VuePress打造静态博客

    目录结构 安装 首页模板配置 全局配置文件config.js 一键部署 1.新建deploy.sh 2.配置 3....

  • VuePress 开发静态博客

    本文,仅针对开发过程的记录,具体配置,请移步 VuePress 官网 AND @vuepress/theme-bl...

  • VuePress 开发静态博客

    本文,仅针对开发过程的记录,具体配置,请移步 VuePress 官网 AND @vuepress/theme-bl...

  • VuePress搭建博客系统

    VuePress搭建博客系统 介绍 VuePress 由两部分组成:一个以 Vue 驱动的主题系统的简约静态网站生...

  • VuePress从零开始搭建自己的博客

    VuePress从零开始搭建自己的博客 最近将自己的博客从Hexo转移到VuePress中来,使用VuePress...

  • VuePress+Gitee|搭建静态博客

    不使用Hexo的原因 主要还是自己水平太菜了,想快速发布博客并方便自己使用,但是第三方模板不配有侧边栏和本地搜索,...

  • npm、cnpm、yarn三剑客

    npm,cnpm,yarn这三个或许使用Hexo,Hugo,vuepress等静态博客搭建的小伙伴们来说,会经常遇...

  • ECS训练营学习笔记 第一天

    学习内容—打造专属云笔记 使用ECS,快速搭建、管理VuePress静态网站 第一步:安装Node.js 我使用的...

  • 创建 VuePress + GithubPages + Trav

    [TOC] 最新博客链接 VuePress 在线文档链接_Github Pages VuePress 在线文档链接...

  • Vuepress 搭建静态博客全攻略

    想在两个小时之内搭建出来一个带有评论系统和谷歌数据分析的静态博客,同时完成静态博客的自动构建和部署吗??这篇文章对...

网友评论

    本文标题:VuePress打造静态博客

    本文链接:https://www.haomeiwen.com/subject/jofyeqtx.html