关于编辑器:如何利用VuePress和GithubPage搭建一个轻量级博客

摘要: 置信每个人都想领有一个博客, 一个属于本人写作的中央，明天讲讲如何用 VuePress 和 github Github Pages 打造一个属于本人的博客，不必建站，也不必域名的轻量级博客, 要害还反对 markdown 写作, 大大提高了写作的好感度。本文首发于公众号: 散步 coding

博客地址: https://easyhappy.github.io/travel-coding/
代码地址: https://github.com/easyhappy/travel-coding

大家能够关上看看成果:

VuePress 天然不必多说，基于 Vue 的动态网站生成器，格调简洁，配置也比较简单。之所以不应用 VitePress，是因为想应用现有的主题，而 VitePress 不兼容以后 VuePress 的生态系统，至于为什么不抉择 VuePress@next，思考到还处于 Beta 阶段，等稳固后再开始迁徙。

目前我用的 node 版本是: v16.14.2, 大家在装置之前要检查一下本人的 node 版本, 太低了可能装置不了。

大家也能够看 VuePress 的官网教程: https://v2.vuepress.vuejs.org…

1、创立我的项目

mkdir vuepress-starter
cd vuepress-starter

2、初始化我的项目

git init
yarn init

3、装置 VuePress

yarn add -D vuepress

4、将上面的 script 增加到 package.json 中

{
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }
}

5、创立第一个文件

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

6、运行上面的命令启动 local server

yarn docs:dev

这时你拜访 http://localhost:8080/，如果能呈现以下界面，阐明到你曾经搭建好了博客。

7、根底配置

在 docs 目录下创立一个 .vuepress 目录，所有 VuePress 相干的文件都会被放在这里。

命令

mkdir docs/.vuepress
touch docs/.vuepress/config.js

此时你的我的项目构造可能是这样：

.
├─ docs
│  ├─ README.md
│  └─ .vuepress
│     └─ config.js
└─ package.json

6、在 .vuepress 文件夹下增加 config.js，配置网站的题目和形容，不便 SEO：

cat > docs/.vuepress/config.js

module.exports = {
  title: '散步 coding 的博客',
  description: '公众号: 散步 coding, 欢送大家关注，一个聚焦于算法、数据库、架构的公众号'
}

这个时候就能够看到网站 title 曾经变成了: 散步 coding 的博客

7、增加导航栏

咱们当初在页首的右上角增加导航栏，批改 config.js:

module.exports = {
  title: '散步 coding 的博客',
  description: '公众号: 散步 coding, 欢送大家关注，一个聚焦于算法、数据库、架构的公众号',
  themeConfig: {
    nav: [{ text: '首页', link: '/'},
      { 
          text: '散步 coding 博客', 
          items: [{ text: 'Github', link: 'https://github.com/easyhappy/travel-coding'},
              {text: '公众号', link: 'https://mp.weixin.qq.com/s/Npkk0oHEszZrUP2yRiTaSA'}
          ]
      }
    ]
  }
}

运行成果如下:

8、增加左侧边栏

当初咱们增加一些 md 文档，目前文档的目录如下：

运行以下命令

命令 1:

mkdir docs/about
cat > docs/about/brief.md
Hello 大家好，我是公众号: 散步 coding 的作者, 很快乐咱们能在这里相聚。能够关注公众号, 一起交换。

命令 2:

mkdir docs/mysql
cat >  docs/mysql/brief

一般来讲在面试当中，对于数据库相干的面试题频率呈现比拟高的几个关键词是 SQL 优化、索引、存储引擎、事务、死锁、乐观锁、乐观锁、关系型数据库和非关系数据库比照等等。把这几个点问完根本也差不多 10~20 分钟了 (个别一轮面试 1 小时左右), 根本这些能够让面试官对你的数据库常识有肯定的理解了。如果你线上运维教训, 个别也会问一些比方数据库扩容, 如何给大表加索引, 如何在业务顶峰是给一个大表增加字段等。

目前文档的目录如下：

.
├─ docs
│  ├─ README.md
│  └─ .vuepress
│     └─ config.js
 |  └─ mysql
 |        └─ brief.md
 |  └─ about
 |        └─ brief.md
 |
└─ package.json

8、设置 docs/.vuepressconfig.js sidebar 模块, 增加左侧导航栏, 实现设置如下:

module.exports = {
  title: '散步 coding 的博客',
  description: '公众号: 散步 coding, 欢送大家关注，一个聚焦于算法、数据库、架构的公众号',
  themeConfig: {
    nav: [{ text: '首页', link: '/'},
      { 
          text: '散步 coding 博客', 
          items: [{ text: 'Github', link: 'https://github.com/easyhappy/travel-coding'},
              {text: '公众号', link: 'https://mp.weixin.qq.com/s/Npkk0oHEszZrUP2yRiTaSA'}
          ]
      }
    ],
    sidebar: [
        {
          title: 'mysql',
          path: '/',
          collapsable: false, // 不折叠
          children: [{ title: "前言", path: "/mysql/brief"},
          ]
        },

        {
          title: '对于我',
          path: '/',
          collapsable: false, // 不折叠
          children: [{ title: "公众号", path: "/about/brief"},
          ]
        }
      ]
  }
}

效果图如下:

9、设置博客主题

yarn add vuepress-theme-reco

将以下代码放到 config.js 中

module.exports = {
  // ...
  theme: 'reco'
  // ...
}

就能够自主设置显示模式了。

9、此时根本实现了 VuePress 的搭建, 上面就是将博客公布到 Github Page 上。咱们在 Github 上新建一个仓库，这里我获得仓库名为：travel-coding。

module.exports = {
      // 路径名为 "/< 您建的 REPO 名字 >/"
    base: '/travel-coding/',
      //...
}

10、将上面增加一些文件或者目录放到.gitignore 文件中.

echo 'node_modules' >> .gitignore
echo '.temp' >> .gitignore
echo '.cache' >> .gitignore

11、而后咱们在我的项目 vuepress-starter 目录下建设一个脚本文件：deploy.sh，留神批改一下对应的用户名和仓库名：

#!/usr/bin/env sh

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

# 生成动态文件
npm run docs:build

# 进入生成的文件夹
cd docs/.vuepress/dist

git init
git add -A
git commit -m 'deploy'

### imporant 留神替换 如果公布到 https://<USERNAME>.github.io/<REPO>
git push -f git@github.com:easyhappy/travel-coding.git master:gh-pages

cd -

12、运行命令, 会将编译好的博客文件, push 到 github 我的项目的 gh-pages

sh deploy.sh

13、在我的项目的 Settings -> Pages 就能够看到对应的博客地址，也能够本人设置根目录和自定义域名

我最初生成的博客地址: https://easyhappy.github.io/travel-coding/
代码地址: https://github.com/easyhappy/travel-coding

到此为止, 咱们就实现了 VuePress 和 Github Pages 的部署。

让咱们一起散步 coding, enjoy your self.

关于编辑器:如何利用VuePress和GithubPage搭建一个轻量级博客

博客地址如下：

VuePress

装置过程