VuePress快速搭建博客+云开发部署

hehog
128 阅读3分钟

📚快速搭建个人博客

官方文档

VuePress 需要 Node.js >= 8.6

一、快速搭建VuePress官网首页

  1. 创建并进入博客目录

    mkdir blog && cd blog

  2. 项目初始化

    yarn init # npm init

  3. 安装VuePress本地依赖

    yarn add -D vuepress # npm install -D vuepress

  4. 创建相关文件夹

    mkdir -p .vuepress/public # .vuepress文件夹用于存放全局的配置、组件、静态资源等

  5. 下载官网首页的hero.png图片放在public文件夹下

  6. 创建首页文档

    mkdir -p docs && echo '# Hello VuePress' > docs/README.md

    文档内容稍作修改(可选)

    home: true
heroImage: /hero.png
heroText: VuePress
tagline: Vue 驱动的静态网站生成器
actionText: 快速上手 →
actionLink: /
features:
- title: 简洁至上
  details: 以 Markdown 为中心的项目结构，以最少的配置帮助你专注于写作。
- title: Vue驱动
  details: 享受 Vue + webpack 的开发体验，在 Markdown 中使用 Vue 组件，同时可以使用 Vue 来开发自定义主题。
- title: 高性能
  details: VuePress 为每个页面预渲染生成静态的 HTML，同时在页面被加载的时候，将作为 SPA 运行。
footer: MIT Licensed | Copyright © 2018-present Evan You

  7. 在 package.json 中修改 scripts得到以下内功

    {
  "name": "blog",
  "version": "1.0.0",
  "description": "VuePress",
  "main": "index.js",
  "directories": {
    "doc": "docs"
  },
  "scripts": {
    "dev": "vuepress dev docs",
    "build": "vuepress build docs"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "vuepress": "^1.5.2"
  }
}

  8. 当前目录结构

    .
└── blog
    ├── docs
    │   ├── .vuepress
    │   │   └── public
    │   │       └── hero.png
    │   └── README.md
    └── package.json

  9. 运行命令

    yarn run dev # npm run dev

    浏览器打开http://localhost:8080/

    image-20200802121603727

二、导航栏和侧边栏

  1. 添加主页文档

    cd docs
mkdir -p home && echo '# Home VuePress' > home/README.md

  2. .vuepress文件夹下面创建配置文件config.js

    cd .vuepress && touch config.js

  3. config.js添加以下配置

    /home/ 默认跳转到/home/README.md

    module.exports = {
    title: 'hehog的博客📚',
    description: 'hehog的个人博客笔记，记录成长',
    port: '8080',
    head: [
        ['link', { rel: 'icon', href: '/image/icon/ciwei.png' }] //网站的 ico 图标
    ],
    themeConfig: {
        nav: [// 导航栏
            { text: '首页', link: '/' },
            { text: 'home', link: '/home/' },
            {
                text: '后端',
                items: [
                    { text: 'jvm', link: '/java/jvm/' },
                    { text: '设计模式', link: '/java/design/' },
                    { text: '数据库', link: '/data/' },
                ]
            },
            { text: '掘金', link: 'https://juejin.im' },
            { text: '知乎', link: 'https://www.zhihu.com' }
        ],
        sidebar: {
            '/home/': [],
            '/java/design/': [
                {
                    title: "设计模式",
                    collabsable: true,// 可折叠
                    children: [
                        ['', '单例模式'],
                        ['/java/design/1', '工厂模式']
                    ]
                }
            ],
            '/data/': [

                {
                    title: "mysql",
                    collabsable: true,// 可折叠
                    children: [
                        ['', 'mysql安装'], // /data/README.md
                        ['/data/mysql/1', '常用命令']
                    ]
                },
                {
                    title: "mongo",
                    collabsable: true,// 可折叠
                    children: [
                        ['/data/mongo/1', '常用命令']
                    ]
                },
                {
                    title: "redis",
                    collabsable: true,// 可折叠
                    children: [
                        ['/data/redis/1', 'redis安装']
                    ]
                }
            ]
        }
    }
}

  4. 目录结构如下

    .
├── docs
│   ├── README.md
│   ├── data
│   │   ├── README.md
│   │   ├── mongo
│   │   │   ├── 1.md
│   │   │   ├── 2.md
│   │   │   └── README.md
│   │   ├── mysql
│   │   │   └── README.md
│   │   └── redis
│   │       └── README.md
│   └── java
│       ├── README.md
│       ├── design
│       │   ├── 1.md
│       │   └── README.md
│       └── jvm
│           └── README.md
└── package.json

  5. 重新启动后的效果

    home

三、插件安装

  1. 本地安装插件

    yarn add -D @vuepress/plugin-back-to-top @vuepress/plugin-nprogress

  2. config.js添加配置

    plugins:[
	["@vuepress/back-to-top"], // 返回顶部
	["@vuepress/nprogress"],  // 加载进度条
]

四、添加评论功能

  1. Valine官网注册账号拿到AppID和AppKey

  2. 安装评论插件

    yarn add vuepress-plugin-comment -D

  3. 创建Valine.vue

    mkdir -p .vuepress/components/Valine.vue

  4. Valine.vue添加以下内容

    <template>
  <section style="border-top: 2px solid #eaecef;padding-top:1rem;margin-top:2rem;">
    <div>
      <!-- id 将作为查询条件 -->
      <span class="leancloud-visitors"
            data-flag-title="Your Article Title">
        <em class="post-meta-item-text">阅读量： </em>
        <i class="leancloud-visitors-count"></i>
      </span>
    </div>
    <h3>
      <a href="javascript:;"></a>
      评 论：
    </h3>
    <div id="vcomments"></div>
  </section>
</template>

<script>
export default {
  name: 'Valine',
  mounted: function () {
    // require window
    const Valine = require('valine');
    if (typeof window !== 'undefined') {
      document.getElementsByClassName('leancloud-visitors')[0].id
        = window.location.pathname
      this.window = window
      window.AV = require('leancloud-storage')
    }

    new Valine({
      el: '#vcomments',
      appId: '',// your appId
      appKey: '', // your appKey
      notify: false,
      verify: false,
      path: window.location.pathname,
      visitor: true,
      avatar: 'mm',
      placeholder: '٩(◕‿◕｡)۶发表你的想法~',
      // 设置Bilibili表情包地址
      emojiCDN: 'https://mirrorcdn.bili33.top/', 
      // 表情title和图片映射
      emojiMaps: {
          "bilibilitv2": "bilibilitv/[tv_doge].png",
          "bilibilitv3": "bilibilitv/[tv_亲亲].png",
          "bilibilitv4": "bilibilitv/[tv_偷笑].png",
          "bilibilitv5": "bilibilitv/[tv_再见].png",
          "bilibilitv6": "bilibilitv/[tv_冷漠].png",
          "bilibilitv7": "bilibilitv/[tv_发怒].png",
          "bilibilitv8": "bilibilitv/[tv_发财].png",
          "bilibilitv9": "bilibilitv/[tv_可爱].png",
          "bilibilitv10": "bilibilitv/[tv_吐血].png"
      } 
    });
  },
}
</script>

  5. 需要添加评论的md文件中添加

    <Valine></Valine>

  6. 效果如下

    image-20200802205312909

五、安装主题

  1. 安装AntDocs

    yarn add vuepress-theme-antdocs

  2. config.js添加以下配置重启生效

    module.exports = {
  ...
  theme: 'antdocs',
  ...
}

五、腾讯云部署

  1. 安装云开发工具

    npm i -g @cloudbase/cli

  2. 授权命令

    tcb login

  3. 上传 命令

    cd docs/.vuepress/dist
tcb hosting:deploy ./ -e blog-0gndov6b668516d2

  4. 上传成功

    image-20200802225612402

  5. 访问 地址

还可以使用备案的域名配置访问地址

六、nginx和github

Nginx 和 github配置就比较常见了上传静态文件就行了

avatar
文章
阅读
粉丝