Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Add documentation for 404 pages, permalinks, and our own 404 page :)
  • Loading branch information
damiani committed Apr 19, 2018
1 parent e6012ba commit 1f07695
Show file tree
Hide file tree
Showing 4 changed files with 110 additions and 0 deletions.
35 changes: 35 additions & 0 deletions source/404.blade.php
@@ -0,0 +1,35 @@
---
permalink: 404.html
---

@extends('_layouts.master')

@section('body')
<nav class="navbar navbar-brand">
<div class="container">
<div class="navbar-content">
<div>
<a class="link-plain text-xxl flex-y-center" href="{{ $page->asset_prefix }}/">
<img class="logo" src="{{ $page->asset_prefix }}/img/jigsaw-logo-440.png" width="220">
</a>
</div>
<div class="docsearch navbar-buttons">
<input id="docsearch" class="docsearch__input" type="text" name="docsearch" value=""/>
<span class="docsearch__icon"></span>
</div>
</div>
</div>
</nav>

<div class="container m-xs-b-6 documentation-page">
<div class="row">
<div class="col-xs-12 p-xs-y-8 text-center">
<h2>Something went wrong...</h2>
<h4 class="m-xs-y-2">
We couldn't find the page you were looking for.<br/>
Try using the search box above.
</h4>
</div>
</div>
</div>
@endsection
1 change: 1 addition & 0 deletions source/_layouts/documentation.blade.php
Expand Up @@ -42,6 +42,7 @@
<a class="nav-list-item nav-list-item--sub" href="{{ $page->asset_prefix }}/docs/collections-variables-and-functions/">Variables &amp; Helper Functions</a>

<a class="nav-list-item" href="{{ $page->asset_prefix }}/docs/pretty-urls/">Pretty URLs</a>
<a class="nav-list-item" href="{{ $page->asset_prefix }}/docs/custom-404-page/">Custom 404 Page</a>
<a class="nav-list-item" href="{{ $page->asset_prefix }}/docs/compiling-assets/">Compiling Assets</a>
<a class="nav-list-item" href="{{ $page->asset_prefix }}/docs/deploying-your-site/">Deploying Your Site</a>
</nav>
Expand Down
54 changes: 54 additions & 0 deletions source/docs/custom-404-page.md
@@ -0,0 +1,54 @@
---
extends: _layouts.documentation
section: documentation_content
---

## Custom 404 Page

You can create a custom 404 error page to display when someone tries to access a page on your site that does not exist. How you do this depends on where your site is hosted.

### Using GitHub Pages or Netlify

Some hosts, like GitHub Pages and Netlify, are automatically configured to look for a file named `404.html` at the root level of your site. If your Jigsaw site is using [pretty URLs](/docs/pretty-urls), you can specify a `permalink` in the file for your custom 404 page so that the `.html` extension is preserved:

> _source/404.md_
```
---
extends: _layouts.master
section: content
permalink: 404.html
---
### Sorry, that page does not exist.
```

Note that YAML front matter can also be used in Blade files, so you can accomplish the same thing using a Blade file named `404.blade.php`.

This will create a file named `404.html` in your site's `build` directory.

### Using an Nginx Server

You can create your custom 404 file as `404.md` or `404.blade.php` in your `source` directory, and if your Jigsaw site is using [pretty URLs](/docs/pretty-urls), it will be output as `/404/index.html`:

> _source/404.md_
```
---
extends: _layouts.master
section: content
---
### Sorry, that page does not exist.
```

When hosting your site on an Nginx server, you will need to configure the `error_page` setting in your server's `nginx.conf` file, or in the specific configuration file that Nginx is using for your site. These configuration files are typically found in `/etc/nginx/`, though their location varies by server. If your site is managed using Laravel Forge, for example, the configuration file for your site will be located at `/etc/nginx/sites-enabled/{name-of-your-site}`; it can also be edited via Forge's "Edit Nginx Configuration" option in the "Files" menu.

Once you've located your Nginx configuration file, add the following line to the `server` block:

```
error_page 404 /404;
```

After you restart your Nginx server, it will look for the error page `/404/index.html` in your `build` directory whenever someone navigates to a page that does not exist.

20 changes: 20 additions & 0 deletions source/docs/markdown.md
Expand Up @@ -115,3 +115,23 @@ date: 2018-02-16
```html
<p>The formatted date is {{ date('F j, Y', $post->date) }}</p>
```


<br>

**Specifying a permalink**

You can specify a `permalink` in the YAML front matter to override the default path of a file when your site is built. This can be used, for example, to create a [custom 404](/docs/custom-404-page) page that is output to `404.html` (instead of the default `404/index.html`):

> _source/404.md_
```
---
extends: _layouts.master
section: content
permalink: 404.html
---
### Sorry, that page does not exist.
```

0 comments on commit 1f07695

Please sign in to comment.