# 从Typecho迁移到Eleventy

这个博客由 Typecho 提供支持将近 3 年后，它现在是一个使用 [Eleventy](https://www.11ty.dev/) 构建的静态生成的网站。

目前博客也不再是自己买云服务器托管了，它现在托管在 [Cloudflare](https://www.cloudflare.com/)/[Github](https://www.github.com/) 上，这个网站现在又给我省了一件事，那就是备份。

## **为什么选择 Eleventy？**

在我第一次看到 [Eleventy](https://www.11ty.dev/) 是在 [油油大佬](https://www.200011.net/) 的博客。[Eleventy](https://www.11ty.dev/) 引起了我的兴趣，因为感觉它非常容易上手。根本不需要学习太多，文档简洁实用。基本上在搭建时，[Eleventy](https://www.11ty.dev/) 将解释 Markdown 文件并将它们转换为语义 html 文档。您可以在这些模板周围安装模板。

## **创建站点**

现在第一件事就是生成一个没有数据的 [Eleventy](https://www.11ty.dev/) 的站点。

```plaintext
mkdir blog
cd blog
npm init -y
npm install @11ty/eleventy
code .
```

然后选择package.json这个文件，编辑一下scripts这个部分的，删除test那段代码，添加下面这段代码

```plaintext
"start": eleventy --serve
```

保存之后，打开终端，输入这段命令启动本地网页服务器

```plaintext
npm run start
```

之后打开浏览器在地址那输入 [http://localhost:8080](http://localhost:8080/)

你就会看到一段 Cannot GET / 然后再根目录新增一个新文件 index.md 里面写段

```plaintext
# hello world
```

切换到浏览器 刷新一下 如果出现下面这段话 太好了，说明一切正常！

![](https://img.mukewang.com/user/6108a18c0001867904290175.jpg align="left")

在根目录再新建一个名为 eleventy.js 的文件 这是一个 11ty 的项目设定文件

src：存网页相关文件的文件夹

dist：输出静态html的文件夹

includes：存放主题模板的文件夹

```plaintext
module.exports = (eleventyConfig) => {
    return {
        dir: {
            input: 'src',
            output: 'dist',
            includes: '_includes'
        },
        markdownTemplateEngine: 'njk'
    }
}
```

在src文件夹下面再新增两个\_includes和\_data文件夹后

在\_includes里再新增一个layouts的文件夹

在layouts文件夹新增一个名叫base.njk的文件（base.njk 可以说是一个主题模板）

\_data文件夹是存放一些数据比如导航之类的

> 哦，对了不懂也可以看一下 [Eleventy官方文档](https://www.11ty.dev/blog/) ！

## **那我怎么写文章呢？**

弄完上面这些操作后，在src里新增一个分类文件夹，我这里名为blog，这个文件夹是用来存放你写的md文章

```plaintext
---
layout: 'layouts/base.njk' 这里是引用模板
tags: blog
title: 文章名字
data: 日期
---
```

## **最后**

[Eleventy](https://www.11ty.dev/) 大致就是这个样子，等你弄完所有东西，把dist目录下的文件上传到 [Cloudflare](https://www.cloudflare.com/)/[Github](https://www.github.com/) 上就大功告成了，为什么我不继续用 [Typecho](http://typecho.org/) 呢？还不是因为没钱买云服务器，[Typecho](http://typecho.org/) 也是一款轻量高效，稳定，简洁友好的一款博客程序。

但使用使用 [Eleventy](https://www.11ty.dev/) 搭建的网站可以让我很省心省钱，并拥有一个快速、轻量级的网站，使用起来还是和 [Typecho](http://typecho.org/) 一样很愉快。