技术方案选择

• Jekyll: https://github.com/jekyll/jekyll (opens new window)
• VuePress，据说模板比较好看。一个大神的blog：https://artiely.gitee.io/ (opens new window)
• docsify/docute, 方便易用，但是不支持SEO
• hexo

这篇文章开头的故事不错

https://www.cnblogs.com/wukongnotnull/archive/2021/09/01/15216123.html (opens new window)

个个身怀绝技，搭建个人博客，最想推荐的10大框架，强烈建议收藏

凌晨 12 点，我有一位朋友，在电话里，气愤地说他的博客文章又被平台删掉了。

我很好奇为什么，原来是他在某平台发布了一篇技术类原创文章，读者都比较喜欢。后来，他把这篇文章转发到另外一个平台。可是，偏偏不巧，这两个平台彼此是商业竞争关系。不允许一篇文章在 2 个平台发布，文章被删后，把我的朋友气得上蹿下跳。

我听完后，却很平静。这就是资本垄断的力量，很多自媒体平台都在追求一家独大，卧榻之下，岂容他人酣睡。彼此的恶性竞争，早已经不在乎用户的感受了。

创作者辛苦熬肝数月，文章却遭受平台审核不通过，或者已发布的文章竟被无情的插入各种广告。文章的链接或者二维码，转发到其他平台竟被无情封杀。或是文章要不过不了审，要不直接被删除。

对他表示同情的同时，我不经深思，是否有办法，在互联网上自由的创作，自由的发声呢？破釜沉舟，打破枷锁，我们失去的只有锁链。

要想彻底解决这一难题，只能运用个人编程技术，逃离各大自媒体平台，自建博客网站。

这篇文章推荐VuePress，如果会vue的话应该不错

https://blog.csdn.net/wzc_coder/article/details/108480672

• Vue 驱动,强大的插件生态系统,官方文档详细

• 支持搜索引擎优化(SEO),单页面应用,按需加载,支持 PWA(无网络情况下照样能访问)

• 为技术文档而优化内置 markdown 拓展

• 在md(Markdown) 中可以写vue组件,甚至写原生JS,Ts,HTML,CSS`,无任何压力阻碍,更加的灵活,可定制化

• 可以自定义开发主题,任意修改,网站风格不在千篇一律

• 支持 PWA(自动生成 Service Worker),像 app 应用一样添加到手机桌面上

• 集成了 Google Analytics 集成,也支持百度统计

• 基于 git 的最后上传更新时间

• 支持国际化,多语言,只需配置一下就好

• 响应式布局,手机端,PC 端网站友好的用户体验

• 远不止于用来搭建博客,可以开发公司企业官网等网站应用,也可结合boostrap,Element UI等技术进行二次开发,构建更复杂的应用....

最终选择-VuePress

最终选择了VuePress, 主题为：https://github.com/xugaoyi/vuepress-theme-vdoing

vuepress-theme-vdoing食用方法

参考

• vuepress-theme-vdoing文档：https://doc.xugaoyi.com/
• VuePress官方文档： https://vuepress.vuejs.org/zh/guide/

导航栏用法

这个主题非常棒，不过导航栏的说明比较少，下面是具体的用法。

• 按照官方文档，先clone vuepress-theme-vdoing这个项目，然后在里面修改。

• 一级目录导航页面和url： 假设你有三个主题：Linux, C++, Python 首先给这三个主题创建三个目录：docs/10.Linux、docs/20.C++、docs/30.Python， 相关的文章就放在这三个文件夹下 然后要生成博客首页这三个主题的导航，需要在docs/00.目录页/文件夹下创建Linux.md, C++.md, Python.md，然后进行修改。比如Linux.md：

  ---
  pageComponent: 
    name: Catalogue
    data: 
      key: 10.Linux
      imgUrl: /img/web.png
      description: Linux内存、系统、链接、优化等
  title: Linux
  date: 2020-03-11 21:50:53
  permalink: /linux
  sidebar: true
  article: false
  comment: false
  editLink: false
  ---
  

  • key: 10.Linux 表示该一级目录为docs/10.Linux，在下面放你创作的markdown文章。
  • name: Catalogue 这个地方不要改。
  • permalink: /linux 该一级目录的url
  • permalink在所有md文件中不要重复。比如docs/90.关于/0.1关于.md中定义了permalink:/about, 那么就不需要在docs/00.目录页/里面再加关于的url了。

• 顶部导航栏 在docs\.vuepress\config\nav.js中设置顶部导航栏。其中的url就是上面permalink设置的url