这是系列文章的开头，是创建网站的第一步，这部分的内容我们将下载并配置 Laravel 本地开发环境。创建博客应用，它会包含主要的 HTML 结构，我们可以通过本地进行浏览访问。
配置开发环境
集成开发环境 XAMPP
开发环境的搭建方式有很多，比如 Homestead 开发环境，为了让新手能快速搭建开发环境，我们选择了集成开发环境这种容易快速上手使用的方案，如果你已经了解其它的方式或有精力去研究，欢迎查阅其它文章，这里不过多阐述。
XAMPP（Apache+MySQL+PHP+PERL）是一个功能强大的建站集成软件包。它可以在 Windows、Linux、Solaris、Mac OS X 等多种操作系统下安装使用，支持多语言：英文、简体中文、繁体中文、韩文、俄文、日文等。
Windows 下还可以用 WAMP 集成开发包，和 XAMPP 类似，有需要话也可以进行了解
你可以在这里下载适合你系统的版本：
https://www.apachefriends.org/zh_cn/download.html
安装完成后，你可以通过控制面板启动相应的服务，控制面板如下：
Mac 系统中控制面板如下，Windows 系统与之大同小异。
在你启动这 MySQL, Apache 这 2 个服务后，你就可以通过下面的地址来访问数据库：
http://localhost/phpmyadmin/
phpMyAdmin 是一个以PHP为基础，以Web-Base方式架构在网站主机上的MySQL的数据库管理工具，让管理者可用Web接口管理MySQL数据库。
你通过页面登录即可访问并管理数据库
注意：XAMPP 默认安装时设定的 MySQL 账户 root 密码为空
数据库配置
由于项目中需要用到数据库，这里我们先创建项目的数据库 larablog：
构建应用
创建应用
首先，通过命令行工具进入你的 Web 目录下：
Web 目录即 XAMPP 安装目录下的 htdocs 目录
我们这里通过 Composer 创建项目，执行如下命令：
composer create-project laravel/laravel larablog --prefer-dist "5.1.*"
Laravel 5.1 LTS 是 Laravel 历史上第一个提供 LTS（长期支持 － long-time support） 支持的版本。由于不同版本特性之间的区别这里无法详细讲解，所以我们这里选用了 LTS 版，了解一个长期稳定的版本相对来说很有必要。
配置项目的数据信息
Laravel 安装后会在目录下生成名为 .env 的配置文件，通常我们不会该文件纳入版本管理工具（比如 git），我们在本地开发和生产服务器上不同环境的配置信息也是区别于此。在项目目录下还有一个 .env.example 文件，是作为配置模板而存在。
让我们来编辑 .env 文件，设置数据库信息：
这个文件里罗列的很多已经设定好的配置，默认用于本地开发环境，如果是生产环境，有些配置需要调整，这里我们主要是设置数据相关的配置。
找到如下部分，对内容进行更改：
DB_DATABASE=larablog
DB_USERNAME=root
DB_PASSWORD=
这里，数据库的名称使用的是开头创建的 larablog，同时数据库密码为空。
默认结构说明
一个新安装的 Laravel 根目录包含许多个文件夹：
app 目录，如你所料，这里面包含应用程序的核心代码。
bootstrap 目录包含了几个框架启动跟自动加载设置的文件。以及在 cache 文件夹中包含着一些框架在启动性能优化时所生成的文件。
config 目录，顾名思义，包含所有应用程序的配置文件。
database 目录包含数据库迁移与数据填充文件。如果你愿意的话，你也可以在此文件夹存放 SQLite 数据库。
public 目录包含了前端控制器和资源文件（图片、JavaScript、CSS，等等）。
resources 目录包含了视图、原始的资源文件 (LESS、SASS、CoffeeScript) ，以及语言包。
storage 目录包含编译后的 Blade 模板、基于文件的 session、文件缓存和其它框架生成的文件。此文件夹分格成 app、framework，及 logs 目录：
-
app目录可用于存储应用程序使用的任何文件。 -
framework目录被用于保存框架生成的文件及缓存。 -
logs目录包含了应用程序的日志文件。
tests 目录包含自动化测试。这有一个现成的 PHPUnit 例子。
vendor 目录包含你的 Composer 依赖模块。
路由
在项目中 app/Http/routes.php 是用用程序的路由文件，请求的处理都通过这里进行进行配置。
默认如下：
<?php
Route::get('/', function () {
return view('welcome');
});
这里配置的路由信息是，访问网站根路径是，显示视图 welcome 的内容。
视图 welcome 位于 resources/views/welcome.blade.php。
运行项目
在项目所在目录下，通过命令行执行 php artisan serve 启动应用，操作如下：
➜ larablog php artisan serve
Laravel development server started on http://localhost:8000/
Laravel 的控制台命令启动了 PHP 内置服务器，让我们可以不需要单独设立虚拟站点也可以访问应用。是一种很快速便捷的运行办法。
说明一下，本身我们通过 XAMPP 内置的 Apache 也可以配置虚拟站点进行访问，因为这种运行 PHP 内置服务器的方式相对更方便，所以就没有提及它。这里主要为了避免新手学习重要的内容时被一些细枝末节的问题所干扰，后期自己可以了解如何配置虚拟站点来运行应用，尤其是当使用了 Homestead 这样的开发环境。
好了，如果你通过浏览器打开页面 http://localhost:8000/ 将会看到如下页面：
尝试增加一些内容
接下来，我们尝试增加一些简单的内容，感受一下。
在 app/Http/routes.php 中添加一个路由配置：
Route::get('/hello/{name}', function($name) {
return 'Hello '. $name;
});
我们配置了一个路由用于输出欢迎内容。
访问 http://localhost:8000/hello/larablog 即可看到如下内容：
Hello larablog
模板引擎
在我们对 Laravel 构建应用有个基础了解后，我们先从模版开始构建站点的结构。Laravel 使用了 Blade 作为模板引擎。
Blade 是 Laravel 所提供的一个简单且强大的模板引擎。相较于其它知名的 PHP 模板引擎，Blade 并不会限制你必须得在视图中使用 PHP 代码。所有 Blade 视图都会被编译缓存成普通的 PHP 代码，一直到它们被更改为止。这代表 Blade 基本不会对你的应用程序生成负担。
Blade 视图文件使用
.blade.php做为扩展名，通常保存于resources/views文件夹内。
基础布局
首先，我们要为整个博客站点建立一个基础视图模板，整个站点视图基于这个模板，继承该视图并显示。
在项目录下新建文件 resources/layouts/app.blade.php ，内容如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
<title>@yield('title') - larablog</title>
@section('stylesheets')
<link href="{{ asset('css/screen.css') }}" type="text/css" rel="stylesheet" />
@show
<link rel="shortcut icon" href="/favicon.ico" />
</head>
<body>
<section id="wrapper">
<header id="header">
<div class="top">
@section('navigation')
<nav>
<ul class="navigation">
<li><a href="/">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
@show
</div>
<hgroup>
<h2>@yield('blog_title', '<a href="/">larablog</a>')</h2>
<h3>@yield('blog_tagline', '<a href="/">creating a blog in Laravel</a>')</h3>
</hgroup>
</header>
<section class="main-col">
@yield('body')
</section>
<aside class="sidebar">
@include('partials.sidebar')
</aside>
<div id="footer">
@section('footer')
Laravel blog tutorial
@show
</div>
</section>
@yield('javascripts')
</body>
</html>
如果你仔细看，会发现 @include('partials.sidebar') 这段代码，我们额外引入了一个局部视图。
所以，还需要建立一个局部页面 resources/views/partials/sidebar.blade.php，内容如下：
@section('sidebar')
Sidebar content
@show
在 app.blade.php 文件中包含了传统的 HTML 语法。不过，请注意 @section 与 @yield 命令。正如其名，@section 命令定义一个内容区块，而 @yield 命令被用来 “显示指定区块” 的内容。
在默认情况下，Blade 模板中的 {{ }} 表达式将会自动调用 PHP 的 htmlentities 函数，以避免 XSS 攻击。如果你不希望你的数据被转义，可以使用下列的语法：
Hello, {!! $name !!}.
更多模板相关的信息请查看文档 Blade Templates ，Blade 模板
在 stylesheets 内容区块中，我们引入了一个样式表：
<link href="{{ asset('css/screen.css') }}" type="text/css" rel="stylesheet" />
我们使用 asset 帮助函数来生成样式资源所在的路径，其函数作用如下：
// 根据目前请求的协定（HTTP 或 HTTPS）产生资源文件网址
asset('img/photo.jpg', $title, $attributes);
而 public/css/screen.css 的内容如下：
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}
body { line-height: 1;font-family: Arial, Helvetica, sans-serif;font-size: 12px; width: 100%; height: 100%; color: #000; font-size: 14px; }
.clear { clear: both; }
#wrapper { margin: 10px auto; width: 1000px; }
#wrapper a { text-decoration: none; color: #F48A00; }
#wrapper span.highlight { color: #F48A00; }
#header { border-bottom: 1px solid #ccc; margin-bottom: 20px; }
#header .top { border-bottom: 1px solid #ccc; margin-bottom: 10px; }
#header ul.navigation { list-style: none; text-align: right; }
#header .navigation li { display: inline }
#header .navigation li a { display: inline-block; padding: 10px 15px; border-left: 1px solid #ccc; }
#header h2 { font-family: 'Irish Grover', cursive; font-size: 92px; text-align: center; line-height: 110px; }
#header h2 a { color: #000; }
#header h3 { text-align: center; font-family: 'La Belle Aurore', cursive; font-size: 24px; margin-bottom: 20px; font-weight: normal; }
.main-col { width: 700px; display: inline-block; float: left; border-right: 1px solid #ccc; padding: 20px; margin-bottom: 20px; }
.sidebar { width: 239px; padding: 10px; display: inline-block; }
.main-col a { color: #F48A00; }
.main-col h1,
.main-col h2
{ line-height: 1.2em; font-size: 32px; margin-bottom: 10px; font-weight: normal; color: #F48A00; }
.main-col p { line-height: 1.5em; margin-bottom: 20px; }
#footer { border-top: 1px solid #ccc; clear: both; text-align: center; padding: 10px; color: #aaa; }
首页视图
我们已经建立好了基础的布局模板。之后我们基于布局视图建立的页面通常和控制器方法有关，比如博客显示页面会有对应的博客显示模板。
让我们来建立首页的控制器方法和与之相应的模板。
首先，建立控制器。在命令行中进入项目所在目录，执行如下命令：
php artisan make:controller PageController --plain
该命令会帮助我们新建控制器文件 app/Http/Controllers/PageController.php，将其内容更改如下：
<?php
namespace App\Http\Controllers;
class PageController extends Controller
{
public function index()
{
return view('pages.index');
}
}
接下来，为这个控制器方法创建视图，新建 resources/views/pages/index.blade.php，内容如下:
@extends('layouts.app')
@section('title', 'larablog')
@section('body')
Blog homepage
@endsection
我们完成了首页视图，它继承自基础布局。接下来让我们为首页配置路由信息，编辑 app/Http/routes.php，将首页的路由更改如下：
Route::get('/', 'PageController@index')->name('homepage');
此时，我们已为首页定义了控制器方法，利用模板继承构建了首页的视图，并配置了路由。
接下来便可以通过访问 http://localhost:8000/ 查看首页的实际显示效果。
关于页面
这个部分的最后任务是创建一个静态页面。将演示如何将其它页面联系在一起，同时进一步了解模板继承相关的用法。
路由
当我们要创建一个页面的时候，首先都会考虑该给它建立怎么样的路由信息。这里，我们打开 app/Http/routes.php，添加如下内容：
Route::get('/about', 'PageController@about')->name('about');
控制器
打开新建的文件 app/Http/Controllers/PageController.php，添加新的控制器方法：
public function about()
{
return view('pages.about');
}
视图
至于视图，我们创建一个新的文件位于 resources/views/pages/about.blade.php，内容如下：
@extends('layouts.app')
@section('title', 'About')
@section('body')
<header>
<h1>About larablog</h1>
</header>
<article>
<p>Donec imperdiet ante sed diam consequat et dictum erat faucibus. Aliquam sit
amet vehicula leo. Morbi urna dui, tempor ac posuere et, rutrum at dui.
Curabitur neque quam, ultricies ut imperdiet id, ornare varius arcu. Ut congue
urna sit amet tellus malesuada nec elementum risus molestie. Donec gravida
tellus sed tortor adipiscing fringilla. Donec nulla mauris, mollis egestas
condimentum laoreet, lacinia vel lorem. Morbi vitae justo sit amet felis
vehicula commodo a placerat lacus. Mauris at est elit, nec vehicula urna. Duis a
lacus nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
posuere cubilia Curae.</p>
</article>
@endsection
这个页面并没有特殊的地方，我们只是模拟了一些页面文字内容，通过控制器方法渲染了它。
页面链接
我们现在的关于页面可以正常访问了，你可以通过 http://localhost:8000/about 访问。
目前来说，我们没有在博客上添加任何跟它有关的访问链接，用户还得想我们一样输入完整的网址。
接下来让我们添加访问这个页面链接，同时了解如何通过路由来生成 URL。尽量不去使用如下的方式去链接页面：
<a href="/contact">Contact</a>
这是通过硬连接的方式与其它页面联系在一起。这很常见，但这样的做法存在一个问题就是，
如果您想在任何时候更改联系人页面的位置，您将必须找到所有对硬链接的引用并更改它们。
比较好的做法是利用 Laravel 中提供的方法来生成路径和 URL：
// 产生给定路由名称网址
route($route, $parameters, $absolute = true);
// 产生给定路径的完整网址
url('path', $parameters = array(), $secure = null);
知道这一点之后，让我们找到布局模板 resources/views/app.blade.php 页面。
将导航 navigation 内容区块的内容更改如下：
<nav>
<ul class="navigation">
<li><a href="{{ route('homepage') }}">Home</a></li>
<li><a href="{{ route('about') }}">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
最后，更新 logo 的跳转链接，同样还是位于 resources/views/app.blade.php 文件中：
<hgroup>
<h2>@section('blog_title')<a href="{{ route('homepage') }}">larablog</a>@show</h2>
<h3>@section('blog_tagline')<a href="{{ route('homepage') }}">creating a blog in Laravel</a>@show</h3>
</hgroup>
现在刷新你的浏览器页面，将会看到首页和关于页面如你所期望的链接在一起，并正常显示。
总结
我们已经介绍了 Laravel 应用程序的基本内容，包括配置和启动应用程序。同时也探索了 Laravel 程序背后的基本构件原理，包括路由、控制器、模板引擎的使用。
接下来我们将关注如何创建联系人页面。该页面比“关于”页面要稍微深入一些，因为它允许用户提交表单与服务器交互。下一章讲介绍包括表单提交、验证、处理在内的相关内容。
