干货！从0开始，0成本搭建个人动态博客

导读

有句老话说的好，好记性不如烂笔头。人生中，总有那么些东西你愿去执笔写下。

本文旨在把整个搭建的过程和遇到的问题及解决方案记录下来，希望能够给你带来些许帮助。

本文涉及的主要技术：

• Vue3.0 - Composition API
• GraphQL
• ESLint
• Semantic Versioning,Commitzion,etc...

在线查看

我的博客

背景

我的博客的折腾史分成下面三个阶段：

• 基于 hexo 搭建静态博客，结合 Github Pages 提供域名和服务器资源

• 自行采购服务器和域名，进行页面和接口的开发及部署，搭建动态博客

• 基于 Github Pages 和 Github Api 搭建动态博客

第1种方式，文章内容采用 Markdown 编写，静态页面通过 hexo 生成，部署到 Github Pages 上。缺点很明显，每次有新内容，都需要重新编译部署。

第2种方式，灵活度极高，可以按需开发。缺点也很明显，开发和维护工作量大，同时还需要服务器和域名成本。

第3种方式，采用 ISSUE 来记录文章，天然支持 Markdown ,接口调用 Github Api，部署到 Github Pages 上。除了一次性开发外没有任何额外成本。

显而易见，本博客这次改版就是基于第3种方式来实现的，接下来我们从0开始一步步做。

技术选型

由于是个人博客，技术选型可以大胆尝试。

笔者选择了 vue-cli 进行项目结构的初始化，同时采用 vue3.x 的语法 Composition-Api 进行页面开发。采用 Github API v4 ,也就是 GraphQL 语法进行 API 调用。

上手开发

环境准备

node

前往 Node.js官网 下载，这里推荐下载 LTS 稳定版。下载后按照步骤进行安装操作即可。

Window 下记得选上 Add To Path ，保证全局命令可用

vue-cli

执行以下代码全局安装即可。

npm install -g @vue/cli

项目初始化

通过 vue-cli 来初始化项目，按照下面内容选择或自行按需选择。

vue create my-blog

完成初始化并安装依赖后，查看到的项目目录如下：

其他依赖安装

1. @vue/composition-api

使用 Vue 3.0 语法必要依赖

npm install @vue/composition-api --save

1. graphql-request

简单轻巧的的 graphQL 客户端。同样还有 Apollo, Relay 等可以进行选择。选择它的理由是：简单轻巧，以及基于 Promise。

npm install graphql-request --save

1. github-markdown-css

使用 Github 的风格渲染 Markdown，选择它的理由是原汁原味。

npm install github-markdown-css --save

项目开发

我的博客之前是使用的 fexo 风格主题，所以本次也是以此为UI依据进行开发。

项目整体分成几个页面：