您正在阅读本文的博客是使用本文中提到的工具构建的。它不是副本，但具有类似的设置，只是更加侧重于博客设置。这篇文章将引导您结合使用Svelte，Sapper和GitHub Pages（免费）来创建自己的博客。重点将放在使用这些工具创建博客上，而不是Svelte和Sapper的细节上。

请注意，即使该项目将使用GitHub页面作为其部署方法，也绝不需要将其部署到GitHub页面。博客本身及其部署方法之间存在明显的脱钩。

项目设置

要跟随博客，您需要具备以下条件：

• node8.2.0或更高版本（npx支持）
• GitHub帐户
• 空的（未初始化的）GitHub公共存储库，名为username .github.io，其中username是您在GitHub上的用户名
• 通过终端访问您的GitHub帐户

当您准备就绪并准备就绪时，就开始吧。首先在终端窗口中运行以下命令（替换<username>为GitHub用户名）：

npx degit "sveltejs/sapper-template#rollup" <username>.github.io
cd <username>.github.io
npm install

这将执行degit以npx将Sapper模板项目放在一个名为的文件夹中<username>.github.io，并将您的工作目录更改为该文件夹并安装所需的npm依赖项。

如果您想查看此时的网站外观，可以继续运行：

npm run dev

这将在http：// localhost：3000上启动本地开发服务器。

现在是时候在您喜欢的代码编辑器中打开项目了。此时，您应该具有类似于下图的文件夹结构：

下面列出了我们将与之交互的文件/文件夹：

• __sapper__，Sapper文件（例如dev，build和export捆绑包）。
• src 网站的源代码
• static 页面运行所需的资源，这些资源包含在内置版本中

如果您想稍微清理一下项目（删除我们不会使用的文件），则可以运行以下命令，以便在我们开始修改模板以适合我们的需求时减少项目的容纳。确保您的工作目录仍设置为<username>.github.io。

rm -r scripts static/*.png static/*.jpg

由于此博客文章专注于启用博客功能，因此让我们进一步简化网站。删除包含的链接列表项有关的在src/components/Nav.svelte文件和删除文件src/routes/about.svelte。您的网站现在在导航栏中应该只有两个项目，如下图所示：

现在也是个性化src/routes/index.svelte文件的好时机。我将保持原样，然后转到网站的博客部分。

启用Markdown支持

就目前而言，博客文章及其内容是硬编码和静态的，位于src/routes/blog/_posts.js文件内部，尚不能用Markdown编写。要更改此设置，我们需要安装一些额外的库，这些库可以帮助我们将Markdown文件转换为适合我们的格式：

npm install -D marked highlight.js front-matter

我们还需要添加一个CSS主题来highlight.js做某事，转到https://highlightjs.org/static/demo/并选择一个主题，然后将其包含在其中，src/template.html如下所示：

<link
  rel="stylesheet"
  href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.2/styles/atom-one-dark-reasonable.min.css"
/>

我喜欢将博客文章与代码本身分开，因为它们应该独立于它们呈现的位置，反之亦然。让posts我们在src和static文件夹旁边创建一个目录。

现在我们可以开始重写src/routes/blog/_posts.js以适应我们的需求。我们将编写一些代码，这些代码可以使用Markdown文件，包括YAML前件并将其解析为可以以编程方式使用的文件。您可以src/routes/blog/_posts.js使用以下代码替换其中的内容：

// src/routes/blog/_posts.js

const fs = require("fs");
const fm = require("front-matter");
const marked = require("marked");
const hljs = require("highlight.js");

const files = fs.readdirSync("posts");

// Use highlight.js as the highlighter for the marked library
marked.setOptions({
  highlight: function (code, lang) {
    return hljs.highlight(lang, code).value;
  },
});

const posts = [];
for (let i = 0; i < files.length; i++) {
  const content = fs.readFileSync(`posts/${files[i]}`, { encoding: "utf-8" });
  // Use the front-matter library to separate the body from the front matter
  const { body, ...frontMatter } = fm(content);
  // Use the marked library to turn markdown into html
  const html = marked(body);
  posts.push({ html, ...frontMatter.attributes });
}

export default posts;

上面的代码将读取位于posts文件夹中的帖子的内容，并创建帖子及其内容的数组，以便我们可以通过编程方式访问这些帖子。

创建您的第一篇文章

现在，我们已经准备了用于解析Markdown文件的代码，我们可以创建第一篇文章。在posts我们之前创建的文件夹中创建一个文件，其my-first-blog.md内容如下：

---
title: "My first blog post"
slug: "my-first-blog"
---

## Look at the `title` above, it's straight out of the front matter! ↖

The slug is what's used to navigate/link to this specific post, visible right now in the URL.

现在，您应该可以通过重新运行来重新启动本地开发服务器npm run dev。现在访问http：// localhost：3000 / blog并在最近的帖子列表中查看您新创建的帖子，单击链接，它应将您导航到该帖子。

部署到GitHub Pages

首先，我们需要将我们的项目放入Git存储库中并将其推送到GitHub。为此，我们将当前目录初始化<username>.github.io为Git存储库（仍应为），暂存所有文件并创建第一个提交。最后，我们还需要将其推送到GitHub：

git init
git add .
git commit -m "Initial commit"
git remote add origin https://github.com/temporary-duck/.io.git
git push -u origin master

完成后，我们将安装一个最终的依赖项，以使我们可以轻松地部署站点：

npm install -D gh-pages

我们还将把它作为新脚本添加deploy到package.json的scripts部分中：

"scripts": {
    "dev": "sapper dev",
    "build": "sapper build --legacy",
    "export": "sapper export --legacy",
    "start": "node __sapper__/build",
    "deploy": "sapper export --legacy &&  gh-pages -d __sapper__/export"
},

新的脚本将确保sapper export在将__sapper__/export文件夹部署到GitHub Pages之前，我们进行了最新更改。gh-pages将在我们的存储库中创建一个名为的gh-pages分支，该分支将被部署到您的站点<username>.github.io，其中username是您在GitHub上的用户名。

现在，您都可以通过运行以下命令来简单地部署站点：

npm run deploy

我们现在即将完成，只剩一步了。我们必须设置gh-pages刚刚部署为要读取的GitHub Pages的主要分支的分支。为此，请访问您为博客创建的GitHub存储库，转到设置并向下滚动，直到看到GitHub Pages部分。在源下，您必须将分支更改为gh-pages分支。您的页面正确部署到可能要花费几分钟<username>.github.io。

而已。全部做完。享受您新创建并免费托管的博客！🥳