携手创造，共同成长！这是我参与「日新计划 8 月更文应战」的第2天，点击查看活动详情

前言

最近在阅览冴羽教师的文章时，对个人博客很感兴趣，于是试着自己建立了一遍，写了这篇文章记录一下建立的根本流程，期望对大家有所协助。

原文链接：一篇带你用 VuePress + Github Pages 建立博客

1. 本地建立

  1. 创立并进入一个新目录
mkdir vuepress-starter
cd vuepress-starter
  1. 运用你喜爱的包管理器进行初始化
npm init -y
  1. 将 VuePress 装置为本地依靠
npm install -D vuepress
  1. 创立你的第一篇文档
mkdir docs
echo '# Hello VuePress' > docs/README.md
  1. 在 package.json 中增加一些 scripts 
"scripts": {
  "docs:dev": "vuepress dev docs",
  "docs:build": "vuepress build docs"
}
  1. 在本地启动服务器
npm run docs:dev

VuePress 会在 http://localhost:8080 启动一个热重载的开发服务器

这时可能会呈现文字乱码情况，需要把 README.md 的编码格局改为 UTF-8

2. 根底装备

在 docs 文件夹下增加 .vuepress目录，一切 VuePress 相关的文件都会被放在这儿。在.vuepress文件夹下增加config.js，装备网站的标题和描绘，便利 SEO，此刻你的目录结构可能是这样：

|-- docs',
    |-- README.md',
    |-- .vuepress',
        |-- config.js'

config.js 文件的内容如下(标题和描绘自定义)：

module.exports = {
  title: '我的博客',
  description: 'XXX'
}

3. 增加导航栏

咱们现在在主页的右上角增加导航栏，修正 config.js：

module.exports = {
  title: '我的博客',
  description: 'XXX',
  themeConfig: {
    nav: [
      { text: "主页", link: "/" },
      {
        text: "codinglin 的博客",
        items: [
          { text: "", link: "https:///user/726107228492253" },
          { text: "Github", link: "https://github.com/coding-lin" }
        ]
      }
    ]
  }
}

此刻界面如下：

手把手教你用 VuePress + GitHub Pages 建立个人博客

4. 增加侧边栏

现在咱们增加一些 md 文档，内容自行增加，文档的目录结构如下：

|-- docs',
    |-- README.md',
    |-- .vuepress',
        |-- config.js'
    |-- handbook
        |-- 1.md 
        |-- 2.md

咱们在config.js增加如下装备：

module.exports = {
  title: '我的博客',
  description: 'XXX',
  themeConfig: {
    nav: [...],
    sidebar: [
      {
        title: "欢迎学习",
        path: "/",
        collapsable: false,  // 是否折叠
        children: [{ title: "博客简介", path: "/" }],
      },
      {
        title: "根底篇",
        path: "/handbook/1",
        collapsable: true,
        children: [
          { title: "第一篇", path: "/handbook/1" },
          { title: "第二篇", path: "/handbook/2" },
        ]
      } 
    ]
  }
}

此刻页面如下：

手把手教你用 VuePress + GitHub Pages 建立个人博客

5. 更换主题

现在根本的目录和导航功用现已完成，假如还想要 loading作用、切换动画、模式切换（暗黑模式）、返回顶部、评论等功用呢，为了简化开发本钱，咱们能够直接运用主题，我运用的主题是vuepress-theme-reco：

现在咱们装置 vuepress-theme-reco：

npm install vuepress-theme-reco --save-dev

然后在config.js中引证该主题：

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

装备好之后，能够看到自己的博客网站新增了一些功用，例如模式切换：

手把手教你用 VuePress + GitHub Pages 建立个人博客

6. 增加文章信息

咱们会发现，一篇文章居然呈现了两遍标题，这是由于这个主题主动提取了第一个大标题作为本文的标题，咱们能够在每篇文章的 md 文件中增加一些信息修正：

---
title: Hello VuePress
author: codinglin
date: '2022-8-28'
---

作用如下：

手把手教你用 VuePress + GitHub Pages 建立个人博客

7. 设置语言

文章时刻，咱们写入的格局为2022-8-28，但是显示的是8/28/2022，这是由于 VuePress 默许的 lang 为en-US，咱们修正一下 config.js：

module.exports = {
  ...
  locales: {
    '/': {
      lang: 'zh-CN'
    }
  },
  ...
}

能够发现时刻格局发生了变化：

手把手教你用 VuePress + GitHub Pages 建立个人博客

8. 敞开目录结构

在本来的主题里，咱们发现每篇文章的目录结构在左边，而 vuepress-theme-reco 将原有的侧边栏的中的多级标题移出，生成子侧边栏，放在了页面的右侧，假如你要全局敞开，可在 config.js 中设置敞开：

module.exports = {
  ...
  themeConfig: {
    subSidebar: 'auto',
  },
  ...
}

9. 修正主题色彩

VuePress 基于 Vue，所以主题色用的是 Vue 的绿色，你也能够将主题色彩修正为你自己喜爱的色彩，你能够创立一个.vuepress/styles/palette.styl文件，文件代码如下：

$accentColor = #3178c6

作用如下：

手把手教你用 VuePress + GitHub Pages 建立个人博客

更多色彩的修正请参考 palette.styl

10. 自定义修正款式

咱们发现用作着重的文字色彩比较昏暗，在暗黑模式下看不清楚，如何修正这个文字的色彩和背景色呢？

你能够创立一个.vuepress/styles/index.styl文件，文件代码如下：

.dark .content__default code {
  background-color: rgba(58,58,92,0.7);
  color: #fff;
}

假如想要躲藏每篇文章的标题、作者、时刻呢，其实也是相似的方式：

.page .page-title {
  display: none;
}

作用如下：

手把手教你用 VuePress + GitHub Pages 建立个人博客

11. 布置

到这儿，咱们的博客网站根本建立好了，接下来咱们将它布置到 Github Pages 上。咱们首先在 Github 上新建一个库房，这儿我取名为：interview。

相应地，咱们需要在config.js增加一个base路径装备：

module.exports = {
  ...
  // 和库房名相同
  base: '/interview/',
  ...
}

终究的 config.js 的内容为：

module.exports = {
  title: '我的博客',
  description: 'XXX',
  theme: 'reco',
  base: '/interview/',
  locales: {
    '/': {
      lang: 'zh-CN'
    }
  },
  themeConfig: {
    subSidebar: 'auto',
    nav: [
      { text: "主页", link: "/" },
      {
        text: "codinglin 的博客",
        items: [
          { text: "", link: "https:///user/726107228492253" },
          { text: "Github", link: "https://github.com/coding-lin" }
        ]
      }
    ],
    sidebar: [
      {
        title: "欢迎学习",
        path: "/",
        collapsable: false,  // 是否折叠
        children: [{ title: "博客简介", path: "/" }],
      },
      {
        title: "根底篇",
        path: "/handbook/1",
        collapsable: true,
        children: [
          { title: "第一篇", path: "/handbook/1" },
          { title: "第二篇", path: "/handbook/2" },
        ]
      } 
    ]
  }
}

然后咱们在项目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'
# 假如发布到 https://<USERNAME>.github.io/<REPO>
git push -f git@github.com:XXX/XXX.git master:gh-pages
cd -

新建一个终端，挑选 Git Bash，进入主目录，并执行sh deploy.sh

手把手教你用 VuePress + GitHub Pages 建立个人博客

cd vuepress-starter
sh deploy.sh

项目就会开端构建，然后上传到长途库房上。

咱们能够在库房的Settings -> Pages中看到最终的地址：

手把手教你用 VuePress + GitHub Pages 建立个人博客

最终生成的地址：coding-lin.github.io/interview/

至此，咱们完成了 VuePress 和 Github Pages 的布置。

假如大家想要丰厚自己的个人博客的话，能够去装置一些插件，地址如下：建立 VuePress 博客，你可能会用到的一些插件

最终

以上就是运用 VuePress + GitHub Pages 建立个人博客的大致流程，假如觉得这篇文章对你有协助的话，不要忘了点赞哟~