个人博客搭建流程

本贴我将为大家介绍一下我个人博客搭建的流程。

整体架构

由于个人网站大部分都是一些静态资源，如html、css、图片、markdown文件等，不需要与后端进行交互，也不需要存储一些关系复杂的数据，因此只需要实现一个大前端即可。

如果你对页面的美观布局没有太大的追求，只是在页面上写一些相对简单的内容，那完全可以自己用html写一个页面，然后部署到nginx服务器上面。但是如果你想长期维护你的网站，并且想专注于内容的创作而非技术实现，可以试着用WordPress、Jekyll、Hexo等网站构建工具。本人使用的网站构建工具是Hexo，对其他工具感兴趣的小伙伴也可以自行尝试。

网站构建工具的原理

网站构建工具的原理是将一个网站的基本结构和功能封装成软件组件，用户可以通过简单的操作，使用这些组件来快速地搭建出自己所需的网站。用户可以自由选择主题、插件和小部件等组件，根据自己的需求和喜好来定制网站的外观和功能。

网站构建工具实际上是在后台自动进行代码编写和程序运行。工具会把用户在配置文件（如xml、yml等）或图形化界面上进行的操作转化为相应的HTML、CSS、JavaScript代码或是其他语言的代码，并且把这些代码嵌入到网站中。同时，网站构建工具还可以自动优化网站的响应速度和搜索引擎排名等方面的性能。

以Hexo框架为例，其使用markdown来解析文章。Hexo 内建 Nunjucks 模板引擎，可以另外安装插件来获得 EJS、Haml、Jade 或 Pug 支持。Hexo 根据模板文件的扩展名来决定所使用的模板引擎，用于在Node.js服务器端构建Web应用程序。这两个模板工具会动态地读取配置文件和对应目录文件中的内容（比如markdown、图片等），一键生成HTML、CSS和JavaScript前端代码。

需要用到的技术

在搭建个人网站之前，要确保你已经学过git版本管理工具、了解过一些前端方面的知识。而且要在本机安装好git和nodejs。

搭建流程

1.hexo安装

参考这个链接：https://hexo.io/zh-cn/docs/

其中有几个重要的命令需要记住，以后会用到：

(npx) hexo clean	# 清理Hexo已经生成的目标文件
(npx) hexo g		# 生成目标文件
(npx) hexo s		# 本地启动
(npx) hexo d		# 发布到远程服务器
(npx) hexo new [page] 文件名 # 发布页面/博客，不打page的话默认是发博客

2.选择主题

在这个链接中找到你喜欢的主题：点击此处，然后把它拉取到你的本地进行编辑。
本人使用的是Butterfly这个主题。主页美化的细节请小伙伴们自行参考主题对应的文档，比如我的这个主题可以在GitHub上面找到：Butterfly - A Simple and Card UI Design theme for Hexo，不多介绍。

3.评论功能

传统的评论功能实现需要给后端发送post请求，然后再更新数据库或者服务端的json文件，比较麻烦。这里使用的是一个ServerLess的云服务：leancloud以及无后端评论系统Valine。这两个服务都非常适合个人使用，直接拿来主义，非常方便。

4.部署到GitHub

我参考的是这个链接：hexo史上最全搭建教程

至此，个人网站的搭建就基本完成了。