I am going to teach you how to build a website using a new workflow that I have been using to build my own personal landing page, product page, and blog. Not only can you customise your site to fit your every whim and fancy, but I am going to show you how you can do it for free.
我将教您如何使用新的工作流程来构建网站，我一直在使用该工作流程来构建自己的个人目标网页 ， 产品页面和博客 。 您不仅可以根据自己的喜好和个性来定制网站，而且我还将向您展示如何免费进行 。
We are going to learn how to use Middleman to develop the site, and GitHub to host it. Let’s get started!
我们将学习如何使用Middleman开发网站，并使用GitHub托管它。 让我们开始吧！
A static site does not have any dynamic content. Great examples of static sites are blogs, landing pages and product pages. Since a static site comes “as-is”, it is extremely fast.
静态站点没有任何动态内容。 静态站点的好例子是博客，登录页面和产品页面。 由于静态站点是“按原样”出现的，因此它非常快。
Middleman bills itself as a “static site generator using all the shortcuts and tools in modern web development.” What exactly is a static site generator? It means that Middleman has scripts that take your source files (written in Markdown) and converts them into HTML. It also contains scripts that will deploy the generated HTML.
Middleman称自己为“使用现代Web开发中所有快捷方式和工具的静态站点生成器”。 静态网站生成器到底是什么？ 这意味着Middleman的脚本将获取您的源文件(以Markdown编写)，并将其转换为HTML。 它还包含将部署生成HTML的脚本。
Let’s hit the ground running. In this section, we will install Middleman, and learn how to deploy the newly generated site to GitHub. This section also assumes that you have a GitHub account. If not, you should create one.
让我们开始吧。 在本节中，我们将安装Middleman，并学习如何将新生成的站点部署到GitHub。 本节还假设您拥有一个GitHub帐户。 如果没有，则应创建一个。
Middleman is written in Ruby, and comes neatly packaged in a gem. Go ahead and fire your terminal, and install the gem:
Middleman用Ruby编写，并整齐地包装在gem中。 继续并解雇您的终端，并安装gem：
$ gem install middleman Successfully installed middleman-3.3.7 1 gem installedSince we are building a blog, go ahead and install the middleman-blog gem too:
由于我们正在构建博客，因此请继续安装middleman-blog gem：
$ gem install middleman-blog Successfully installed middleman-blog-3.5.3 1 gem installedAssuming you have created a GitHub account, now you can create your very first Middleman project. For this example, my GitHub user name is middleman-ninja. Therefore, I will name my project .github.io :
假设您已经创建了一个GitHub帐户，现在就可以创建您的第一个Middleman项目。 在此示例中，我的GitHub用户名是middleman-ninja 。 因此，我将命名我的项目 .github.io ：
% middleman init middleman-ninja.github.io --template=blog create middleman-ninja.github.io/Gemfile run bundle install from "." Fetching gem metadata from http://rubygems.org/........ Fetching additional metadata from http://rubygems.org/.. Resolving dependencies... ... Your bundle is complete! Use `bundle show [gemname]` to see where a bundled gem is installed. create middleman-ninja.github.io/.gitignore create middleman-ninja.github.io/config.rb create middleman-ninja.github.io/source create middleman-ninja.github.io/source/2012-01-01-example-article.html.markdown create middleman-ninja.github.io/source/calendar.html.erb create middleman-ninja.github.io/source/feed.xml.builder create middleman-ninja.github.io/source/index.html.erb create middleman-ninja.github.io/source/layout.erb create middleman-ninja.github.io/source/tag.html.erb create middleman-ninja.github.io/source/stylesheets create middleman-ninja.github.io/source/javascripts create middleman-ninja.github.io/source/imagesMiddleman will create a Gemfile and run bundle install to install the necessary dependencies. More importantly, it generates the files necessary to create a blog.
Middleman将创建一个Gemfile并运行bundle install来安装必要的依赖项。 更重要的是，它生成创建博客所需的文件。
Middleman comes packaged with a server. This allows us to preview the site or a blog post, which is especially useful during development. We haven’t done any coding yet, but as a sanity check, cd into the Middleman project and launch the server:
Middleman随附服务器。 这使我们可以预览站点或博客文章，这在开发过程中特别有用。 我们没有做任何的编码还，但作为一个全面的检查， cd到中间人项目并启动服务器：
% cd middleman-ninja.github.io % middleman server middleman server WARN: Unresolved specs during Gem::Specification.reset: rack (< 2.0, >= 1.4.5) uber (~> 0.0.4) rack-test (~> 0.6.2) thor (< 2.0, >= 0.15.2) activesupport (>= 3.1, ~> 4.1.0) listen (< 3.0, >= 2.7.9) WARN: Clearing out unresolved specs. Please report a bug if this causes problems. == The Middleman is loading == The Middleman is standing watch at http://0.0.0.0:4567 == Inspect your site configuration at http://0.0.0.0:4567/__middlemanPoint your browser to http://0.0.0.0:4567. If you are having troubles, try http://localhost:4567 instead.
将浏览器指向http://0.0.0.0:4567 。 如果遇到问题，请尝试使用http://localhost:4567 。
If you see the above page, you have successfully set up Middleman. As you can see, Middleman makes no attempt to style your pages. Everything is up to you.
如果看到上面的页面，则说明您已经成功设置了Middleman。 如您所见，Middleman不会尝试为页面设置样式。 一切由您决定。
The structure that Middleman uses is simple:
Middleman使用的结构很简单：
|-- Gemfile |-- Gemfile.lock |-- config.rb |-- source |-- 2012-01-01-example-article.html.markdown |-- calendar.html.erb |-- feed.xml.builder |-- images |-- index.html.erb |-- javascripts |-- layout.erb |-- stylesheets |-- tag.html.erbMost of the action is contained in the source directory. Images, CSS stylesheets, and JavaScript are all stored in their respective folders. Posts, or articles as Middleman calls them, are also stored in the source folder. Configuration is done in the config.rb file.
大多数操作都包含在source目录中。 图像，CSS样式表和JavaScript均存储在各自的文件夹中。 帖子或Middleman称为它们的文章也存储在source文件夹中。 配置在config.rb文件中完成。
You can create an article using middleman article "TITLE-GOES-HERE". In the Middleman project root folder, run the following:
您可以使用middleman article "TITLE-GOES-HERE"来创建文章。 在Middleman项目的根文件夹中，运行以下命令：
% middleman article "5000 killer Middleman Tips" ==> create source/2015-01-27-5000-killer-middleman-tips.html.markdownRefresh your browser and you should find the article listed.
刷新浏览器，您应该找到列出的文章。
We need to pull in a couple more gems in order to build a blog with Middleman and handle deploying to GitHub. Crack open the Gemfile, and make sure it looks like this:
为了与Middleman建立博客并处理向GitHub的部署，我们需要投入更多资源。 破解Gemfile ，并确保它看起来像这样：
source 'http://rubygems.org' gem "middleman", "~> 3.3.7" gem "middleman-blog", "~> 3.5.3" gem "middleman-deploy", "~> 1.0" gem "builder", "~> 3.0"Don’t forget to install the dependencies:
不要忘记安装依赖项：
% bundle installmiddleman-blog and middleman-deploy are examples of Middleman extensions. Extensions in Middleman need to be activated. This is done in the config.rb file. You will notice that blog has already been activated:
middleman-blog和middleman-deploy是Middleman 扩展的示例。 Middleman中的扩展程序需要激活 。 这是在config.rb文件中完成的。 您会注意到blog已被激活：
activate :blog do |blog| # blog configuration endRight below this, you will need to activate a few other extensions:
在此之下，您将需要激活其他一些扩展：
activate :deploy do |deploy| deploy.method = :git deploy.branch = 'master' deploy.build_before = true end activate :directory_indexesBefore setting up GitHub, initialize a new repository in our project:
在设置GitHub之前，请在我们的项目中初始化一个新的存储库：
% git initThe statically generated files will be on the master branch. This means that you shouldn’t make changes on the master branch. Therefore, let’s create another branch called source:
静态生成的文件将位于master分支上。 这意味着您不应在master分支上进行更改。 因此，让我们创建另一个名为source分支：
% git checkout -b source % git commit -am "Initial commit" % git push --set-upstream origin sourceOnce git has done pushing, head over to the repository in GitHub. You will now notice that the source branch has been created.
git完成推送后，转到GitHub中的存储库。 现在您将注意到source分支已创建。
Assuming your GitHub account, create a repository called .github.io , where is your GitHub username. Therefore, I will create a new repository called middleman-ninja.github.io:
假设您的GitHub帐户，创建一个名为 .github.io ，在哪里 是您的GitHub用户名。 因此，我将创建一个名为middleman-ninja.github.io的新存储库：
Following GitHub’s instructions, add the remote repository to your project. Note that we are not doing git push -u origin master yet.
按照GitHub的说明，将远程存储库添加到您的项目中。 注意我们还没有做git push -u origin master 。
git remote add origin https://github.com/middleman-ninja/middleman-ninja.github.io.gitNow, you can deploy straight to GitHub using the middleman deploy command:
现在，您可以使用middleman deploy命令直接部署到GitHub：
% middleman deploy run middleman build from "." create build/2012/01/01/example-article.html create build/2015/01/27/5000-killer-middleman-tips.html create build/feed.xml create build/index.html create build/tags/example.html create build/2015.html create build/2015/01.html create build/2015/01/27.html create build/2012.html create build/2012/01.html create build/2012/01/01.html Deploying via git to remote="origin" and branch="master" Switched to a new branch 'master' [master (root-commit) fce6394] Automated commit at 2015-01-27 09:55:04 UTC by middleman-deploy 1.0.0 11 files changed, 451 insertions(+) create mode 100644 2012.html create mode 100644 2012/01.html create mode 100644 2012/01/01.html create mode 100644 2012/01/01/example-article.html create mode 100644 2015.html create mode 100644 2015/01.html create mode 100644 2015/01/27.html create mode 100644 2015/01/27/5000-killer-middleman-tips.html create mode 100644 feed.xml create mode 100644 index.html create mode 100644 tags/example.htmlWe have configured the middleman-deploy extension to always build the site (generate the static files) before pushing it to GitHub.
我们已经配置了middleman-deploy扩展名，以便在将其推送到GitHub之前始终构建该站点(生成静态文件)。
Along the way, GitHub might prompt you for your user name and password:
在此过程中，GitHub可能会提示您输入用户名和密码：
Username for 'https://github.com': middleman-ninja Password for 'https://middleman-ninja@github.com': Counting objects: 20, done. Delta compression using up to 4 threads. Compressing objects: 100% (18/18), done. Writing objects: 100% (20/20), 2.25 KiB | 0 bytes/s, done. Total 20 (delta 9), reused 0 (delta 0) To https://github.com/middleman-ninja/middleman-ninja.github.io.git * [new branch] master -> masterNote that if you have your SSH keys in GitHub, then you won’t be prompted for your credentials. Give it a few moments, but very soon, your site will be deployed to http:// .github.io :
请注意，如果您的SSH密钥位于GitHub中 ，则不会提示您输入凭据。 稍等片刻，但很快，您的网站将部署到http:// .github.io http:// .github.io ：
Success! You have a fully functioning (albeit ugly) blog hosted completely for free on GitHub!
成功！ 您拥有一个功能齐全(尽管很丑陋)的博客，该博客在GitHub上完全免费托管！
As a recap, here’s the workflow:
回顾一下，这是工作流程：
First, your create a new blog post using middleman article "TITLE".
首先，使用middleman article "TITLE"创建一个新的博客middleman article "TITLE" 。
Second, you write your post. 其次，您写您的帖子。Third, you deploy to GitHub using middleman deploy.
第三，使用middleman deploy部署到GitHub。
That’s it! These are the only steps needed when creating a blog post.
而已！ 这些是创建博客文章时仅需的步骤。
What if I wanted the site to point to www.middleman-ninja.com? You have to do two things. First, set up your domain name servers to point to GitHub. This is covered in GitHub.
如果我希望网站指向www.middleman-ninja.com怎么办？ 您必须做两件事。 首先，设置您的域名服务器以指向GitHub。 这在GitHub中有介绍 。
Second, create a CNAME file. It is extremely important that you create the CNAME file in the source branch because the files in the master branch are clobbered each time you run middleman deploy. Once you are in the branch, create the CNAME file in the source directory.
其次，创建一个CNAME文件。 在source分支中创建CNAME文件非常重要，因为每次运行middleman deploy时master分支中的文件都会被破坏。 进入分支机构后，在source目录中创建CNAME文件。
% git checkout source % vim source/CNAMEThe CNAME file will only contain a single line containing your domain name (without the “www”). For example:
CNAME文件将仅包含一行，其中包含您的域名(不包含“ www”)。 例如：
% cat source/CNAME middleman-ninja.comIf you have set up everything right, you will be able to access your site soon.
如果一切设置正确，您将很快可以访问您的网站。
What if you wanted more than one site on GitHub? How would you do that? The setup is slightly trickier, but not all that complicated. The steps are mostly the same, except when it comes to setting up of git branches.
如果您想在GitHub上拥有多个站点怎么办？ 你会怎么做？ 设置有些棘手，但并不那么复杂。 除了设置git分支外，其他步骤基本相同。
Here’s the plan: We will:
这是计划：我们将：
start a fresh Middleman project and the same Gemfile to get things started faster 开始一个新的Middleman项目和相同的Gemfile，以更快地开始工作 set up git 设置gitconfigure the middleman-deploy extension in config.rb
在config.rb配置middleman-deploy扩展
deploy the site to GitHub 将网站部署到GitHubThis time, we can give it any name we want. In a fresh directory (do not run this command in the existing `middleman-ninja.github.io folder), create a new Middleman blog:
这次，我们可以给它取任何想要的名字。 在一个新目录中(不要在现有的`middleman-ninja.github.io文件夹中运行此命令)，创建一个新的Middleman博客：
% middleman init middleman-is-awesome --template=blogLet’s set up the source branch:
让我们设置source分支：
% cd middleman-is-awesome % git init % git checkout -b sourceOpen up the Gemfile, and make sure it looks like the following:
打开Gemfile ，并确保它如下所示：
# If you have OpenSSL installed, we recommend updating # the following line to use "https" source 'http://rubygems.org' gem "middleman", "~> 3.3.7" gem "middleman-blog", "~> 3.5.3" gem "middleman-deploy", "~> 1.0" # For feed.xml.builder gem "builder", "~> 3.0"Remember to install the gems using bundle install:
请记住使用bundle install安装gem：
% bundle installNow, in config.rb, we need to activate the middleman-deploy extension:
现在，在config.rb ，我们需要激活middleman-deploy扩展：
activate :deploy do |deploy| deploy.method = :git deploy.branch = 'gh-pages' deploy.build_before = true endNotice that this time, the deploy.branch is set to gh-pages.
请注意，这一次将deploy.branch设置为gh-pages 。
Next, create a new repository in GitHub. For convenience sake, give it the same name. Remember to set the remote too:
接下来，在GitHub中创建一个新的存储库。 为了方便起见，给它起同样的名字。 记住也要设置遥控器：
% git remote add origin https://github.com/middleman-ninja/middleman-is-awesome.gitOnce that’s done, you can go ahead and run the deploy command:
完成后，您可以继续运行deploy命令：
% middleman deployIn a few moments, the newly created site will be available at http:// .github.io/middleman-is-awesome/ . What about domain names? It is the same story as before. Create a CNAME file in the source directory of the source branch, and point your name servers to GitHub, and you’re set.
稍后，新创建的网站将在http:// .github.io/middleman-is-awesome/ http:// .github.io/middleman-is-awesome/ 。 域名呢？ 这是和以前一样的故事。 在source分支的source目录中创建一个CNAME文件，然后将您的名称服务器指向GitHub，即已完成设置。
Hopefully, you now realize that Middleman along with GitHub is an extremely potent and cost-effective combination to create static websites. I have found Middleman to have a pleasant workflow. Extensions are available either in the form of Middleman extensions, or as Ruby gems.
希望您现在已经意识到Middleman和GitHub是创建静态网站的一种极其有效且具有成本效益的组合。 我发现Middleman的工作流程愉快。 扩展既可以以Middleman扩展的形式提供，也可以以Ruby gem的形式提供。
This post didn’t cover customising the look and feel. That’s because it is no different from developing and styling any other site! For inspiration, you can look at other sites that were developed using Middleman. Thanks for reading!
这篇文章没有涵盖自定义外观。 那是因为它与开发和设计任何其他网站没有什么不同！ 为了获得启发，您可以查看使用Middleman开发的其他站点。 谢谢阅读！
翻译自: https://www.sitepoint.com/free-static-sites-middleman-github/
相关资源：全套静态网站