github创建静态页面_如何在10分钟内使用GitHub Pages创建免费的静态站点

github创建静态页面

Static sites have become all the rage, and with good reason – they are blazingly fast and, with an ever growing number of supported hosting services, pretty easy to set up.

静态站点已成为流行，并且有充分的理由-它们非常快速，并且受支持的托管服务数量不断增长，因此非常易于设置。

I'm not going to go into all the who, what, when, where or why of static sites here. I'm assuming that you have at least a vague idea of what they are or just want to create your own site and don't care about the other details. Either way this post is for you.

我不会在这里讨论静态站点的所有内容，对象，时间，地点或原因。 我假设您至少对它们的含义有一个模糊的想法， 或者只是想创建自己的网站，而不关心其他细节。 无论哪种方式，此帖子都适合您。

First, I want you to know I'm writing this for as broad an audience as possible; you don't need any programming knowledge to follow along, but some familiarity with the command line and Git will help out a lot.

首先，我想让您知道我正在为尽可能广泛的读者编写此书； 您不需要掌握任何编程知识，但对命令行和Git的一些熟悉会有所帮助。

那么如何在10分钟内使用GitHub创建一个静态站点？ (So how can you create a static site with GitHub in 10 minutes?)

We will be working with two specific tools: GitHub Pages, which is specifically designed to serve static content, and a static content generator called Jekyll.

我们将使用两个特定的工具：GitHub Pages(专门设计用于提供静态内容)和静态内容生成器Jekyll。

Jekyll is a Ruby gem for creating static sites easily, so you will need to have Ruby installed on your computer if you want to use Jekyll. If you have OSX you most likely already have a version of Ruby (although you may need to update it). If you don’t, or are on a Windows computer, you can learn more about installing it here: Installing Ruby.

Jekyll是用于轻松创建静态站点的Ruby宝石，因此，如果要使用Jekyll，则需要在计算机上安装Ruby。 如果您使用OSX，则很可能已经有了Ruby版本(尽管您可能需要对其进行更新)。 如果不是这样的话，或者在Windows计算机上，您可以在这里了解更多有关安装的信息： 安装Ruby 。

With that out of the way, open up a new terminal widow and type gem install bundler jekyll. This will install Bundler (a Ruby package management tool) and Jekyll.

这样，打开一个新的终端寡妇，然后输入gem install bundler jekyll 。 这将安装Bundler(一个Ruby包管理工具)和Jekyll。

Once those gems (Ruby packages) have installed, type Jekyll new my-static-site (name it whatever you want) which will run Jekyll's generator to create your project in a new directory. After your site is created, hop into your newly created site directory by typing cd my-static-site (or cd whatever you called you project).

一旦安装了这些gem(Ruby软件包)，请输入Jekyll new my-static-site (随便命名)，它将运行Jekyll的生成器以在新目录中创建您的项目。 创建站点后，通过键入cd my-static-site (或cd无论您叫什么项目)进入新创建的站点目录。

Open your project in a text editor and you will see several files and folders Jekyll created for you. Right now you only need to concern yourself with the Gemfile (not Gemfile.lock). The Gemfile is a Ruby file that manages all associated Ruby packages needed to run a project.

在文本编辑器中打开项目，您将看到Jekyll为您创建的几个文件和文件夹。 现在，您只需要关心Gemfile(而不是Gemfile.lock)即可。 Gemfile是一个Ruby文件，用于管理运行项目所需的所有关联Ruby程序包。

The file will contain a line with the Jekyll version, comment it out:

该文件将包含Jekyll版本的一行，将其注释掉：

#gem "jekyll", "~> 4.0.0"

Then add this line:

然后添加以下行：

gem "github-pages", group: :jekyll_plugins

There can be a lot of gotchas when you install the GitHub Pages gem – sometimes the gems it depends on are out of date or the gems you have locally installed are too modern for GitHub Pages.

当您安装GitHub Pages gem时，可能会有很多陷阱–有时，它所依赖的gem已经过时，或者您本地安装的gem对于GitHub Pages而言太过现代了。

I have found that this can make it difficult to build and test my Jekyll site locally. It may be easiest just to test your site locally and save building it until you are ready to deploy. However, at the time of this writing you can can specify these dependency versions in your Gemfile and Jekyll will work both locally and with GitHub Pages:

我发现这会使在本地构建和测试我的Jekyll网站变得困难。 只是在本地测试您的站点并保存其构建，直到准备好进行部署，这可能是最简单的。 但是，在撰写本文时，您可以在Gemfile中指定这些依赖项版本，Jekyll将在本地和GitHub Pages上运行：

gem "jekyll", "~> 3.8.5"
gem "github-pages","~> 202" , group: :jekyll_plugins
group :jekyll_plugins dogem "jekyll-feed", "~> 0.11.0"
end

Thanks to Alex Waibel on StackOverflow for that most recent configuration.

感谢StackOverflow上的Alex Waibel提供了最新的配置。

To see your site in action, run bundle exec Jekyll serve in your command line. This will start a server and you can see your site by typing "localhost:4000" into the URL bar of a browser.

要查看您的网站的运行情况，请在命令行中运行bundle exec Jekyll serve 。 这将启动服务器，您可以通过在浏览器的URL栏中键入“ localhost：4000”来查看您的站点。

Voila! You have created a static site with Jekyll and you are in the project directory. You are about 50% done.

瞧！ 您已经使用Jekyll创建了一个静态站点，并且位于项目目录中。 您完成了大约50％。

让我们上网 (Lets get this online)

Go to GitHub.com and sign up, or if you already have an account, select the “new” button and create a repository. It’s important that you name your repository after the link that your GitHub Pages account will be serving, which is your_username.github.io. For example my GitHub username is tfantina and my blog is tfantina.github.io, so my GitHub repo is named: "tfantina.github.io".

转到GitHub.com并注册，或者如果您已经有一个帐户，则选择“新建”按钮并创建一个存储库。 请务必在GitHub Pages帐户将要提供的链接(即your_username.github.io)之后命名存储库，这一点很重要。 例如，我的GitHub用户名是tfantina，而我的博客是tfantina.github.io ，因此我的GitHub存储库名为：“ tfantina.github.io”。

Back in your terminal window, push your Jekyll site from your computer up to GitHub by running the following commands:

返回终端窗口，通过运行以下命令将您的Jekyll网站从计算机推送到GitHub：

git init
git remote add origin git@github.com:<your_github_username>/<your_github_repo_name>.git
git commit -am “Setting up Jekyll!”
git push -u origin master

(When substituting your username and project name you don't need the opening and closing <>).

(替换用户名和项目名称时，不需要打开和关闭<>)。

Once your changes have been pushed to your repository you should have a working static site. This is because your're using the GitHub Pages gem and named your repository in such a way that GitHub understands you want to serve it with GitHub Pages.

将更改推送到存储库后，您应该有一个正常工作的静态站点。 这是因为您使用的是GitHub Pages gem，并以GitHub理解您希望通过GitHub Pages为其提供服务的方式命名存储库。

You can confirm this either by visiting your site or by going into the settings tab on GitHub and scrolling to the pages section. You should see a green box showing where your site has been published:

您可以通过访问您的网站或进入GitHub上的设置标签并滚动到页面部分来确认这一点。 您应该看到一个绿色框，其中显示了网站的发布位置：

You will also note that you can easily change your theme from in here as well. GitHub provides a few default themes for Jekyll, but of course you can also make your own.If your site says it’s published but looks blank, you may need to do a hard refresh or try looking at your site in a private window. This may seem obvious, but it gets me almost every time I set up a new Jekyll instance.

您还将注意到，您也可以从此处轻松更改主题。 GitHub为Jekyll提供了一些默认的主题，但是当然你也可以自己创建主题。 这看起来似乎很明显，但是几乎每次我建立一个新的Jekyll实例时，都会使我受益。

If everything went according to plan your site should look something like this:

如果一切都按计划进行，则您的网站应如下所示：

There you go – in just a few minutes you have created and deployed a static website with GitHub pages. But you probably want to be able to put some content on your page.

到此为止–在短短几分钟内，您就创建并部署了带有GitHub页面的静态网站。 但是您可能希望能够在页面上放置一些内容。

I promised this would only take ten minutes, so I won’t dive into all the details of pages, front matter, or the Liquid templating language. That’s a post for another day. But I will share how to create your first post.

我保证这只需要十分钟，所以我不会深入探讨页面，前端问题或Liquid模板语言的所有细节。 那是另一天的帖子。 但我将分享如何创建您的第一篇文章。

Back in your text editor, open the “_posts” folder.  There is already a post welcoming you to your new blog. Create a new markdown file and save it with a name in this format: YEAR-MONTH-DAY-TITLE.markdown (see below):

返回文本编辑器，打开“ _posts”文件夹。 已经有一篇欢迎您到新博客的帖子。 创建一个新的markdown文件并使用以下格式的名称保存：YEAR-MONTH-DAY-TITLE.markdown(请参见下文)：

A Jekyll post contains two sections: front matter, and body.

Jekyll帖子包含两个部分：前部和正文。

The front matter gives specific instructions to Jekyll such as what the title of the post is going to be, which layout to use, and when the post was written.

前件向Jekyll提供了具体说明，例如帖子的标题，使用的布局以及帖子的撰写时间。

Front matter is highly customizable. For example, I wanted my posts to have hero images, so I created a lead_image tag and placed some syntax in my layout to specifically check for lead images in each post’s front matter. The Liquid templating language makes it easy to pull content from front matter into your theme.

前件高度可定制。 例如，我希望我的帖子包含英雄图像，因此我创建了一个lead_image标记，并在布局中放置了一些语法以专门检查每个帖子的lead_image中的潜在顾客图像。 Liquid模板语言使将内容从最重要的内容轻松提取到主题中变得容易。

There's a lot more you can do with front matter, but let's start off with a generic example.

您可以使用前件事情做很多事情，但让我们从一个通用示例开始。

The default front matter looks like this:

默认的前端看起来像这样：

—
layout: post 
title:  "Welcome to Jekyll!"
date:   2019-11-09 18:07:11 -0600
categories: jekyll update
—

• Layout tells Jekyll which layout you want the content to be shown on. You can have multiple layouts for different pages or post types.
  布局告诉Jekyll您要在其上显示内容的布局。 您可以为不同的页面或帖子类型设置多种布局。
• The post title
  帖子标题
• The post date
  发布日期
• Categories, which are essentially tags. You can add as few or as many as you want separated by spaces.
  类别，本质上是标签。 您可以根据需要添加任意数量的空格。

After the front matter your post can be written in Markdown, which gives you lots of flexibility in writing your post content.

事后，您可以用Markdown编写您的帖子，这使您可以灵活地编写帖子内容。

Once your post is finished save it and open up your terminal window.

帖子完成后，保存并打开终端窗口。

git commit -am “Publishes first post
git push

After a minute (and maybe a refresh), you will be able to see your post.

一分钟后(也许刷新一下)，您将能够看到您的帖子。

Hopefully, you now have a working static site on GitHub Pages created with Jekyll! If you have any problems or questions please tweet @tfantina, or you can shoot me an email at contact@travisfantina.com.

希望您现在在使用Jekyll创建的GitHub Pages上有一个可运行的静态站点！ 如果您有任何问题或疑问，请发推特@tfantina ，或者您也可以给我发送电子邮件，电子邮件是contact@travisfantina.com 。

翻译自: https://www.freecodecamp.org/news/create-a-free-static-site-with-github-pages-in-10-minutes/

github创建静态页面