Mercurial > piecrust2
changeset 246:afc1d2c60854
docs: Tutorial part 1.
author | Ludovic Chabant <ludovic@chabant.com> |
---|---|
date | Thu, 19 Feb 2015 23:30:08 -0800 |
parents | 64184c9cf487 |
children | f1e8ed3ea141 |
files | docs/docs/01_tutorial.md docs/docs/01_tutorial/01_your-first-blog.md |
diffstat | 2 files changed, 227 insertions(+), 0 deletions(-) [+] |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/docs/docs/01_tutorial.md Thu Feb 19 23:30:08 2015 -0800 @@ -0,0 +1,12 @@ +--- +title: Tutorial +--- + +This PieCrust tutorial will walk you through the process of creating a new +website, writing content for it, customizing its appearance, and publishing it +somewhere. + +{% for part in family.children %} +* [{{part.title}}]({{part.url}}) +{% endfor %} +
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/docs/docs/01_tutorial/01_your-first-blog.md Thu Feb 19 23:30:08 2015 -0800 @@ -0,0 +1,215 @@ +--- +title: "Part 1: Your First Blog" +--- + +This tutorial walks you through the creation of your first PieCrust website: a +simple blog. + +> Whenever you see something like this: +> +> $ chef blah --something +> +> It means you need to run that command (starting with `chef`) in a terminal or +> command prompt. Text that doesn't start with the dollar sign is the expected +> output of the command. + +We'll assume you already have installed PieCrust on your system. If not, the +installation steps are documented in the ["Getting Started"][1] page. + +Let's also verify you have an up-to-date version of PieCrust. + + $ chef --version + {{piecrust.version}} + +If your version is older, you'll want to update PieCrust: + + $ pip install piecrust -U + +If your version is newer, you're probably looking at old docs! You should be +able to find newer docs at the [official PieCrust website][2]. + + +## Create the website + +Creating the website can be done with a simple command: + + $ chef init myblog + +This will create a directory called `myblog` in the current directory, and +initialize a PieCrust website in it. If you go inside and look at the contents, +however, you'll be surprised to find that there's not much: + + $ cd mblog + $ ls + config.yml + +There's just a `config.yml` file! But that's the file that differentiates a +random directory with a PieCrust website. PieCrust expects a file named like +that at the root of a website. + +> Because PieCrust websites are all files (mostly text), they fit really nicely +> in a source control repository. This makes it so much easier to backup and +> rollback than with a website running on an SQL database, like Wordpress. +> +> It's recommended that you create such a repository right now. If you want to +> use Git, you would type: +> +> $ git init . +> $ git add . +> $ git commit -m "Initial empty blog." +> +> If you want to use Mercurial, you would type the same commands, but replace +> `git` with `hg`. For other source control systems, please check the +> documentation. +> +> And of course don't forget to commit your changes as you go! + + +## Preview the website + +At this point, you only have an empty website, but we can still preview it in +the browser! Type: + + $ chef serve + * Running on http://localhost:8080/ + +It should tell you it's started a web server at the address +`http://localhost:8080`. If you type that in your browser's address bar, you +should see PieCrust's welcome and boilerplate page. + +You may notice that the `serve` command is still running. That's because the +server is still running, which is what you want. You can stop the server by +hitting `CTRL+C` at any time, but that means the preview won't work anymore. And +because we still have some work to do, obviously, you'll want to open a new +terminal or command prompt in order to type new commands. + +Now let's add some stuff! + + +## Add some posts + +To add posts, you just have to create a text file in the correct place with the +correct name. By default, PieCrust expects posts in the `posts/` directory, +with a name like so: `YYYY-MM-DD_title-of-the-post.md`. + +If you're like me, you probably don't know what today's date is, however. And +there's also the risk of a typo... so let's instead use the `prepare` command: + + $ chef prepare post my-first-post + Creating page: posts/2015-02-19_my-first-post.md + +There, it tells you the path of the file it created. Open that file now in your +favorite text editor. You should see something like this: + + --- + title: My First Post + time: '08:21:49' + --- + + This is a brand new page. + +Refresh your browser, and you should see that post instead of the welcome page. +Edit the post's text (under the second `---` line), and refresh your browser. + +Now let's add another post. Run the `prepare` command again: + + $ chef prepare post my-second-post + Creating page: posts/2015-02-19_my-second-post.md + +Refresh your browser, and you can see how your blog's homepage is starting to +shape up as expected, with a reverse-chronological list of your posts. That's +because the default *theme* for new PieCrust websites defines a page template +for the home page that does exactly that. This can totally be overriden, of +course, but it works well as an out-of-the-box experience. + +If you want to change the title of a post, you can edit the `title:` part in the +posts' configuration header (which is what we call that part between the 2 `---` +lines). However, the URL of the post will still have `my-first-post` or +`my-second-post` in it. If you want to change that, you'd have to rename the +file itself. + +> The configuration header is written in [YAML][]. It's usually fairly +> straightforward, but the first hurdle you may run into is if you want to set a +> title to something with characters like `'` or `:` in them. In this case, +> you'll have to add double-quotes (`"`) around the whole thing. +> +> If you're using a decent text editor with syntax highlighting, it should know +> about the YAML syntax and tell you that something's wrong. + +Similarly, if you want to change the date of a post, you'd have to rename the +file. The time of the post is in the configuration header, though, so you can +tweak that in the text file. + +To know more about the different settings you can change in a page's +configuration header, check out the [page configuration reference][pageconfref]. + + +## Configuring the website + +This is all fine and dandy, but the big title at the top of the home page still +says "_My New Website_", and that's not very personal. Let's configure that. + +Open the `config.yml` file. It's also written in [YAML][], like the posts' +configuration headers. You can change the `site/title` setting easily: + + site: + title: "Ludovic's Blog" + +> Note how, for the rest of this tutorial (and the rest of the documentation!) +> we'll refer to nested configuration settings using *slash* separators. So the +> `site/title` setting refers to the `title` setting inside the `site` setting, +> as shown in the snippet above. + +Refresh your browser, and lo and behold, the new title should be there. + +There are plenty of other things you can configure in the `config.yml` file. For +example, say you don't like the default URL format for posts. That can be +adjusted with the `site/post_url` setting. By default, it is: + + site: + post_url: "%year%/%month%/%day%/%slug% + +The post URL format is defined using some keywords surrounded by percent signs, +as you can see above. The `%year%`, `%month%` and `%day%` keywords should be +self-explanatory -- and they map directly to the post's filename, which, if you +remember, contains the post's date. + +The `%slug%` keyword maps to the post's "*slug*", which is the [part of the URL +that has human-readable words][slug]. In PieCrust's case, it comes from the +part of the filename that comes after the date ("*my-first-post* and +*my-second-post* in this tutorial). + +If, say, your blog has a low chance of slug collision, or has a low post +frequency, and you want to have more minimal URLs, you can change it to: + + site: + post_url: "%year%/%slug%" + +Refresh your browser, and you should see that the posts' URLs are now conforming +to the new format. + +> If your browser was currently displaying a post at the old URL, you will +> suddenly get a "_page not found_" error! That's OK, it's because the post is +> now at the new, shorter URL. Just go back to the root URL, `localhost:8080`. + +See the [site configuration reference][siteconfref] for more information about +all the settings you can change. + + +## Next steps + +At this point you have a moderately function blog, but it's far from looking +good yet. In the [second part of this tutorial][part2] we'll look at customizing +your website's appearance by editing layouts and templates, and writing CSS +stylesheets and using PieCrust's built-in asset pipeline. + + + +[1]: {{pcurl('getting-started')}} +[2]: {{piecrust.url}} +[yaml]: https://en.wikipedia.org/wiki/YAML +[slug]: http://en.wikipedia.org/wiki/Semantic_URL#Slug +[pageconfref]: {{pcurl('docs/reference/page-config')}} +[siteconfref]: {{pcurl('docs/reference/site-config')}} +[part2]: {{pcurl('docs/tutorial/making-things-pretty')}} +