使用Svelte,Sapper和GitHub Pages创建博客

作者 : IT 大叔 本文共3766个字,预计阅读时间需要10分钟 发布时间: 2020-11-6

您正在阅读本文的博客是使用本文中提到的工具构建的。它不是副本,但具有类似的设置,只是更加侧重于博客设置。这篇文章将引导您结合使用SvelteSapperGitHub 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

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

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

复制
npm run dev

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

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

使用Svelte,Sapper和GitHub Pages创建博客插图

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

  • __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。您的网站现在在导航栏中应该只有两个项目,如下图所示:

使用Svelte,Sapper和GitHub Pages创建博客插图(2)

现在也是个性化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我们在srcstatic文件夹旁边创建一个目录。

现在我们可以开始重写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

我们还将把它作为新脚本添加deploypackage.jsonscripts部分中:

复制
"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

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

免责声明:
1. 本站资源转自互联网,源码资源分享仅供交流学习,下载后切勿用于商业用途,否则开发者追究责任与本站无关!
2. 本站使用「署名 4.0 国际」创作协议,可自由转载、引用,但需署名原版权作者且注明文章出处
3. 未登录无法下载,登录使用金币下载所有资源。
IT小站 » 使用Svelte,Sapper和GitHub Pages创建博客

常见问题FAQ

没有金币/金币不足 怎么办?
本站已开通每日签到送金币,每日签到赠送五枚金币,金币可累积。
所有资源普通会员都能下载吗?
本站所有资源普通会员都可以下载,需要消耗金币下载的白金会员资源,通过每日签到,即可获取免费金币,金币可累积使用。

发表评论