L3F.WIN

Github及Hexo的使用

0%

利用VuePress和Netlify CMS创建一个简单的网站

VuePress

利用VuePress和Netlify CMS创建一个简单的网站

本文属于本人翻译其英文原稿及测试过程中遇到的问题总结而成的,请大家多提意见。可随意转载。

在本教程中,我将向您展示如何使用VuePress 和 Netlify CMS构建一个静态网站。 如果您不熟悉VuePres, 它是由Evan You(Vue的创始人)在Vue之上构建的静态网站生成器。与Nuxt.js不同的是,VuePress的主要关注点在于构建静态站点,该站点有自己的构造,并且自动负责许多的设置工作。
Netlify,一个针对静态站点的现代化平台,使用其CMS来管理静态站点,这使得任何人都可以通过编辑器轻松的管理网站内容。

入门

首先你要做的是克隆或下载我创建的Git仓库。

1
git clone https://github.com/andreliem/vuepress-netlify-cms

克隆完后,您会发现其目录下包含如下的结构

1
2
3
4
5
6
7
8
9
10
.
├── LICENSE
├── README.md
├── docs
│ ├── README.md
│ ├── test.md
│ └── welcome.md
├── netlify.toml
├── package.json
└── yarn.lock

让我们先解释一下这些文件的含义。

nelify.toml

1
2
3
[build]
command = "yarn docs:build"
publish = "docs/.vuepress/dist/"

此文件在部署Netlify的时候使用。Netlify从Github中提取代码,并运行yarn docs:build命令生成静态站点。发布完成后,publish 告诉你公共目录在那里启动你的站点。

package.json

1
2
3
4
5
6
7
8
9
{
"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs"
},
"devDependencies": {
"vuepress": "^0.9.0"
}
}

这个文件是标准的VuePress设置,如果您遵循官方的VuePress安装指南安装的话,您将自动拥有这些设置。

/docs

1
2
3
4
├── docs
│ ├── README.md
│ ├── test.md
│ └── welcome.md

最后,docs文件夹包含实际的标记文件,这些文件将组成站点本身的内容。这些文件被提交给Github,Netlify CMS将通过一个CMS来处理这些文件,我们将在本教程结束前设置CMS。
如果查看这些文件,请注意README.md与其他两个文件不同,因为它是站点的主页文件。

安装

按照VuePress的建议,我们将使用yarn而不是npm来设置项目。
VuePress文档将告诉你为什么。

当将VuePress安装到以webpack 3.x作为依赖项的现有项目时,目前建议使用yarn而不是npm。 在这种情况下,npm无法生成正确的依赖关系树。(https://vuepress.vuejs.org/guide/getting-started.html)

开始

1
yarn install

全部安装完成后,我们花一些时间来查看项目中的目录 /docs/.vuepress。这个目录是Vue程序的核心。如果你要扩展VuePress,这里就是你要去的地方。

1
2
3
4
5
6
7
8
9
10
.
├── components
│ └── PostLayout.vue
├── config.js
├── dist
└── public
├── admin
│ ├── config.yml
│ └── index.html
└── images

上面是.vuepress中的关键文件和目录。
components目录是我们可以存储自定义显示组件的地方,例如自定义布局视图。 我们不会在本教程中使用它。

config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
module.exports = {
title: 'Netlify CMS + VuePress',
description: 'Netlify + VuePress',
themeConfig: {
docsDir: 'docs',
repo: 'andreliem/vuepress-netlify-cms',
sidebar: [
'/',
'/welcome',
'/test'
],
nav: [
{
text: 'Admin',
link: '/admin/#/',
}
]
}
}

此文件负责VuePress的大部分配置。 作为示例,sidebar将列出侧边栏显示的实际链接,nav负责顶部标题链接。 sidebar链接到docs根级别包含的markdown文件。 可以是博客文章或项目文档。
nav包含指向管理CMS的单个链接。 请注意,此管理部分存在于.vuepress/public/admin中。 公用文件夹是放置VuePress不生成的静态文件和资源的位置。 在这种情况下,我们添加了一些netlify特定代码来设置CMS的基本入口点。

让我们更详细地查看Netlify CMS的配置文件。

注意 想要通过Netlify CMS来管理自己的网站的话,需要修改此处repo的值, 将仓库名字修改为自己的Github仓库位置 USER/REPO

config.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
backend:
name: github
repo: andreliem/vuepress-netlify-cms
branch: master # Branch to update (optional; defaults to master)
media_folder: "docs/.vuepress/public/images"
public_folder: "docs/.vuepress/dist/"
collections:
- name: "doc" # Used in routes, e.g., /admin/collections/blog
label: "Doc" # Used in the UI
folder: "docs" # The path to the folder where the documents are stored
create: true # Allow users to create new documents in this collection
slug: "{{slug}}" # Filename template, e.g., YYYY-MM-DD-title.md
fields: # The fields for each document, usually in front matter
- {label: "Title", name: "title", widget: "string"}
- {label: "Body", name: "body", widget: "markdown"}

这里有很多内容,我建议你阅读Netlify CMS入门指南。
以下快速概述。
backend 定义了我们的内容存储的位置,在这种情况下,我们将它存储在Github master上的相同名称的repo(仓库)中。
media_folder 告诉Netlify存储图像的位置。 我们将它们存储在VuePress希望存储静态资产的公共文件夹中。
collections 定义了我们网站上的内容类型。 如果您有使用过WordPress的经验,请将其视为自定义帖子类型。 这是个相当简单的事情,我们可以定义一些关于这些项目的元信息,然后在编辑器中可以编辑的字段。 请注意,markdown文件遵循frontmatter格式。

注意 想要通过Netlify CMS来管理自己的网站的话,需要修改此处repo的值, 将仓库名字修改为自己的Github仓库位置 USER/REPO

执行

既然您已经了解了设置方法的基础知识,那么让我们通过以下方式尝试运行:

1
yarn docs:dev

这时你可以在本地看到运行的结果了
在浏览器中输入 http://localhost:8082 此处会根据服务器显示内容的不同而不同,请自己查看

展示图

此页面引用我们已定义为主页的README.md文件。 这是一个特定于VuePress的约定,可让您轻松获得启动页面而无需任何设计工作。

Admin

要在本地进行管理设置,您可以尝试单击管理链接。
如果你得到404,请尝试刷新,它应该打开netlify登录界面,如下所示。

展示图

在Netlify上部署时不会发生此问题,很可能是因为默认的nginx设置。 (我不是服务器专家)
如果你尝试使用github登录它将无法工作,因为你需要使用Netlify和Github来启用访问。 以下部分将介绍如何进行设置:

  1. netlify部署和托管
  2. 用于CMS访问的netlify标识
  3. github到netlify访问

在我们开始之前,假设您有一个Netlify和Github帐户。 如果你不这样做,那么你首先需要这样做。
创建新的Netlify站点
登录Betlify.com并创建一个新站点。 然后选择项目的存储库,在我的例子中是您正在使用的存储库。 你想在github上为此创建一个新的repo。创建方法及上传方法请参考下面的文章
Github入门
Github基础

定义部署设置

接下来,我们告诉Netlify从哪个分支中提取,如何构建项目以及分发文件所在的位置。
一般会自动填好,记得检查好Repository是否是自己的

VuePress设置

您应该测试使用Netlify部署您的应用程序并确保它有效。

设置Netlify Identity

现在该网站已上线,我们需要允许人们通过CMS在线编辑内容。 这是我们需要为站点设置Netlify的身份设置的地方。 在主站点设置页面中,导航到底部附近的侧栏上找到的“身份”,然后确保启用身份,如下面的屏幕所示。

设置Netlify Identity

配置身份注册(Configure Identity Registration)

接下来,让我们定义谁可以注册CMS以及它们如何连接。 由于这只是一个演示,我们将对任何人“开放”,并使用“GitHub”作为我们的外部提供商进行身份验证。

配置身份注册

配置识别服务(Configure Identify Services)

好的,所以我们告诉Netlify任何人都可以注册。 下一步是将服务或网关配置为Github,以便Github允许Netlify将其用作身份验证平台。 转到“Identity”下的“Services”部分。

配置身份注册

首先,我们指定将用于CMS的存储库,同样也是同一个存储库。 我们将Roles留空并最后输入您必须从Github检索的Github访问令牌。 单击“Generate access token in GitHub”按钮以开始请求您的权限请求。

使用Github设置OAuth应用程序

最后,我们需要使用Github设置OAuth应用程序,这将使我们的VuePress Netlify应用程序通过Github进行身份验证并适当地重定向。 这与您为Facebook,Google等支持OAuth的任何第三方认证系统设置的流程相同……
在Github上,导航到Settings-> Developer Settings,然后选择New OAuth App。

使用Github设置OAuth应用程序

更新上面的表单字段,但显然有你自己的URL和描述细节。 回调URL应保持原样,并且在在线文档中不是特别容易找到。

注意 为了开通认证,我们还需要开启一步,首先在你刚才创建的Oauth应用处,复制Client ID及 Client Secret的代码, 再回到Netlify 转到 Settings → Access control → OAuth Install provider,将刚才的代码填入当相应的位置。

开始测试吧

完成后,您应该可以点击您网站上的管理员链接,并通过您的Github帐户登录。 如果一切顺利,那么您将看到如下的管理面板:

管理面板

通过Netlify设置好的网站来访问,本地测试失败