Hexo从0到1搭建博客系列01：浅尝Hexo

Hexo从0到1搭建博客系列01：浅尝Hexo

1. 前言

作为一个程序员，我们总是想记录一些自己日常学习的东西、自己对于技术的思考以及自己平时折腾的一些小项目。但是自己手动搭建一个博客是很费时费力的一件事情，我们需要考虑一下几点难题：

1. 制作一个博客网站需要这些技术：后端采用 SpringBoot 全家桶，前端采用 Vue/React 。如果追求快速搭建一个博客，可以使用全栈 nodejs（ egg.js、express、koa 等）。如果想让博客功能更强大，需要引入更多的技术。但这些技术的学习都很耗时费力，极可能劝退。

2. 如果想让博客页面更好看，需要自己设计 UI。

3. 博客最终展示给别人，需要部署到服务器上才能让大家看到。需要买服务器、买域名、域名备案、学习部署知识等等。

4. 服务器后期需要维护，一年维护费用可能几百至上千不等。

5. 服务器被人恶意攻击（ DDOS、 SQL注入 等），需要自己手动解决或花钱升级服务器。

如果你想要通过博客项目，以此学习前后端的知识、提升自己的编程水平甚至是将其作为一个简历上可以拿得出手的项目，我强烈建议你将以上步骤逐一完成，甚至可以将个人博客延伸为社交博客论坛（类似 CSDN、掘金 等），引入微服务与分布式技术。将这些做完，绝对会有明显的技术提升。

但是，如果你只想有一个自己的网站去记录一些日常的学习等内容，继续往下看，我将会使用 Hexo 简化以上流程，从0到1实现一个美观精致高效的博客。

2. Hexo简介

首先简单介绍一下 Hexo

引自[官方](文档 | Hexo)

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

其实 Hexo 就是帮我们完成了大部分与书写博客无关的事情，我们只需要根据 Hexo 现有的框架，做一些简单的配置，即可做出一个博客网站。之后，我们就可以专注地写自己的博客啦

在接下来的部分中，你只需要有以下几点前置知识，即可快速完成之后系列的全部内容：

1. Node.js：主要用于安装Hexo、发布文章、部署等操作

安装 Node.js ：

1. 官网安装

2. Mac可采用 Homebrew 安装

3. Git 及 Github：最后的博客网站将发布到 Github 中

4. Markdown：这个很简单，在 CSDN 或者用Typora写过博客的人都知道怎么用

之后全部的实战部分，均采用 VSCode 编辑器完成。如果你熟练使用命令行操作，也可以直接在命令行上完成全部操作。

3. Hexo简单实战

1. 首先打开命令行窗口，执行以下命令，安装Hexo。

$ npm install -g hexo-cli

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lXxlI3TM-1664954773045)(https://cdn.jsdelivr.net/gh/ltyzzzxxx/ltyzzz-ImageBed/blog-img/hexo-install.png)]

2. 选择一个合适的位置（之后博客全部文件所在的地方），执行以下命令。

这里我博客命名为ltyzzz-blog

$ hexo init ltyzzz-blog
$ cd ltyzzz-blog
$ npm install

3. 通过 VSCode 打开创建好的博客目录

介绍其中几个重要的文件：

• _config.yml：博客相关的配置均在这个文件中（之后引入Fluid主题后有所变化）

• source：用来存放用户资源的位置（我们写的文章就存储在这里）

4. 执行以下命令，生成静态网页文件 public

$ hexo generate

5. 执行以下命令，在本地服务器（默认为：http://localhost:4000/）启动博客

$ hexo server

最终Hexo基础博客页面如图所示：

看到这里，是不是感觉Hexo页面十分的简陋甚至有点丑？

没关系，之前的部分只是带大家简单尝试一下Hexo，了解一下基本的框架与命令使用。

我们的重头戏将放在Fluid主题，通过该主题熟悉Hexo核心功能以及Fluid新增的功能。

接下来的内容包括有：

1. 博客文章的编辑与发布
2. 评论区功能模块引入
3. 图床的最佳实践
4. 新增留言板界面
5. 将博客部署到Github

4. 后记

如果大家觉得我的内容写的还不错，可以在评论区留言支持一下呀~

欢迎大家来逛一逛我的个人博客~

此外，从2022.10.1开始，为激励自己持续刷题，我开始持续日更Leetcode题解啦~

所有题解均已放到Github仓库中，欢迎大家Star并提出Issue~