二哥的小破站升级了!
大家好,我是二哥呀!
二哥的小破站《Java 程序员进阶之路》之前是用 docsify 生成的,界面我觉得非常的清爽、干净和漂亮,但遗憾的是 docsify 生成的静态网站没有 SEO,于是我就想找一个有 SEO 功能的静态网站搭建神器对小破站做一次升级。
好朋友 Guide 哥推荐了 VuePress,说非常的不错,SEO 能力算是静态网站里面最强的了。那说干就干,二哥就花了一周的时间对《Java 程序员进阶之路》做了一次重要的升级,除了使用 VuePress 建站,还增加了大量新的内容,整个小破站的学习价值又拔高了一大截。
一、关于 VuePressVuePress 由两部分组成,一部分是静态网站生成器,一部分是默认主题,诞生的初衷是为了增强 Vue 的文档需求。
由于 VuePress 生成页面都带了预渲染好的 HTML,所以也就具有非常好的加载性能和搜索引擎优化,也就是我非常看重的 SEO 能力。
二、实战 VuePress第一步,创建目录并初始化
mkdirvuepressyarninit
为了不破坏原来 docsify 的目录结构,我是在 docsify 的目录下重新添加了一个 VuePress 的工作目录。
第二步,将 VuePress 安装为本地依赖
yarnadd-Dvuepress@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":"vuepressdevdocs","docs:build":"vuepressbuilddocs"}}
第四步,编辑 .gitignore,忽略临时目录和缓存目录
echo"node_modules">>.gitignoreecho".temp">>.gitignoreecho".cache">>.gitignore
第五步,复制 docsify 原有的 readme.md 到 VuePress 的工作目录,并启动 VuePress 的本地服务
yarndocs:dev
第六步,在浏览器中输入 http://localhost:8080进行预览
到此为止,一个本地可用的 VuePress 知识库网站就搭建好了,是不是非常简单?
三、实战 vuepress-theme-hope由于 VuePress 并不会注入 meta 标签做 SEO 优化,也不会生成 Sitemap 帮助搜索引擎索引文档内容,所以我选择了 vuepress-theme-hope 这款主题来对 VuePress 进行强化。
vuepress-theme-hope 并不是一款单纯的 VuePress 主题,它可以单独拿来使用,并且里面也包含了十多个同样功能完善且强大的插件,比如说博客功能。
可以按照文章的分类、标签对文章进行归类,这样小伙伴们在学习的时候就更方便了。
启用 vuepress-theme-hope 主题也非常简单,只需要执行一行命令即可。
npminitvuepress-theme-hope@nextdocsdocs 为文档的目录,这里放 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 图标样式表可以在这里配置。exportdefaultdefineHopeConfig({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";exportdefaultdefineNavbarConfig([{text:"进阶之路",icon:"lujing",link:"/home.md"},docs/.vuepress/sidebar.ts:VuePress默认加载侧边栏文件。代码示例如下所示:
import{defineSidebarConfig}from"vuepress-theme-hope";exportconstsidebarConfig=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",//navbarnavbar:navbar,//sidebarsidebar:sidebarConfig,footer:"豫ICP备2021038026号-1",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转httpsserver{listen80;server_namedocsify.tobebetterjavaer.comtobebetterjavaer.com*.tobebetterjavaer.com;return301https://$server_name$request_uri;}//VuePressserver{listen443ssl;server_nametobebetterjavaer.com;root/home/www/toBeBetterJavaer/dist;indexindex.htmlindex.htm;}//docsifyserver{listen443ssl;server_namedocsify.tobebetterjavaer.com;ssl_certificate/home/docsify.tobebetterjavaer.com_cert_chain.pem;ssl_certificate_key/homenx/docsify.tobebetterjavaer.com_key.key;root/home/www/toBeBetterJavaer;indexindex.htmlindex.htm;}
VuePress 版访问地址:https://tobebetterjavaer.comdocsify 版访问地址:https://docsify.tobebetterjavaer.com
这是两版的首页对比,伯仲之间,VuePress 强就强在了 SEO 上面,让 SEO 收录就是我此次升级小破站的主要诉求。
当然了,这个过程中还涉及到了很多琐碎的事情,比如说子域名解析啊、子域名 HTTPS 证书啊,服务器上构建 VuePress 啊,踩了不少坑,后面有时间的话,我再给大家一一分享。
借这个机会,再次感谢一下赞赏过二哥小破站的伙伴们。
好了,这期就先聊到这里吧。感冒了,浑身难受,希望小伙伴们都能有一个愉快的周末,倍棒的身体。
没有什么使我停留——除了目的,纵然岸旁有玫瑰、有绿荫、有宁静的港湾,我是不系之舟。
相关阅读
-
世界热推荐:今晚7:00直播丨下一个突破...
今晚19:00,Cocos视频号直播马上点击【预约】啦↓↓↓在运营了三年... -
NFT周刊|Magic Eden宣布支持Polygon网...
Block-986在NFT这样的市场,每周都会有相当多项目起起伏伏。在过去... -
环球今亮点!头条观察 | DeFi的兴衰与...
在比特币得到机构关注之后,许多财务专家预测世界将因为加密货币的... -
重新审视合作,体育Crypto的可靠关系才能双赢
Block-987即使在体育Crypto领域,人们的目光仍然集中在FTX上。随着... -
简讯:前端单元测试,更进一步
前端测试@2022如果从2014年Jest的第一个版本发布开始计算,前端开发... -
焦点热讯:刘强东这波操作秀
近日,刘强东发布京东全员信,信中提到:自2023年1月1日起,逐步为...