每一个程序员都应该有写博客：使用VuePress搭建一个博客系统

你好啊，我是大阳。一个撸码近十年的程序员。

不知道你是否有这样的职场困惑：职场三年没有任何进步；学了很多，毛用没有；学了，过了一年全都忘记了，更不知道怎么把已经学到的知识迁移到其他领域或者行业。

也就是搬砖多年，一直都没有在自己的专业上建立完备的知识体系。

时间和知识的碎片化、工作996、职场pua都在阻止我们系统化地学习、更别说沉淀为知识体系啦。

为了能够对抗这些外部因素，我建议你写博客。强制输出倒逼输入、随时记录学习历程夯实脚步、不断实践形成技能树。

而作为一个程序员，形成个人知识体系，对抗危机和忧虑，可以使用下面的方法：

建立自己的技能树
技术分享
技术博客
建立自己的代码库
开源项目贡献

tixi.png

下面我们来使用VuePress来搭建一个博客系统。我这里使用的是vuepress社区主题vuepress-theme-hope（一款集成了众多插件的vuepress主题）。

## vuepress是如何工作的？

事实上，一个 VuePress 网站是一个由 Vue、Vue Router和 webpack驱动的单页应用。如果你以前使用过 Vue 的话，当你在开发一个自定义主题的时候，你会感受到非常熟悉的开发体验，你甚至可以使用 Vue DevTools 去调试你的自定义主题。

在构建时，我们会为应用创建一个服务端渲染（SSR）的版本，然后通过虚拟访问每一条路径来渲染对应的HTML。这种做法的灵感来源于Nuxt的 nuxt generate 命令，以及其他的一些项目，比如 Gatsby。

vuepress 一些特性

为技术文档而优化的内置Markdown拓展
在Markdown文件中使用Vue组件的能力
Vue驱动的自定义主题系统
自动生成Service Worker(支持PWA)
Google Analytics集成
基于Git的"最后更新时间"
多语言支持
响应式布局
天然的SEO能力，对比Docsify这种前端渲染HTML要好很多

1. 安装

npm init vuepress-theme-hope@next docs

2. 配置

根据提示进行配置,可以启动自带demo

3. 配置vuepress工作目录

主配置文件config.ts

import { defineHopeConfig } from "vuepress-theme-hope";
import themeConfig from "./themeConfig";

export default defineHopeConfig({
  port: 9927,
  title: "大阳说",
  description: "一个程序员的持续进化",
  dest: "./dist",
  head: [
    // 添加百度统计
    ["script", {},
      `var _hmt = _hmt || [];
      (function() {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?906138b9aada58204bf5d1a51d54abc9";
        var s = document.getElementsByTagName("script")[0]; 
        s.parentNode.insertBefore(hm, s);
      })();`
    ],["link",{
        rel: "stylesheet",
        href: "/fonticon.css",
      },
    ],
    
  ],

  locales: {
    "/": {
      lang: "zh-CN"
    },
  },

  themeConfig,
});

主题配置：

import { defineThemeConfig } from "vuepress-theme-hope";
import navbar from "./navbar";
import sidebar from "./sidebar";

export default defineThemeConfig({
  themeColor: false,
  fullscreen: false,
  darkmode: "switch",
  locales: {
    "/": {
      lang: "zh",
    },
  },
  hostname: "https://dayangshuo.cn",
  author: {
    name: "大阳",
    url: "https://dayangshuo.cn",
  },
  iconPrefix: "iconfont icon-",
  logo: "/dayang.jpg",
  repo: "https://github.com/dayang9927",
  docsDir: "demo/src",
  // navbar
  navbar: navbar,
  // sidebar
  sidebar: false,
  footer: "备案",
  displayFooter: true,
  pure: true,
  pageInfo: ["Author", "Original", "Date", "Category", "Tag", "ReadingTime"],
  blog: {
    description: "一个程序员的持续进化",
    intro: "/intro.html",
    medias: {
      Email: "dayang9927@163.com",
      GitHub: "https://github.com/dayang9927",
      Zhihu: "https://www.zhihu.com/people/da-yang-12-48",
    },
  },

  encrypt: {
    config: {
      "/guide/encrypt.html": ["dayangshuo.cn"],
    },
  },

  plugins: {

    search: {
      locales: {
        "/": {
          placeholder: "搜索",
        },
      },
    },

    blog: {
      autoExcerpt: true,
    },

    // 你也可以使用 Waline
    comment: {
      type: "giscus",
      repo: "vuepress-theme-hope/giscus-discussions",
      repoId: "R_kgDOG_Pt2A",
      category: "Announcements",
      categoryId: "DIC_kwDOG_Pt2M4COD69",
    },

    mdEnhance: {
      enableAll: true,
      presentation: {
        plugins: ["highlight", "math", "search", "notes", "zoom"],
      },
    },
    
  },
});

palette.scss

$themeColor: #3498DB;
$sidebarWidth: 20rem;
$sidebarMobileWidth: 16rem;
.navbar .nav-item > .nav-link::after {
    background-color: #3498DB;
}