二哥的小破站升级了！

2022-03-21 本文已影响0人沉默王二

大家好，我是二哥呀！

二哥的小破站《Java 程序员进阶之路》之前是用 docsify 生成的，界面我觉得非常的清爽、干净和漂亮，但遗憾的是 docsify 生成的静态网站没有 SEO，于是我就想找一个有 SEO 功能的静态网站搭建神器对小破站做一次升级。

好朋友 Guide 哥推荐了 VuePress，说非常的不错，SEO 能力算是静态网站里面最强的了。那说干就干，二哥就花了一周的时间对《Java 程序员进阶之路》做了一次重要的升级，除了使用 VuePress 建站，还增加了大量新的内容，整个小破站的学习价值又拔高了一大截。

一、关于 VuePress

VuePress 由两部分组成，一部分是静态网站生成器，一部分是默认主题，诞生的初衷是为了增强 Vue 的文档需求。

由于 VuePress 生成页面都带了预渲染好的 HTML，所以也就具有非常好的加载性能和搜索引擎优化，也就是我非常看重的 SEO 能力。

二、实战 VuePress

第一步，创建目录并初始化

mkdir vuepress
yarn init

为了不破坏原来 docsify 的目录结构，我是在 docsify 的目录下重新添加了一个 VuePress 的工作目录。

第二步，将 VuePress 安装为本地依赖

yarn add -D vuepress@next

第三步，编辑 package.json 配置 VuePress 的构建目录

{
  "name": "vuepress-starter",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "devDependencies": {
    "vuepress": "^2.0.0-beta.36"
  },
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }
}

第四步，编辑 .gitignore，忽略临时目录和缓存目录

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

第五步，复制 docsify 原有的 readme.md 到 VuePress 的工作目录，并启动 VuePress 的本地服务

yarn docs:dev

第六步，在浏览器中输入 http://localhost:8080 进行预览

到此为止，一个本地可用的 VuePress 知识库网站就搭建好了，是不是非常简单？

三、实战 vuepress-theme-hope

由于 VuePress 并不会注入 meta 标签做 SEO 优化，也不会生成 Sitemap 帮助搜索引擎索引文档内容，所以我选择了 vuepress-theme-hope 这款主题来对 VuePress 进行强化。

vuepress-theme-hope 并不是一款单纯的 VuePress 主题，它可以单独拿来使用，并且里面也包含了十多个同样功能完善且强大的插件，比如说博客功能。

可以按照文章的分类、标签对文章进行归类，这样小伙伴们在学习的时候就更方便了。

启用 vuepress-theme-hope 主题也非常简单，只需要执行一行命令即可。

npm init vuepress-theme-hope@next docs

docs 为文档的目录，这里放 md 文件；
VuePress 的配置文件会在 docs/.vuepress 目录里生成；
node_modules 为 VuePress 的临时插件目录；
为了保证原来的 docsify 版静态网站也能同时运行，我把 docsify 和 VuePress 放在了一起，如果你只需要 VuePress 的话，完全可以新建一个空的目录。

如果你在执行这条 npm init vuepress-theme-hope@next docs 命令过程中没有出错，那么 vuepress-theme-hope 主题就会给你生成一个临时的预览网站，就像下面这样子。

接下来，就可以按照我们想要的风格来设计整体网站的结构，主要操作的文件有：

docs/readme.md：VuePress默认的首页加载文件。
docs/home.md：VuePress默认的「开始阅读」文件。

docs/.vuepress/config.ts： VuePress默认加载配置的 root 文件。比如说 iconfont 图标样式表可以在这里配置。

export default defineHopeConfig({
  base: "/",
  // build 目录，静态 HTML 会生成在这个目录下
  dest: "./dist",
  head: [
    [
      "link",
      {
        rel: "stylesheet",
        href: "//at.alicdn.com/t/font_3180624_bk5smenwss.css",
      },
    ],
  ],

docs/.vuepress/navbar.ts：VuePress默认加载的导航栏文件。代码示例如下所示：

import { defineNavbarConfig } from "vuepress-theme-hope";
export default defineNavbarConfig([
  { 
    text: "进阶之路", 
    icon: "lujing", 
    link: "/home.md" 
  },

docs/.vuepress/sidebar.ts：VuePress默认加载侧边栏文件。代码示例如下所示：

import { defineSidebarConfig } from "vuepress-theme-hope";
export const sidebarConfig = defineSidebarConfig({
  "/nicearticle/": ["readme.md"],
  "/xuexiluxian/": [
    {
      text: "Java学习路线",
      icon: "java",
      prefix: "java/",
      collapsable: true,
      children: [
        {
          text: "并发编程学习路线",
          icon: "duoxiancheng",
          link: "thread.md",
        },
      ],
    },

docs/.vuepress/themeConfig.ts：VuePress默认加载的主题文件。

比如说暗黑模式、页脚 footer、文章展示页的配置项、博客的描述等，都可以在这里配置。

  darkmode: "switch",
  // navbar
  navbar: navbar,
  // sidebar
  sidebar: sidebarConfig,
  footer: '<a href="https://beian.miit.gov.cn/" target="_blank">豫ICP备2021038026号-1</a>',
  displayFooter: true,
  pageInfo: ["Author", "Original", "Date", "Category", "Tag", "ReadingTime"],
  blog: {
    intro: "/about-the-author/",
    sidebarDisplay: "mobile",
    autoExcerpt: true,
    avatar: "/assets/icon/itwanger-282.png",
    description:"没有什么使我停留——除了目的，纵然岸旁有玫瑰、有绿荫、有宁静的港湾，我是不系之舟。",
    medias: {
      Zhihu: "https://www.zhihu.com/people/cmower",
      Github: "https://github.com/itwanger",
      Gitee: "https://gitee.com/itwanger",
    },
  },

比如说 giscus 评论插件也可以在这里配置。

    comment: {
      type: "giscus",
      repo :"itwanger/tobeb",
      repoId:"R_kgDssg",
      category:"Announcements",
      categoryId:"DIC_kwDs4COJOx",
      mapping:"pathname",
      inputPositio:"bottom"
    },

配置完成后就可以发评论了，只不过需要利用 GitHub 仓库，有时候反应比较慢。

四、部署小破站

本地预览没毛病后，剩下的就是同步到 GitHub 仓库，然后利用 Git 再同步到阿里云服务器上，之后通过 yarn docs:build 在服务器上生成静态文件，再通过 Nginx 配置一下反向代理，就可以正式启用小破站了。

贴一下 Nginx 配置代码吧，可能有些小伙伴需要参考：

// http 转 https
server {
    listen       80;
    server_name  docsify.tobebetterjavaer.com tobebetterjavaer.com *.tobebetterjavaer.com;
    return 301 https://$server_name$request_uri;
}
// VuePress
server {
    listen       443 ssl;
    server_name  tobebetterjavaer.com;
    
    root   /home/www/toBeBetterJavaer/dist;
    index  index.html index.htm;
}
// docsify
server {
    listen       443 ssl;
    server_name  docsify.tobebetterjavaer.com;

    ssl_certificate      /home/docsify.tobebetterjavaer.com_cert_chain.pem;
    ssl_certificate_key  /homenx/docsify.tobebetterjavaer.com_key.key;
    
    root   /home/www/toBeBetterJavaer;
    index  index.html index.htm;
}

VuePress 版访问地址：https://tobebetterjavaer.com

docsify 版访问地址：https://docsify.tobebetterjavaer.com

这是两版的首页对比，伯仲之间，VuePress 强就强在了 SEO 上面，让 SEO 收录就是我此次升级小破站的主要诉求。

当然了，这个过程中还涉及到了很多琐碎的事情，比如说子域名解析啊、子域名 HTTPS 证书啊，服务器上构建 VuePress 啊，踩了不少坑，后面有时间的话，我再给大家一一分享。

借这个机会，再次感谢一下赞赏过二哥小破站的伙伴们。

好了，这期就先聊到这里吧。感冒了，浑身难受，希望小伙伴们都能有一个愉快的周末，倍棒的身体。

二哥的小破站升级了！

一、关于 VuePress

二、实战 VuePress

三、实战 vuepress-theme-hope

四、部署小破站

猜你喜欢

热点阅读