选择vuepress的原因

因为vuepress本身就是一个文档型的页面，比较简约，这里使用的是大佬午后南杂制作的一个主题，个人认为应该是vuepress最好的主题之一

安装

全局安装：npm install @vuepress-reco/theme-cli -g
输入指令进行初始化项目：theme-cli init
在初始化时，会让你填写一些信息，例如：博客名称、博客标题、博客描述等等，可以按需填写也可以直接回车跳过，后续这些信息都还可以自己填写的

  1. ├── blog
  2.      ├── .vuepress
  3.      │   ├── public   // 存放静态资源
  4.      │   │     ├── avatar.png  // 头像图片
  5.      │   │     ├── favicon.ico   // 网站icon图标
  6.      │   │     ├── hero.png    // 我也不知道有啥用，删了也可以
  7.      │   │     └── logo.png    // 网站导航栏左上角的logo图片
  8.      │   │
  9.      │   └── config.js      // 配置文件，非常重要！！！
  10.      ├── blogs  // 存放文章，即.md文件
  11.      │   ├── ...
  12.      │   ├── ...
  13.      │   └── ...
  14.      ├── docs     // 存放一些后续需要配置的文件，暂时不需要了解
  15.      ├── .gitignore       // 提交git仓库时需要忽略的文件
  16.      ├── package.json      // 管理包文件
  17.      └── README.md        // 自动生成的，我们可以先不管

配置package.json文件

  1. {
  2.   "name": "yychuiyan",
  3.   "version": "1.0.0",
  4.   "author": "reco_luan",
  5.   "description": "",
  6.   "scripts": {
  7.     "start": "vuepress dev .",
  8.     "dev": "vuepress dev . --open --host \"localhost\"",
  9.     "build": "vuepress build .",
  10.   },
  11.   "devDependencies": {
  12.     "vuepress": "1.8.2",
  13.     "vuepress-theme-reco": "1.6.14"
  14.   }
  15. }

启动项目

进入项目根目录->安装依赖包->启动

  1. // 第一步，进到项目根目录中
  2. cd blog
  3. // 第二步，安装依赖包（这个过程很慢，需要等待）
  4. npm install
  5. // 第三步，等依赖包下完了以后再执行该指令启动项目
  6. npm/yarn run dev

配置信息(config.js)

  1. module.exports = {
  2.     // 1. 博客标题 2. 加载动画时的大标题 3.标签栏的title
  3.     "title": "夜雨炊烟",
  4.     // 1. 加载动画时的副内容 2. 网站描述节点，用于SEO
  5.     "description": "夜雨炊烟",
  6.     // 部署到github上的首页配置
  7.     "base": "/vlogs/",
  8.   // 设置语言：因为 VuePress 默认的 lang 为 en-US，导致文章时间写入的格式为 2021-12-12 ，但是显示的是 12/12/2021
  9.   locales: {
  10.     '/': {
  11.       lang: 'zh-CN'
  12.     }
  13.   },
  14.     // 文档 head
  15.     "head": [
  16.         [
  17.             "link", // link标签
  18.             {
  19.                 "rel": "icon", // rel属性值icon
  20.                 "href": "/favicon.ico" // href属性值为 /favicon.ico
  21.             }
  22.         ],
  23.         [
  24.             "meta", // 生成meta标签
  25.             {
  26.                 "name": "viewport", // name属性值为viewport
  27.                 // content属性值为width=device-width,initial-scale=1,user-scalable=no
  28.                 "content": "width=device-width,initial-scale=1,user-scalable=no"
  29.             }
  30.         ],
  31.         ["meta", {
  32.             "name": "keywords",
  33.             "content": "前端,js,css"
  34.         }],
  35.         ['meta', {
  36.             name: 'author',
  37.             content: '夜雨炊烟'
  38.         }],
  39.     ],
  40.     // 当前使用的主题
  41.     "theme": "reco",
  42.     // 主题的配置信息
  43.     "themeConfig": {
  44.         // 导航栏的配置信息
  45.         "nav": [
  46.             {
  47.                 "text": "首页", // 按钮名称
  48.                 "link": "/", // 跳转链接路由
  49.                 "icon": "reco-home" // 按钮前置图标
  50.             },
  51.             {
  52.                 "text": "时间线",
  53.                 "link": "/timeline/",
  54.                 "icon": "reco-date"
  55.             },
  56.             {
  57.                 "text": "Docs",
  58.                 "icon": "reco-message",
  59.                 "items": [
  60.                     {
  61.                         "text": "vuepress-reco",
  62.                         "link": "/docs/theme-reco/"
  63.                     }
  64.                 ]
  65.             },
  66.             {
  67.                 "text": "关于",
  68.                 "icon": "reco-message",
  69.                 // 子菜单
  70.                 "items": [
  71.                     {
  72.                         // 子菜单中的导航按钮
  73.                         "text": "GitHub",
  74.                         "link": "https://github.com/recoluan",
  75.                         "icon": "reco-github"
  76.                     }
  77.                 ]
  78.             }
  79.         ],
  80.         // 侧边栏的导航信息
  81.         "sidebar": {
  82.             "/docs/theme-reco/": [
  83.                 {
  84.                     title: '一些文件',    // 标题信息
  85.                     collapsable: true,   // 是否可折叠
  86.                     children: [
  87.                         "", // 字符串对应的是README.md
  88.                         "theme", // theme.md
  89.                         "plugin", // plugin.md
  90.                         "api" // api.md
  91.                     ]
  92.                 }
  93.             ]
  94.         },
  95.         // 当前项目类型
  96.         "type": "blog",
  97.         // 导航栏的配置信息
  98.         "blogConfig": {
  99.             "category": {
  100.                 "location": 2, // 位置
  101.                 "text": "前端导航" // 名称
  102.             },
  103.             "tag": {
  104.                 "location": 3,
  105.                 "text": "Tag"
  106.             }
  107.         },
  108.         // 友链
  109.         "friendLink": [
  110.             {
  111.                 "title": "午后南杂",
  112.                 "desc": "Enjoy when you can, and endure when you must.",
  113.                 "email": "1156743527@qq.com",
  114.                 "link": "https://www.recoluan.com"
  115.             },
  116.             {
  117.                 "title": "vuepress-theme-reco",
  118.                 "desc": "A simple and beautiful vuepress Blog & Doc theme.",
  119.                 "avatar": "https://vuepress-theme-reco.recoluan.com/icon_vuepress_reco.png",
  120.                 "link": "https://vuepress-theme-reco.recoluan.com"
  121.             }
  122.         ],
  123.         // 左侧logo图片
  124.         "logo": "/logo.png",
  125.         // 属性是否有搜索功能
  126.         "search": true,
  127.         //
  128.         "searchMaxSuggestions": 10,
  129.         // 最后一次更新时间文案
  130.         "lastUpdated": "Last Updated",
  131.         // 作者名称
  132.         "author": "夜雨炊烟",
  133.         // 头像
  134.         "authorAvatar": "/avatar.png",
  135.         "record": "xxxx", // ICP备案号
  136.         // "recordLink"： // ICP 备案指向的链接
  137.         // "cyberSecurityRecord"：// 公安部备案文案
  138.         // "cyberSecurityLink"：// 公安部备案指向链接
  139.         // 博客的开始时间
  140.         "startYear": "2022"
  141.     },
  142.     "markdown": {
  143.         // 代码块显示行号
  144.         "lineNumbers": true
  145.     }
  146. }

编写文章

新增README.md文件填写内容
VuePress博客搭建教程 - 图1

部署到Github Pages

使用 Github Pages 。
那么什么是 Github Pages 呢？简单说就是 Github 提供的、用于搭建个人网站的静态站点托管服务。很多人用它搭建个人博客。这种方式的好处是免费、方便，坏处是速度可能会有些慢、不能被国内的搜索引擎收录。

  • 首先新建仓库： git@github.com:zhanghaoju/vblogs.git ，关联本地代码到远程仓库
  • 在根目录创建一个deploy.sh 文件 ```shell

    !/usr/bin/env sh

确保脚本抛出遇到的错误

set -e

生成静态文件

npm run build

进入生成的文件夹

cd .vuepress/dist

如果是发布到自定义域名

echo ‘www.yourwebsite.com’ > CNAME

git init git add -A git commit -m ‘deploy’

如果你想要部署到 https://USERNAME.github.io

git push -f git@github.com:USERNAME/vblogs.git master:gh-pages

cd -

  2. - 修改`package.json`文件
  3. ```json
  4. "scripts": {
  5.     "start": "vuepress dev .",
  6.     "dev": "vuepress dev . --open --host \"localhost\"",
  7.     "build": "vuepress build .",
  8.     "deploy": "bash deploy.sh"
  9.   },