从 Hexo 到初入 vuepress
为什么放弃了 hexo 转入 vuepress
- hexo 太老了，感觉是就是 jq 和 vue、react... 的关系
- 自己本身用了挺长时间 vue，对 vue 生态圈的新成员有点点渴望。在 md 里面写 vue，想想就销魂
- 用官方的话说
Hexo 一直驱动着 Vue 的文档 —— 事实上，在把我们的主站从 Hexo 迁移到 VuePress 之前，我们可能还有很长的路要走。Hexo 最大的问题在于他的主题系统太过于静态以及过度地依赖纯字符串，而我们十分希望能够好好地利用 Vue 来处理我们的布局和交互，同时，Hexo 的 Markdown 渲染的配置也不是最灵活的。
个人感觉做技术的还是得有个博客，原因有以下几点：
- 这第一肯定是能拿出可装装 X（开玩笑）
- 好记性不如烂笔头，像我这种脑子不好使的人。踩过的坑再遇到经常就是感觉遇到过，但是怎么解决的就忘了。我有试过有道笔记，记了一段时间效果不太好。没得标签，只能靠分类找。再一个排版也没有 md 来的舒服
- 作为一个程序员就要有程序员的觉悟，自己踩得坑分享出去。可以拿来主义但不能是光拿主义。
不说废话了，以下是详细步骤：
一、建个文件夹按照官网现有项目安装本地依赖 (vuepress-快速上手 )
这个地方建的 docs/README.md 是用来生成根 vue 文件的（就像我们项目中 index.vue ），原理是 vuepress 把 md 转成了 vue 。详细可以看 深入浅出 VuePress（一）：如何做到在 Markdown 中使用 Vue 语法。
0.X 版本装完没有 package.json （我也不晓得 1.x 版本有没有），自己建一个把 npm script 加上后启动项目。
二、项目启动起来该配置了
在 docs/.vuepress 下建个 config.js，下面是我的配置
module.exports = {
// 网站的标题。这将是所有页面标题的前缀，并显示在默认主题的导航栏中。
title: "外圆内方",
// 主题, 默认是default。就是官方的那个，这个地方匹配的是node_modules下的，vue-theme- + theme。
// 用这个主题可以直接npm install vuepress-theme-waiyuanneifang，把theme改成'waiyuanneifang'
theme: "waiyuanneifang",
// 网站描述。这将在页面 HTML 中表现为一个 <meta> 标签
description: "外圆内方的博客, html, css, js, vue, react, vuepress",
// 额外的需要被注入到当前页面的 HTML <head> 中的标签
head: [
["link", { rel: "icon", href: `/favicon.ico` }],
[
"meta",
{
name: "viewport",
content: "width=device-width,initial-scale=1,user-scalable=no"
}
]
],
// 主题配置
themeConfig: {
nav: [
{
text: "分类",
icon: "icon-app-store",
items: [
{ text: "js", link: "/categories/js/" },
{ text: "Vue", link: "/categories/Vue/" },
{ text: "React", link: "/categories/React/" }
]
},
{ text: "随笔", link: "/heartFeel/", icon: "icon-highlight" },
{ text: "标签", link: "/tags/", icon: "icon-tags" }
],
// 评论配置，有这个对象就开启了评论模块。先登录或注册 LeanCloud(https://leancloud.cn/), 创建应用获取APP ID 和 APP Key
valineConfig: {
appId: "",
appKey: ""
}
},
// webpack设置
configureWebpack: {
resolve: {
alias: {
"@images": "public/images"
}
}
},
// 注册google-analytics, 获取跟踪id。
ga: ""
}
另外还可以开启 serviceWorker，使用 PWA。想自己开发主题的可以看看 node_modules 里面的 vuepress-theme-waiyuneifang。（我也是站在巨人肩膀上的）
三、部署
这里用的 shell 部署，在跟 package.json 同级的目录下建个 XX.sh 文件。写法参考 vuepress - 部署
package.json 加上:
"deploy": "bash XX.sh"
这里有 2 个地方注意下
- 官网文档应该是用 mac 系统的人写的，windows 下执行.sh。需要 linux 发行版。我装的 Ubuntu。
- windows 下的换行符比 linux 多了个/r, 需要设置一下。方法很多自行百度
只需 npm run deploy, 就能把打包好的静态文件提交到 github page
我发现 github page 不大稳定。大概了解一遍类似的服务后还是觉得 Netlify 不错。而且不用多做操作，只要关联了 github 的库，就能自动部署。
打开Netlify, 用 github 登录。点击 New site from Git 选择仓库，直接选用 github page 那个仓。分支就是 master，打包命令因为本身已经是静态文件了所以不要，打包目录也不要。点 deploy site 生成域名，这个生成的域名有些长，把自己的域名绑上去就 ok 了。