时间:2023-07-25 00:21:01 | 来源:网站运营
时间:2023-07-25 00:21:01 来源:网站运营
手把手教你用vuepress搭建网站(1):jekyll
,Hexo
,GitBook
,Nuxt
,Docsify/Docute
,以及现在的vuepress
,而不久前尤大又多了个兄弟vitePress
,它们都是一种静态网站生成器,各有特点,没有好坏,都有自己适宜的应用场景Github
自带的,您不用部署静态页面,您只要往 GitHub
上推 md
文件就能产生 blog
md
文件多了之后,排序是一个很头疼的问题,纯体力手工劳动,无法实现自动化,速度很是极具考验jekyll
搭建的,但是后来因为管理确实麻烦,就没打理了的 f="http://jekyllcn.com/">Jekyll 官方文档
Jekyll
要先进一点,先生成文件,在部署Node.js
的静态网站生成器IT
的小伙伴,也能辨别出来md
若出现错误,编译会出错,配置的不是特别灵活 ref="https://hexo.io/">Hexo 官方文档
Vue
驱动的 官方团队专注于打造一个商业产品,而并非开源工具Vue
,在运行时驱动Docsify
由于只用于解析Markdown
文件并生成网站,不会生成静态 html
文件,所以它是不利于搜索引擎,百度,谷歌等是难以被收录的,即使做了网站统计,也很爬取到你的内容,但是简单,你只需专注 md 编写就可以Docute
,是Docsify
的升级,没有构建过程,将 md
文件呈现为单页面应用程序,会生成静态HTML
,对 SEO
很友好,利于百度蜘蛛的抓取Docsify
官方文档,SSR
服务端渲染框架,适合构建复杂的系统应用程序,对于开发人员要求是有门槛的,如果自己只专注于内容创作,而耗费精力去搭建一个静态博客,个人觉得,有种大材小用gitBook
> Docsify/Docute
= vuepress
= HEXO
> Jekyll
Jekyll
== Docsify
< Docute
< Hexo
< vuepress
,其中Jekyll
和 Docsify
配置是最简单的,如果只用于专注内容创作,挺合适的,但是功能很弱,拓展性差seo
上:VuePress
是最好的,虽然 docsify
,docute
都是基于 vue
,但是他们是在运行时解析,而 vuepress
是预先解析 HTML
,体验上会更好,而用Docsify
搭建的网站,是很难被浏览器,搜索引擎录取的,百度,谷歌抓取不到,无人问津状况Vuepress
更加灵活,可实现定制化,网站风格并非千篇一律,熟悉Vue
组件化开发的,上手也不难md(Markdown)`` 中可以写
vue组件,甚至写原生
JS,
Ts,
HTML,
CSS`,无任何压力阻碍,更加的灵活,可定制化PWA
(自动生成 Service Worker
),像 app
应用一样添加到手机桌面上VuePress
版本并没有支持 typescript
,并且没有提供类型定义,但如果想要用TS
,可以安装vuepress-plugin-typescript
插件,它提供了在 VuePress
中使用 typescript
的部分能力。如果你想获取到正确的类型定义,你可以配合 vuepress-types
一起使用vuepress-types
作为VuePress
的类型定义包,还处于实验阶段vuepress-plugin-typescript
使用文档,可以去尝试一下,这个不仅仅可以写Ts,在md
也可以写TypeScript
VuePress
搭建网站的过程中,从零开始,一行行代码的配置,编写,以及考虑代码模块化的拆分,维护性,可实现按需定制化,到最终部署上线,自定义域名等,在这个过程中,踩了很多坑VuePress
的 API
琳郎满目,对于新手小白,的确眼花缭乱,不知从何看起,配着配着就晕了的VuePress
的配置的确复杂,比较零散,但并非令人望而却步,一旦你掌握了套路后,就会欣赏它的独特,配置选项虽然多,但是它的结构非常清晰NodeJs
,并安装到本地,下一步,下一步,即可安装NodeJs
是否安装成功,可在命令行终端输入node -v
,同时查看一下 npm
的版本npm -v
(在安装 Node
完后,npm
是自动就安装上了的,集成在了Node
运行坏境里)C:/Users/itclancoder>node -vv12.18.0C:/Users/itclancoder>npm -v6.14.4
警告git bash
:用于向 github 提交代码,虽然cmd或者power Shell都可以,但还是建议使用git bashmarkdwon
语法,不熟悉也没有关系,后续都是用它来写文档,五分钟立马就可以上手,可前往ef="https://markdown-it.github.io/">在线练习 markdonw 语法markdown
,markdown Preview
插件,也可下载安装Typora软件到本地编写mdcmd/git bash
)终端下全局安装vuepress
yarn global add vuepress # 或者:npm install -g vuepress 或者cnpm install -g vuepress
警告yarn
安装,需要先全局安装 yarn(npm install -g yarn),yarn
使用官方文档npm
全局安装,请确保你的 Node.js
版本 >= 8webpack 3.x
,推荐使用 Yarn
而不是npm
来安装VuePress
。因为在这种情形下,npm
会生成错误的依赖树mkdir itclan
,这个是文件夹名字是任意的mkdir itclancd itclan
进入itclan
文件夹后,在cmd
或git bash
终端下,使用npm init -y
,或yarn init -y
初始化,会自动生成一个package.json
文件yarn init -y 或 npm init -y
经过yarn init -y
后,会生成一个package.json
文件,内容如下所示{ "name": "itclan", "version": "1.0.0", "main": "index.js", "license": "MIT",}
紧接着,在 package.json
里加一些脚本,配置启动命令"scripts": { "docs:dev": "vuepress dev docs", "docs:build": "vuepress build docs" }
警告package.json
配置成这种格式时,在当前文件下,启动时使用npm run docs:dev
,启动项目,而打包构建时,使用npm run docs:build
"scripts": { "dev": "vuepress dev docs", "build": "vuepress build docs" }
警告package.json
配置成这种格式时,在当前文件下,启动时可以使用npm run dev
,启动项目,而打包构建时,使用npm run build
如果是使用 yarn
方式启动和构建项目:可以使用yarn dev启动项目,而使用yarn build构建项目npm run docs:dev
这条命令相当于vuepress dev docs
npm run build
这条命令相当于 vuepress build docs
docs
目录, 这个docs
文件夹主要用于放置我们写的.md
类型的文章以及.vuepress
相关的配置,这个文件夹的名字你可以任意,与你启动项目和构建项目时的配置保持一致就可以了的mkdir docs
进入docs
文件夹中使用mkdir
命令创建.vuepress
文件夹,注意这个文件夹的名字时固定的,不要随便改变cd docsmkdir .vuepress
这个.vuepress
主要就是我们用于存放全局的配置、组件、静态资源等与VuePress
相关的文件配置都将会放在这里关键词:把手