It's where I do things like publish personal blog posts and link to some of my other projects. But it's also a testing ground, where I try out some of the things I've been learning recently. This site is built on Jekyll and is served up with Gulp as the task runner. Jekyll's the skeleton, Gulp is the brains.
This requires npm (get it here), gulp, bundler.
Once you've installed npm, to get gulp, run npm install -g gulp
.
To get bundler run gem install bundler
. This assumes you already have ruby installed.
First, fork this repository. Then git clone
your fork. cd
into the folder you cloned into and run bundle install && npm install
to install the dependencies.
Once you've installed the dependencies, from the project root, run gulp
and your server will start up.
I'm including this breakdown because it would have helped me when I was first starting.
This is where your raw assets live. When gulp runs, it will take the items in this directory and run a variety of operations on them (e.g., compile and minify the sass, concat and uglify the scripts, compress the images). The default directory structure looks like this:
_assets/
|
|-fonts/
|-img/
|-scripts/
|-scss/
|
You set the folders in this directory as the sources for the various gulp tasks in your gulp-config.js
file. You can arrange or rename it however you want, just be sure to update the config file.
This is where your draft posts live. New drafts are automatically put here when you run octopress new draft <TITLE>
.
These are the template files for repeatable sections of the site. By default, the <head>
, <header>
and <footer>
are part of this, but you could put anything here that you may want to reuse in other parts of the site.
This is the actual code of layouts that you use throughout the site. In other words, this is the framework for what will be output when you generate a new page or post.
This is where the static pages for the site live (like the about page, for example). You can simply create a new .md or .html file for each new page that you want, but I like to create a new directory for the name of the page, with an index.html
inside that holds the actual code for the page.
This is where the published posts live.
This won't exist until jekyll runs and builds your site, but this is the output of the actual code for your site, after gulp and jekyll do everything they need to do. This is what users will actually see when they visit your site.
This is very similary to _layouts
, but it's a little more general. It's just for Octopress to use to generate the appropriate front matter when you use the octopress
command to generate a page or post. We need both folders.
This is gulp's output from running its operations on the _assets
folder. I wish there was a better way, but apparently jekyll requires it to be done this way. So under the hood, gulp compiles all the assets into this directory, then when jekyll runs it just copies this folder into _site
so that the live site will be able to find the assets. You can set the structure of this in the gulp-config.js
file if you want to change folder names and all that. If you do, also remember to change the html tags that reference those assets.