Blog - 搭建博客

VuePress 官网

VuePress 是一款 Vue 驱动的静态网站生成器，以 Markdown 为中心的项目结构，以最少的配置帮助你专注于写作

vuepress-theme-reco 是一款简洁而优雅的 vuepress 博客&文档主题。

简洁版 - 博客案例
在这里插入图片描述

windows 部署

windows 准备工作

先安装 node.js下载地址，再运行 cmd 命令安装 Yarn

npm install --global yarn
yarn --version

下载 vuepress-reco

新建项目安装目录Blog，在Blog目录下运行 cmd 命令安装

yarn add -D @vuepress-reco/theme-cli	# 安装 -D 目录本地
yarn theme-cli init			# 初始化博客

初始化结束后，目录下会多出一个blogs文件夹，用来存放你的博客文章，docs文件夹存放文档类文章，.vuepress文件夹，存放博客的配置文件，图标背景图片等资源。README.md文件，是你的博客主页。如果看不到.vuepress文件夹，在文件夹设置中打开“显示隐藏文件”

yarn install	# 安装需要的package
yarn dev	# 启动看效果

在浏览器中打开 http://localhost:8080/ (如果端口被占用会变成8081或8082依次往上)

初始化博客

打开 .vuepress/config.js 在此文件下，可以修改网站的一些配置。不想要的部分可以直接删掉。

module.exports = {
  "title": "避海拦天的学习笔记", // 博客网站的标题
  "description": "BHLT's Blog", // 博客网站的描述
  "dest": "public", // 打包生成文件的路径
  "head": [
    [
      "link",
      {
        "rel": "icon",
        "href": "/favicon.ico" // favicon图标，在/.vuepress/public目录下
      }
    ],
    [
      "meta",
      {
        "name": "viewport",
        "content": "width=device-width,initial-scale=1,user-scalable=no"
      }
    ]
  ],
  "theme": "reco", // 使用的主题
  "themeConfig": { // 主题配置
    "nav": [
      {
        "text": "Home",
        "link": "/",
        "icon": "reco-home"
      },
      {
        "text": "TimeLine",
        "link": "/timeline/",
        "icon": "reco-date"
      },
      {
        "text": "Docs",
        "icon": "reco-message",
        "items": [
          {
            "text": "vuepress-reco",
            "link": "/docs/theme-reco/"
          }
        ]
      },
      {
        "text": "Contact",
        "icon": "reco-message",
        "items": [
          {
            "text": "GitHub",
            "link": "https://github.com/recoluan",
            "icon": "reco-github"
          }
        ]
      }
    ],
    "sidebar": {
      "/docs/theme-reco/": [
        "",
        "theme",
        "plugin",
        "api"
      ]
    },
    "type": "blog",
    "blogConfig": {
      "category": {
        "location": 2,
        "text": "Category"
      },
      "tag": {
        "location": 3,
        "text": "Tag"
      }
    },
    "friendLink": [ // 友情链接
      {
        "title": "午后南杂",
        "desc": "Enjoy when you can, and endure when you must.",
        "email": "1156743527@qq.com",
        "link": "https://www.recoluan.com"
      },
      {
        "title": "vuepress-theme-reco",
        "desc": "A simple and beautiful vuepress Blog & Doc theme.",
        "avatar": "https://vuepress-theme-reco.recoluan.com/icon_vuepress_reco.png",
        "link": "https://vuepress-theme-reco.recoluan.com"
      }
    ],
    "logo": "/logo.png", // 网站左上角的Logo图片，存放在/.vuepress/public目录下
    "search": true, // 是否开启搜索功能
    "searchMaxSuggestions": 10, //搜索给出的最大建议条数
    "lastUpdated": "Last Updated", // 最后更新时间
    "author": "", // 网站作者
    "authorAvatar": "/avatar.png",
    "record": "xxxx", // 备案信息
    "startYear": "2017" // 网站始于xxxx年
  },
  "markdown": {
    "lineNumbers": true
  }
}

自定义首页配置

Blog目录下的README.md对首页的配置进行更改

---
home: true
heroText: 避海拦天的学习笔记 # 展示在主页正中的标题
tagline: Things change, roll with it. # 展示在标题下方的文字
# heroImage: /hero.png
# heroImageStyle: {
#   maxWidth: '600px',
#   width: '100%',
#   display: block,
#   margin: '9rem auto 2rem',
#   background: '#fff',
#   borderRadius: '1rem',
# }
# 主页背景图
bgImage: /bg.jpg # 设置背景图片，图片放在/.vuepress/public目录下
bgImageStyle: {
  height: '300px' # 背景图高度
}
isShowTitleInHome: false
actionText: Guide
actionLink: /views/other/guide
features:
- title: Yesterday
  details: 开发一款看着开心、写着顺手的 vuepress 博客主题
- title: Today
  details: 希望帮助更多的人花更多的时间在内容创作上，而不是博客搭建上
- title: Tomorrow
  details: 希望更多的爱好者能够参与进来，帮助这个主题更好的成长
---