Here is my first ever blog post. This blog is powered by: jekyll, github pages, disqus, grunt and jade. Why not start this blog with a tutorial of how I made this blog:
- To create a github page: sign in to github, create a repo
my_username.github.io
. What ever you put in here will be live at http://my_username.github.io -
Install jekyll: Once cloned in the repo do
gem install bundler printf "source 'https://rubygems.org'\ngem 'github-pages'" > Gemfile bundle install NB requires `ruby 1.9.1` or `2.0.0`, full instructions here
- Run jekyll: with
bundle exec jekyll serve
-
Grunt: for livereload, jade compiling and in the future much more great stuff. First you need to create a
package.json
with the following contents:{ "name": "blog", "version": "0.0.1", "private": true, "devDependencies": { "grunt": "^0.4.4", "grunt-contrib-watch": "^0.6.1", "grunt-jekyll": "^0.4.1", "grunt-contrib-jade": "^0.11.0", "grunt-concurrent": "^0.5.0" } } Then create a `Gruntfile.js` with the following contents: module.exports = function(grunt) { // Project configuration. grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), src: { html: ['_layouts/*.html', 'index.html'], css: ['css/*'], other: ['projects/*'], posts: ['_posts/*', '_drafts/*'] }, jekyll: { options: {bundleExec: true }, dist: {options: {config: '_config.yml'} }, serve: { options: { drafts: true, watch: true, serve : true } } }, watch: { files: ['<%= src.posts %>'], tasks: ['jade'], options: {livereload: {port: 12345 } } }, jade: { compile: { options: { data: { debug: false } }, files: { "_layouts/default.html": "_layouts/jade/default.jade", "_layouts/post.html": "_layouts/jade/post.jade" } } }, concurrent: { target: { tasks: ['jekyll:serve', 'watch'], options: {logConcurrentOutput: true } } } }); // Default task(s). grunt.registerTask('default', ['jade', 'concurrent:target']); // Load the plugin that provides the "uglify" task. grunt.loadNpmTasks('grunt-jekyll'); grunt.loadNpmTasks('grunt-concurrent'); grunt.loadNpmTasks('grunt-contrib-watch'); grunt.loadNpmTasks('grunt-contrib-jade'); }; Then install grunt with: sudo npm install -g grunt-cli sudo npm install Then run grunt with grunt
- Jade: I’ve converted the
default.html
andpost.html
intodefault.jade
andpost.jade
. Move these into_layouts/jade
. -
Disqus comments: Register with disqus and add this to the bottom of
post.jade
.div#disqus_thread script(type='text/javascript') | /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */ | var disqus_shortname = 'MY_USERNAME'; // required: replace example with your forum shortname | /* * * DON'T EDIT BELOW THIS LINE * * */ | (function() { | var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true; | dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js'; | (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq); | })(); noscript | Please enable JavaScript to view the a(href='http://disqus.com/?ref_noscript') comments powered by Disqus. a.dsq-brlink(href='http://disqus.com') | comments powered by span.logo-disqus Disqus
Make sure you replace MY_USERNAME
with you’re actual disqus username. Add comments: true
to the top of post.jade