Publishing your C.V. on the web and exporting PDF with added Gulp and Bootstrap

When I wrote my first C.V. coming out of university I used LaTeX since I had just written my thesis using it. You can create beautiful and professional documents with it but today I think things have moved on and your web presence is likely to be discovered and read first. So I decided to write it web first this time as a responsive web page. You can see an example of it here.

Initially I looked at both markdown-resume and strapdownjs and choose the latter to get the benefits of writing in markdown and omitting the build step.  To get up and running quickly I started with bootstrap-sass and the minimal and typographic paper theme. However the more I customised the layout and formatting of my content the more markdown was replaced with HTML and CSS. There came a point where I realised it was easier and more powerful to complete it all without the markdown component.

You will need:

bower install bootstrap-sass-official
bower install gulp gulp-clean gulp-load-plugins gulp-rename gulp-sass gulp-shell

npm install -g http-server

A working installation of wkhtmltopdf and invoker. A github account and a custom domain.

Write your C.V. in HTML / CSS

I'll explain the details of build and sass here and leave the markup and styling to you. Since we are using the bootstrap-sass plugin we will need to setup gulp to build our changes.

var gulp = require('gulp'),
	gulpLoadPlugins = require('gulp-load-plugins'),
	plugins = gulpLoadPlugins();

var files = {
    mainStylesheet : 'stylesheets/main.scss',
    pdfStylesheet : 'stylesheets/pdf.scss',
    stylesheets : 'stylesheets/*.scss'
};

gulp.task('clean',  function(){
	return gulp.src('css')
		.pipe(plugins.clean())
})

gulp.task('sass', ['clean'], function(){
	return gulp.src(files.mainStylesheet)
		.pipe(plugins.sass())                
		.pipe(gulp.dest('css'));
});

I really like how fast gulp executes and the model for composing the build pipeline. Calling gulp sass will generate our CSS file which we can use on the website. You will also need to import the bootstrap-sass and any theme scss files into your main.scss file.

@import 'paper-variables.scss';
@import '../bower_components/bootstrap-sass-official/assets/stylesheets/_bootstrap.scss';
@import 'paper-bootswatch.scss';

You can use my page as a template for writing your own markup / bootstrap layout: index.html.

If you want the CSS to automatically get regenerated on changes you can use gulps built in watcher.

gulp.task('watch', function(){
	gulp.watch(files.stylesheets, ['sass'])
})

Hopefully you should have a c.v. page that scales nicely across different devices and ready to exporting to PDF.

     

Export a PDF with a custom style

To export the page we will use wkhtmltopdf which I find works extremely well. Please make sure you have the latest version, my machine had v0.9 which was plagued with layout and text kerning issues. The current version at the time of this post is 0.12.2.

We can now setup a gulp task to call the wkhtmltopdf command.
gulp.task('pdf', ['pdfsass'], plugins.shell.task([
    'wkhtmltopdf --margin-left 15 --margin-right 15 --zoom 1.0 --viewport-size 1280x1024 http://naeemkhedarun.dev/index.html naeemkhedarun.pdf'
]));
You can adjust the margin and zoom for your own layout. The viewport-size is to generate the desktop responsive layout, so you can change this to suit your responsive media queries for the layout you want. We have added a dependency on a pdfsass task too so lets create that.
gulp.task('pdfsass', ['clean'], function(){
	return gulp.src(files.pdfStylesheet)
		.pipe(plugins.sass())
        .pipe(plugins.rename('main.css'))
		.pipe(gulp.dest('css'))
})
This will use my pdf.scss stylesheet to generate the CSS file for the page and is called before the generation happens. This will allow use to remove elements like the navigation bar and adjust the layout to better suit the PDF.
@import 'main.scss';

body {
    padding-top: 20px;
}

.navbar {
    display: none;   
}

Mine is pretty straightforward and I only adjust the padding and navbar display, one of the benefits of keeping the page design simple and typographic.

Hosting on Github

Github gives you a User page which feels like an appropriate place to put your c.v. and its quite easy to get up and running. Github uses a convention for user pages so create a repositoty called username.github.io

If you want a custom domain put into the root of your sites directory a file called CNAME and put in the domain name without the protocol. In mine I have:

naeem.khedarun.co.uk

You can now push your repository up to github and within 30 minutes your page will be available at http://username.github.io. If you are using a custom domain add a CNAME record pointing your domain to username.github.io.

All done!

I personally find that this approach works well for me and I hope you might find it useful too. All the source is at naeemkhedarun.github.io and feel free to clone and use it as you like.

blog comments powered by Disqus