我要做一个什么样的网站

首先明确我的需求点，即我的博客要有哪些功能。

  1. 我的博客要能实现基本展示文章功能；
  2. 我的博客文章要支持MarkDown写作语法；
  3. 我的博客要有文章分类（按照类别、标签）；
  4. 我的博客网站要有友链、个人展示页等；
  5. 我的文章能开通评论，以便于和读者交流沟通；
  6. 我的文章要能按照时间轴进行排序，方便进行新老文章的查找；
  • 附加功能：
  • 最好有一个搜索功能，能够帮助我快速的定位一篇文章；
  • 最好有一个网站访客记录功能，比如多少人点击了这篇文章;
  • 最好对每一篇文章做一个字数统计功能；

其中，我发现上述需求点，除了留言功能、访客统计（后来发现也可以用前端技术解决）需要后端做数据存储，其余的需求完全可以用前端技术来解决。

博客主要是放置一些静态资源(如html、css、js)。并不太涉及增删改查的功能，且一般也不怎么需要用户登陆等权限操作。

所以，抛开传统的网站设计：前端+后台的设计思路。能不能单纯的用前端框架来实现一个博客网站，就成了我的当务之急。

很有意思的是，当我抱着这个想法去搜索时，发现网上早已经有了一大堆成熟的解决方案。

例如：Hexo、Hugo、Solo、JekyII、VuePress、Docsify 、WordPress

其中Hugo 使用了go、Solo 使用了Java、WordPress使用了php后端语言，其余的全都是纯前端解决方案。

本着less is more的原则，我们这次就尝试着使用纯前端的解决方案来实现上述功能。

为什么选择Hexo

​ Hexo是一个快速简洁且高效的博客框架，基于Node.js开发，可以方便的生成静态博客页面

Hexo官网截图

上述的功能要点绝大多数都可以通过Hexo的配置文件开启，几乎不接触代码。

上述是官方网站的介绍，其实除了这个原因外，最主要的还是Hexo的主题最多。

在众多主题中，我最喜欢的是Hexo-Butterfly卡片式主题博客，一下子就戳中了我的审美点，哈哈哈哈哈哈哈

给你们看看他的官网展示的样例

搭建一个博客需要几步

接下来，我们来看看搭建一个Hexo博客，并且引入Hexo-Butterfly主题需要几步。

具体步骤可以参考Hexo官方文档，以及Hexo-Butterfly官方文档

前提准备工作：

  • 安装Node.js

  • 切换国内镜像源

  • 安装Git

  • 安装Hexo

    $ npm install -g hexo-cli

正式开始：

  • 新建一个文件夹，作为项目根目录，例如：~\MyBlog\（文件夹名随便起）

  • 进入该文件下，打开Git bash，输入hexo init，等待自动创建

    生成结果展示

  • 此时一个简陋版的博客就已经做好了，执行hexo s就能启动博客服务，如下图所示：

    出现红框代表服务启动了，此时不要关闭git bash

    自动生成的博客页面，全程不需要敲任何代码

这样不仅博客启动了，还自动生成了一篇Hello World 文章。

接下来，有了这个“毛坯房”之后，如何加入Hexo-Butterfly主题，以及各种分类和侧边卡片布局，

请直接参阅Hexo-Butterfly文档。上面有非常详细的介绍，这里就不再赘述了。

那么就尽情的装饰你的播客吧！

下一篇将介绍，布置好的博客如何在服务器上部署，以及增加一些第三方组件和个人配置。