一键部署Dumi，搭建个人博客与网站！

2023-12-09 09:56:43

前言

随着互联网的飞速发展，博客已经成为人们分享知识、记录生活、展现自我的重要平台。无论是技术人员、作家、设计师还是其他领域的专业人士，都希望拥有一个自己的博客，来展示自己的作品、分享自己的见解，与他人交流互动。

在众多博客搭建平台中，Dumi脱颖而出，成为众多开发者和博主的首选。Dumi是一个基于React的开源文档网站生成器，它以其简洁优雅的设计、强大的功能和开箱即用的特性，深受广大用户的喜爱。

今天这篇文章，手把手教你如何使用Dumi搭建一个个人博客，并使用Github Actions实现博客的一键部署。无需任何编程经验，即使是新手小白也能轻松上手，一步步带你开启个人博客之旅！

搭建个人博客

1. 安装Dumi

npm install dumi -g

2. 初始化项目

dumi init my-blog

3. 编写博客文章

在项目根目录下，新建一个src文件夹，并在其中新建一个pages文件夹。在pages文件夹中，新建一个名为index.md的文件，这就是你的第一篇博客文章。

在index.md文件中，你可以使用Markdown语法编写你的博客文章。Markdown是一种轻量级的标记语言，它易于阅读和编写，非常适合撰写博客文章。

4. 预览博客

dumi start

在浏览器中打开http://localhost:3000，你就可以看到你的博客了。

一键部署到Github

1. 创建Github仓库

在Github上创建一个新的仓库，并将其命名为my-blog。

2. 配置Github Actions

在Github仓库的根目录下，创建一个名为.github/workflows的文件夹，并在其中新建一个名为main.yml的文件。

在main.yml文件中，添加以下内容：

name: Deploy Blog

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v1
        with:
          node-version: '14'
      - run: npm install
      - run: npm run build
      - uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./build