丢掉烂大街的Hexo吧用Vuepress搭建专属你的博客吧

44次阅读

共计 2166 个字符,预计需要花费 6 分钟才能阅读完成。

一、先来聊聊搭建博客

1.1. 什么人喜欢折腾博客

通常如果不是爱折腾或者有特别需求的普通人,一般对于搭建博客的需求其实不大,通常主要一下几类人会搭建博客自己玩玩。

  • 程序员 (喜欢写一些技术博客,分享一些问题)
  • 设计工作者 (需要一个平台暂时自己,通常的网站满足不了他们)
  • 技术爱好者 (不一定是干 IT 的,但是希望搞一个博客交流的)
  • 文艺青年 (喜欢写写文章分享给大家的)
  • 极客 (喜欢追求极致,喜欢做一些酷炫吊炸天的网站的异类)

对于上述几类人群,我们再细分一下,他们能够搭建博客的方式。

  • 博客平台 (CSDN、博客园、Farbox 之类的一站式平台,写好文章网上丢就可以了)
  • 纯自己码 (需要超强的技术壁垒)
  • 搭建博客的工具 (下面会进行详细说明,目前也是最主流的方式)

    • WordPress
    • Hexo
    • Hugo
    • Vuepress (本文主要说的)
    • jekyll

1.2. 简单对比一下几个吧!(不废话,直接说缺点)

  • WordPress:第一个是麻烦,学习成本高,第二个必须要搞一个自己域名主机,操作很麻烦,新手门槛高。
  • Hexo:好,好,好,轻量、简单、实用、方便 —————but 烂大街了,现在随便百度还是谷歌搜一下都是 Hexo 搭建博客,NexT 主题也被用烂大街了,导致搭一个博客一点新意都没,没有那种成就感。(当然你自己能另写主题就算了)
  • Hugo:小众 文档少 优化少 主题少 坑多
  • jekyll:跟 Hugo 也差不多
  • Vuepress:哈哈哈,比 Hugo/jekyll 文档还少,主题更少 (惊不惊喜,意不意外),教程也少,要不然都是重复的。——–but 真心好看,是尤雨溪大神的力作,优化更不要说了,整体风格极简却又非常适合文档阅读,而且流畅,最重要,使用的人少,个性化定制多,只要你会点 vue,你的博客只属于你。

1.3. 废话不多说,直接看效果

预览效果:https://domyselfzy.github.io/

首页

文章

时间线

关于我

二、正菜开始

2.1 直接开干

vuepress 官网:https://vuepress.vuejs.org/zh/

如果想搭建一个简单的 vuepress 博客,很简单。

  1. 项目安装

    不推荐全局安装方式,因为一个新手很难把握文件层级

    # 将 VuePress 作为一个本地依赖安装
    yarn add -D vuepress # 或者:npm install -D vuepress
    
    # 新建一个 docs 文件夹
    mkdir docs
    
    # 新建一个 markdown 文件
    echo '# Hello VuePress!' > docs/README.md
    
    # 开始写作
    npx vuepress dev docs

    目录如下:

  2. package.json 配置

    需要在刚刚生成的文件夹下,找到 package.json,在里面添加以下内容(如果没有自己新增)

    {
      "scripts": {
        "docs:dev": "vuepress dev docs",
        "docs:build": "vuepress build docs"
      }
    }
  3. 运行命令

    yarn docs:dev # 或者:npm run docs:dev

    在浏览器地址上输入:http://localhost:8080/

    于是你就看到以下这个页面了

  4. 构建和生成静态页面

    yarn docs:build # 或者:npm run docs:build

至此,一个简单基于 vuepress 的博客就诞生了!是不是如此简单。

2.2 基于 vuepress 主题的搭建

肯定很多人看完第一眼感觉,靠,这么 low,也好意思拿出来,就是一个白页嘛~

对,你说的都对,就是这么个白页,但是正是因为这个白页才体现它的强大。

why???

因为我们之后写博客基本都是基于 markdown 编写,所以我们之后 vuepress 的页面大部分情况都可以通过 markdown 进行布局。当然如果你是 vue 的高手,你也可以自己使用 vue 编写 layout 布局。

2.2.1 vuepress-theme-reco

这个主题应该是现存 vuepress 最好的一个主题之一,是博主午后南杂制作的一个超赞主题。

主题地址:https://vuepress-theme-reco.recoluan.com/

2.2.2 动手干

之前我们是以项目安装的方式进行构建

现在不需要了,直接安装主题就完了。(废弃之前的文件夹,重新指定一个新文件夹位置 my-blog,可以所以指定)

# create
npx vuepress-theme-reco-cli init my-blog
# or
npm install  -g
reco-cli init my-blog

# install
cd my-blog
npm install

# run
npm run dev

# build
npm run build

安装的时候选择 1.0 版本

安装完成后目录如下:

基本和之前的类似,只是含一些主题文件对应的.md 文件

这个时候文件夹是没有 node_modules 依赖模块,所以我们还是要按照之前的方式重新依赖一遍

yarn add -D vuepress

慢慢等待完成

然后,直接运行命令 yarn dev 直接看效果吧。

效果图:

这个就是主题文件运行的效果了。

三、优化篇

至此主要的工作已经全部完成了,下面你就可以定制你需要的博客了。

当然离定制化博客还是差之千里,有兴趣可以关注我的公众号,看一下我之后的文章,专门对 vuepress 主题进行优化。

具体效果可以参考我的博客:https://domyselfzy.coding.me/

错过时光

正文完
 0