返回

非专业人士也能一小时构建属于自己的博客

前端

前期准备

在开始搭建博客之前，您需要准备以下内容：

  • 一个 Github 账号
  • 一个 Vercel 账号
  • 一个域名（可使用 Github Pages 自带的免费域名，或选择其他域名服务商）

步骤一：创建 GitHub 仓库

  1. 登录 Github，点击右上角的「+」按钮，选择「New repository」创建新仓库。
  2. 在仓库名称中输入您的博客名称，中可以填写一些关于博客的内容。
  3. 选择「Public」或「Private」仓库类型，根据自己的需要选择。
  4. 点击「Create repository」按钮创建仓库。

步骤二：安装 Docsify

  1. 在刚刚创建的仓库中，创建一个名为 docsify 的文件夹。
  2. 在 docsify 文件夹中，创建一个名为 index.html 的文件。
  3. 在 index.html 文件中，粘贴以下代码：
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    
    <link rel="stylesheet" href="https://unpkg.com/docsify/lib/themes/vue.css" />
  </head>
  <body>
    <div id="app"></div>
    <script src="https://unpkg.com/docsify/lib/docsify.min.js"></script>
    <script>
      window.onload = function () {
        Docsify.init();
      };
    </script>
  </body>
</html>

步骤三：添加博客内容

  1. 在 docsify 文件夹中，创建一个名为 _posts 的文件夹。
  2. 在 _posts 文件夹中，创建一个名为 first-post.md 的文件。
  3. 在 first-post.md 文件中，输入以下内容：
---
title: 我的第一篇文章
date: 2023-03-08
tags: docsify, vercel, github
---

这是我的第一篇博客文章，欢迎阅读！

步骤四：部署博客到 Vercel

  1. 登录 Vercel，点击右上角的「New Project」按钮，选择「Import Git Repository」导入 Git 仓库。
  2. 在「Repository URL」中输入您的 GitHub 仓库地址。
  3. 选择「Next.js」作为框架。
  4. 点击「Deploy」按钮部署博客。

步骤五：设置自定义域名

  1. 登录 Vercel，进入您的项目。
  2. 点击「Settings」选项卡。
  3. 在「Domain」部分，点击「Add a custom domain」按钮。
  4. 输入您的域名，点击「Save」按钮。

步骤六：访问博客

在浏览器中输入您的域名，即可访问您的博客。

结语

以上就是使用 docsify + vercel + github 搭建免费博客的详细教程。希望本文对您有所帮助，如果您在搭建过程中遇到任何问题，欢迎留言提问。