项目：与Middleman建立完整的网站

最新推荐文章于 2025-12-22 15:57:21 发布

翻译最新推荐文章于 2025-12-22 15:57:21 发布 · 507 阅读

文章标签：

#java #python #html #github #web

本文详细介绍如何使用Middleman构建静态网站，涵盖基本设置、LiveReload、GitHub Pages部署、Bourbon及Neat集成等内容。

在本系列的第三部分中，我们将开始动手，并开始为虚拟播客站点构建一个站点：“ Matcha Nerdz”。我们将使用Middleman，Bourbon，Neat和Bitters。我们走吧！

在这篇文章中

路线图
基本博客设置
LiveReload
整理帖子
GitHub页面部署
智慧资产
波旁威士忌设置
规范化和jQuery

路线图

让我们从前进的方向开始。在接下来的几篇文章中，我将为名为“ Matcha Nerdz”的虚拟播客构建一个小型静态站点，该播客适用于希望深入研究粉末绿茶的人们。它将具有以下页面：

每个标签的页面
每集的详细信息页面
以前的播客的索引页

我们将使用Middleman生成静态网站，并使用Bourbon套件进行所有样式设计。我希望您在到达这一点之前已经看过我以前有关波旁威士忌，内特和中间人的教程。如果没有，我建议您去阅读，除非您对基础已经足够自信。

对于所有与样式有关的事情，我已经很长时间依赖Bourbon了。另外，我确实研究了缩进的Sass语法-与.scss语法相比，我更喜欢它。 .sass语法是我想向新手扔的唯一（可能）不熟悉的部分，因为我觉得这确实值得了解。

基本博客设置

通过在终端中输入以下内容，为我们的播客网站启动一个新应用：

middleman init matcha_nerdz

然后转到我们的项目目录：

cd matcha_nerdz

现在，我们将继续进行Git：

git init      
# => to initiate new Git repo

git add --all 
# => adds all the files for staging

git commit -m 'Initital commit' 
# => commits changes

接下来，我们将博客模板添加到组合中。这是我们播客网站的良好基础。稍后，我们将调整文章以显示SoundCloud中的播客音频。但是，目前，它只是一个博客。

在Gemfile中添加：

gem "middleman-blog"

然后通过终端：

bundle
# or
bundle exec middleman

middleman init --template=blog

这将更新您的“ matcha_nerdz”文件夹。 “ .config.rb”和您的索引模板也会有所更新。最重要的是，您将获得供稿，标签页，日历页，示例文章和新版式的新模板。检查终端的输出：

identical  .gitignore
   update  config.rb
    exist  source
   create  source/2012-01-01-example-article.html.markdown
   create  source/calendar.html.erb
   create  source/feed.xml.builder
   update  source/index.html.erb
   create  source/layout.erb
   create  source/tag.html.erb
    exist  source/stylesheets
    exist  source/javascripts
    exist  source/images

Git：

git add --all
git commit -m 'Adds blog template'

创建新文章

现在，您可以通过命令行创建新文章：

middleman article 'My new fancy second article'
#=> create  source/2015-11-22-my-wonderful-second-article.html.markdown

这将在“ / source”下创建一个新的markdown文章。这不是最佳的存储方式，但我们会实现的。启动服务器以查看第一个示例博客文章：

middleman
#or
middleman server

整理东西

接下来，我们需要做一些内务处理。博客模板在“ source / layout.erb”下创建了一个新的布局。我们需要在“ source / layouts / layout.erb”中删除原始的一个，然后将新的移动到那里。因此，通过终端：

rm source/layouts/layout.erb
mv source/layout.erb source/layouts/

我们还需要使用在布局文件中删除的内容更新新的“ layout.erb”。将以下内容添加到“ source / layouts / layout.erb”中的<head>标记中：


   
<%= stylesheet_link_tag "normalize", "all" %>
<%= javascript_include_tag  "all" %>

最重要的是，这确保您的JS和样式资产可用。

吉特

git rm source/layout.erb
git add --all
git commit -m 'Moves new layout into /layouts
               Adds asset links
               Removes old layout'

LiveReload

为了使我们的生活更方便，我们将添加LiveReload。我们需要获取gem，然后在“ config.rb”文件中将其激活。

在我们的Gemfile中：

gem 'middleman-livereload'

在终端中：

bundle

然后在config.rb中：

#uncomment
activate :livereload

最后是我们的Git命令：

git add --all
git commit -m 'Activates LiveReload'

激活此选项后，重新启动服务器，只要您更改页面上的内容，样式或行为，页面就会自动刷新。救生员，相信我！

注意！ 请注意：如果您正在运行其他本地服务器，LiveReload可能不会发挥作用。您现在需要杀死其他服务器。

整理帖子

当您查看文章现在存储在何处时，您会很快意识到，直接位于“ / source”下的组织非常繁琐。发表几篇文章，您会淹没在帖子中。不必那么麻烦，而是让我们在所有帖子的“ / source”下创建一个目录。将您的文章移到那里，并让Middleman知道在哪里可以找到它们。

mkdir source/posts
mv source/2012-01-01-example-article.html.markdown source/posts/

然后，我们添加“ / posts”作为博客文章的来源。在config.rb中：

blog.sources = "posts/:year-:title.html"

然后我们的Git命令：

git rm source/2012-01-01-example-article.html.markdown
# Removes moved file from repo

git add --all
gco -m 'Adds new folder for posts and adds source in config.rb'

就是这样。一切都没有改变，您应该像以前一样看到示例文章。但是，帖子的存储更加理智。还很酷的是，如果您通过命令行创建新文章，则新帖子将自动存储在“ / post”中：

middleman article 'My awesome 3rd article'
# => create  source/posts/2015-my-awesome-3rd-article.html.markdown

GitHub页面部署

对我来说，将静态站点推送到GitHub Pages是一种便捷的解决方案，我不想让您通过Heroku或Amazon的S3服务进行部署。让我们保持简单！

在Gemfile中：

gem "middleman-deploy"

然后在终端中：

bundle

我们需要在“ config.rb”中添加一个部署块：

activate :deploy do |deploy|
  deploy.method = :git
  deploy.branch = 'gh-pages'
  deploy.build_before = true
end

为了让GitHub Pages查找您CSS和JS资产，我们还需要在config.rb中激活以下内容：

configure :build do
  activate :relative_assets
end

然后，在GitHub上创建一个仓库，添加远程并部署：

git remote add origin https://github.com/yourusername/repositoryname.git

middleman deploy

繁荣！您的站点位于“ yourusername.github.io/projectname”下，您的资产应进行分类。我喜欢这个过程-它再简单不过，也更加用户友好。 GitHub很棒！

git add --all
gco -m 'Adds setup for GitHub Pages deployment'

智慧资产

在进入Bourbon设置之前的最后一步，我想摆脱Middleman附带的样式，并优化我们的资产以在浏览器中获得更好的性能-资产最小化和串联。转到“ source / stylesheets / all.css”并删除其内容。只需保留第一行：

@charset "utf-8";

Git命令：

git add --all
git commit -m 'Removes unneccessary Middleman styles'

接下来，我们要激活几个选项以优化“ config.rb”中的性能：

configure :build do
  activate :asset_hash
  activate :minify_javascript
  activate :css
  activate :gzip
end

然后，再次，Git命令：

git add --all
git commit -m 'Activates performance optimizations'

让我快速解释一下我们在这里所做的事情：

：gzip

目前，gzip是最流行，最有效的压缩方法。它的压缩算法在文件中找到相似的字符串并将其压缩。对于充满空白和匹配标签HTML，这非常有效，通常可将HTTP响应大小减少多达70％。激活它不仅gzip您HTML，而且CSS和JS文件。在构建期间，Middleman会照常创建文件，但还会使用“ .gz”版本进行复制。当浏览器与您的文件取得联系时，它可以选择是提供gzip压缩文件还是常规文件。 Web和移动浏览器都大力支持gzipping。

：minify_css

此过程会从您的样式中删除所有不必要的垃圾，并显着减小其文件大小。简而言之，您CSS成为一个大问题-已针对机器读取进行了优化。绝对不友好的眼睛。

：minify_javascript

这与minify_css相同，但更加复杂。

：asset_hash

这将激活您的资产的哈希。这意味着您的资产文件名会更改并接收一些额外的信息（在构建过程中），这些信息会通知浏览器是否需要重新下载资产。现在，文件的名称取决于该文件的内容。散列的资产被浏览器缓存，您的站点得到更快的渲染。另一个说法是“指纹识别”，因为它提供了一种简单的解决方案来通知浏览器文件的两个版本是否相同。部署日期无关紧要，只涉及内容。下面看一下哈希资产文件的外观：

屏幕截图

这看起来很讨厌，但是现在您的图像，样式表和JavaScript文件通过添加的“随机”代码获得了唯一的名称：（唯一的）哈希。每次您更改资产并再次执行构建过程时，此哈希都会更改，这反过来又向浏览器发出信号，表明浏览器只有在那时才需要重新下载该特定文件。然后，该文件有效失效，此过程称为“高速缓存破坏”。

还值得一提：您可以像以前一样引用文件，但是在构建过程中，HTML中的引用会更新为使用这些哈希名称。看一看：

“ /build/index.html(.gz）”：

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv='X-UA-Compatible' content='IE=edge;chrome=1' />
    	 <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
    <title>Blog Title</title>
    <link rel="alternate" type="application/atom+xml" title="Atom Feed" href="/feed.xml" />
    <link href="stylesheets/normalize-6197e73d.css" rel="stylesheet" type="text/css" /><link href="stylesheets/all-0355b587.css" rel="stylesheet" type="text/css" />
    <script src="javascripts/all-da39a3ee.js" type="text/javascript"></script>
  </head>
  <body>
  ...
  </body>
</html>

在“ / build”文件夹中，JS和CSS文件会自动使用哈希资产名称进行引用。由于进行了这种哈希处理，当您在同一会话中浏览不同页面或稍后再次访问页面时，这些资产已被缓存，无需再次请求-除非您进行更改。此过程将您的请求数量减少了惊人的数量。那不是很酷吗？所有这些都包含“ config.rb”中的一行代码以及一些Sprockets向导。 Booyakasha！

所有这些资产优化技术的关键是最大程度地减少请求数量以及文件和资产的请求大小。 Middleman可以立即为您提供出色的性能提升，而您所做的工作却很少。

注意： GitHub Pages开箱即用。但是确保所有内容都到位并没有什么害处-特别是如果您以后决定将应用程序托管在其他位置。

让我们看一下当前阶段。您的索引页面现在看起来应该是准系统：

波旁威士忌设置

对于这个项目，我要使用波旁威士忌的三颗宝石：

波旁酒
整齐
苦药类，浓生啤酒

让我们将它们添加到我们的Gemfile中并捆绑：

gem 'bourbon'
gem 'neat'
gem 'bitters'

在终端中：

bundle

波旁威士忌和整洁的啤酒现在很不错（几乎）。苦者首先需要安装一些东西。我们需要进入样式表目录并激活一个生成器，该生成器将一堆Bitters文件放置在“ / base”文件夹中。

cd source/styleheets
bitters install

看看我们在此之后拥有什么：

屏幕截图

苦涩是您设计的基准。它为UI元素（如按钮，类型，表单，错误消息等）提供了一些合理的设计。 Bitters还会为您的Neat网格准备一个“ grid-settings”文件，我们还必须通过取消注释“ source / stylesheets / base / _base.scss”中的以下行来进行设置：

@import "grid-settings";

现在，要完成我们的波旁威士忌设置，我想将以下变量添加到我们的网格设置中。他们为调整网格大小和激活可视化网格奠定了基础，这有助于我们更好地调整设计。

在“ /source/stylesheets/base/_grid-settings.scss”中：

$column: 90px;
$gutter: 30px;
$grid-columns: 12;
$max-width: 1200px;

$visual-grid: true;
$visual-grid-index: back;
$visual-grid-opacity: 0.15;
$visual-grid-color: red;

完成这项工作的最后一步是将“ /stylesheets/all.css”重命名为“ /stylesheets.all.sass”并导入我们的波旁威士忌文件。

注意：由于我们切换到缩进Sass语法，因此我们还需要在@charset行的末尾@charset分号。

“ all.css.scss”：

@charset "utf-8"

@import 'bourbon'
@import 'base/base'
@import 'neat'

我们在Bourbon之后立即在此处导入Bitters的基本文件，因为在导入Neat之前我们需要访问Neat的网格设置文件（位于“ / base”文件夹中）。

Git：

git add --all
git commit -m 'Sets up Bourbon and activates grid settings'

我们来看一下！您可以看到红色的可视网格，而且还要感谢Bitters，我们的字体比浏览器的默认设置有所改进。看一下屏幕截图：

规范化和jQuery

Middleman带有一个Normalize文件，默认情况下该文件导入“ all.css”。这是一个不必要的资产请求，我们可以轻松解决，因此请先将“ source / stylesheets / normalize.css”重命名为“ source / stylesheets / _normalize.css.scss”。现在，我们需要在“ source / stylesheets / all.sass”中的@charset之后的顶部直接导入部分内容：

@charset "utf-8"

@import 'normalize'

@import 'bourbon'
@import 'base/base'
@import 'neat'
@import 'normalize'

我们不应该忽略的一件事是布局中样式表的链接。由于我们使用的Sass部分都被导入到最终的“全局”样式表中，因此我们不再需要链接到normalize.css －链接到all.sass就足够了。

在“源/布局/layout.erb”中：

<%= stylesheet_link_tag "all" %>

然后Git：

git rm source/stylesheets/normalize.css
git add --all
git commit -m 'Imports normalize partial properly'

最后，在休息之前，我们应该添加稍后将需要的jQuery。在Gemfile中：

gem "jquery-middleman"

在终端中：

bundle

由于我要为此项目使用CoffeeScript，因此我们需要将“ source / javascripts / all.js”重命名为“ source / javascripts / all.coffee”。在这里，我们需要jQuery来实现Sprockets / Asset Pipeline，并且一切就绪。

在所有咖啡中：

//= require jquery

我们的Git命令：

git rm source/javascripts/all.js
git add -all
git commit 'Adds jQuery to the Mix
            Renames gobal js file to coffee'

并部署：

middleman deploy

部署后，在GitHub Pages上打开您的站点，看一切是否按预期工作。不错的工作！

打破

！我们休息一下。我们设法通过这一步骤摆脱了许多无聊的设置步骤。希望当您开始一个新的Middleman项目时，您能有一个坚实的基础清楚地了解您需要什么。接下来，我们将扩展在此处构建的内容，并继续努力为播客建立一个不错的站点。

翻译自: https://webdesign.tutsplus.com/articles/project-build-a-complete-website-with-middleman--cms-25429