用markdown搭建个人博客
# 技术方案选择
- 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 ---
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15key: 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