Docsify + Serverless Framework怎么快速创建个人博客系统

发布时间：2021-12-16 16:44:56 作者：柒染
来源：亿速云阅读：233

Docsify + Serverless Framework 怎么快速创建个人博客系统

在当今互联网时代，拥有一个个人博客系统已经成为展示自我、分享知识和记录生活的重要方式。然而，传统的博客系统搭建往往需要复杂的服务器配置和维护工作，这对于非技术背景的用户来说可能是一个巨大的挑战。幸运的是，随着云计算和 Serverless 架构的普及，我们可以利用一些现代化的工具来快速搭建一个轻量级、易于维护的个人博客系统。本文将介绍如何使用 Docsify 和 Serverless Framework 来快速创建一个个人博客系统。

1. 什么是 Docsify 和 Serverless Framework？

1.1 Docsify 简介

Docsify 是一个轻量级的文档生成工具，它可以将 Markdown 文件动态渲染为网页。与传统的静态网站生成器（如 Jekyll、Hexo 等）不同，Docsify 不需要在构建时生成 HTML 文件，而是直接在浏览器中动态渲染 Markdown 文件。这使得 Docsify 非常适合用于创建文档、博客等轻量级网站。

Docsify 的主要特点包括： - 无需构建：直接使用 Markdown 文件，无需预先生成 HTML。 - 实时预览：支持实时预览 Markdown 文件的渲染效果。 - 主题和插件：提供丰富的主题和插件，方便自定义和扩展功能。

1.2 Serverless Framework 简介

Serverless Framework 是一个用于构建和部署 Serverless 应用的开源框架。Serverless 架构是一种云计算模型，开发者无需管理服务器，只需编写代码并部署到云平台上，云平台会自动处理资源的分配和扩展。

Serverless Framework 的主要特点包括： - 多平台支持：支持 AWS、Azure、Google Cloud 等多个云平台。 - 自动化部署：通过简单的配置文件即可自动化部署应用。 - 插件系统：提供丰富的插件，方便扩展功能。

2. 为什么选择 Docsify + Serverless Framework？

2.1 轻量级和易于维护

Docsify 的轻量级特性使得它非常适合用于个人博客系统。你只需要编写 Markdown 文件，Docsify 会自动将其渲染为网页。而 Serverless Framework 则可以帮助你将博客系统部署到云平台上，无需担心服务器的配置和维护。

2.2 低成本

Serverless 架构的一个显著优势是成本低。你只需为实际使用的资源付费，而不需要为闲置的服务器资源付费。这对于个人博客系统来说是非常经济实惠的选择。

2.3 快速部署

使用 Serverless Framework，你可以通过简单的配置文件快速部署博客系统。整个过程自动化程度高，减少了手动操作的复杂性。

3. 快速创建个人博客系统的步骤

接下来，我们将详细介绍如何使用 Docsify 和 Serverless Framework 快速创建一个个人博客系统。

3.1 安装 Node.js 和 Serverless Framework

首先，确保你的系统上已经安装了 Node.js。如果尚未安装，可以从 Node.js 官网下载并安装。

安装完成后，使用以下命令全局安装 Serverless Framework：

npm install -g serverless

3.2 初始化 Docsify 项目

接下来，我们创建一个新的 Docsify 项目。首先，创建一个新的目录并进入该目录：

mkdir my-blog
cd my-blog

然后，使用以下命令初始化 Docsify 项目：

npx docsify-cli init

该命令会在当前目录下生成以下文件： - index.html：Docsify 的入口文件。 - README.md：默认的 Markdown 文件，作为博客的首页。 - .nojekyll：用于 GitHub Pages 的空文件。

3.3 配置 Docsify

你可以通过修改 index.html 文件来自定义 Docsify 的配置。例如，你可以更改主题、添加插件等。以下是一个简单的配置示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Blog</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="description" content="Description">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/themes/vue.css">
</head>
<body>
  <div id="app"></div>
  <script>
    window.$docsify = {
      name: 'My Blog',
      repo: 'https://github.com/your-repo',
      loadSidebar: true,
      subMaxLevel: 2,
      search: 'auto'
    }
  </script>
  <script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>
</body>
</html>

3.4 编写博客内容

在 docs 目录下，你可以创建多个 Markdown 文件来编写博客内容。例如，你可以创建一个 posts 目录来存放所有的博客文章：

mkdir docs/posts

然后，在 posts 目录下创建一个新的 Markdown 文件，例如 first-post.md：

# 我的第一篇博客

欢迎来到我的博客！这是我的第一篇博客文章。

## 博客内容

这里是我的博客内容...

3.5 部署到 Serverless Framework

接下来，我们将使用 Serverless Framework 将博客系统部署到云平台上。首先，在项目根目录下创建一个 serverless.yml 文件：

service: my-blog

provider:
  name: aws
  runtime: nodejs14.x
  region: us-east-1

plugins:
  - serverless-finch

custom:
  client:
    bucketName: my-blog-bucket
    distributionFolder: ./
    indexDocument: index.html
    errorDocument: index.html

在该配置文件中，我们使用了 serverless-finch 插件来将静态网站部署到 AWS S3 上。你需要确保已经安装了该插件：

npm install serverless-finch --save-dev

然后，使用以下命令部署博客系统：

serverless deploy

部署完成后，Serverless Framework 会输出一个 URL，你可以通过该 URL 访问你的博客系统。

4. 总结

通过本文的介绍，我们了解了如何使用 Docsify 和 Serverless Framework 快速创建一个个人博客系统。Docsify 的轻量级特性和 Serverless Framework 的自动化部署能力使得整个过程变得非常简单和高效。无论你是技术爱好者还是非技术背景的用户，都可以轻松上手并拥有一个属于自己的博客系统。

希望本文对你有所帮助，祝你搭建博客顺利！