How I created SEO-friendly portfolio/CV website and hosted it on GitHub

For a long time I wanted to create my personal resume/CV website. Luckily, some time ago I bought a domain with my name — olegagapov.com. In this article I want to share my experience about creating CV website from scratch and deploying it to GitHub Pages. Let’s go!

Tools

For this project I will use VueJS. One can say that for simple portfolio/CV website it’s overkill, but I have my reasons to do so. First reason I want to separate data from view. This will allow me in future to simply migrate my data to another platform/solution and give me freedom to add/remove any existing information without touching HTML. I use vue-cli to quickly mock starting an application:

vue init webpack my-portfolio

My setting are the following:

• vue build — I will use “runtime only” setup
• vue router — no need for me. You can add it if you want multi-page website
• ESLint — yes, “Standard” linting
• tests — “no” for both
• I’ll use npm package manager

After installing all packages run:

cd my-portfolio
npm run dev

You should see VueJS welcome page at localhost:8080

Very good, we are ready to start development.

Applying Bootstrap template

I don’t want to have creative and unique design for now. I want to build my resume quickly and with minimum efforts. At startbootstrap.com I found very cool resume/CV template. It uses Bootstrap 4 front-end library. Let’s adopt it with our Vue project.

If you look at template’s source code you’ll see that it consist of index.html page and several static assets. So our job is to copy HTML into our single-file component and link CSS and JS to it. We can start with HTML. Open src/App.vue file, erase everything and put the following:

Save the file and go back to browser, you should see “My portfolio” message on a blank canvas. It’s a scaffold for my page. We can start copying HTML. Open index.html file from template’s GitHub and copy all HTML inside body tag (except link tags on the bottom). You need to paste this code instead of a h1 tag in App.vue file.

Now it’s turn to add some styling. We need to install bootstrap library and a few additional libraries:

npm install --save bootstrap font-awesome devicons

To add those CSS’s to our project put following to the top of src/main.js:

require('bootstrap/dist/css/bootstrap.css')
require('devicons/css/devicons.css')
require('font-awesome/css/font-awesome.css')

Those lines will apply bootstrap’s styling to our project.

Next step is to copy custom CSS. This custom code is here. You have at least two ways to add this code to our project. One way is to create a separate file in assets folder and include it to main.js as we did with bootstrap library. Alternatively, you can paste this code directly to <style> section of App.vue component. I’ll go with second option.

Finally, we need to include Google Fonts (as this template uses custom fonts). I’ll do it in a very simple way — I’ll copy links to those fonts to index.html in root folder of my VueJS project. Copy the following to head tag:

If everything is correct you should see something like this:

Add your avatar to assets folder and put correct the link to the img tag.

Ok, we are done with styling. But we need to add bootstrap’s JS as well. Bootstrap’s JS depends on jQuery, so you need to use it carefully with Vue because it’s usually a pain to make them a friends. Let’s install jQuery and additional library for animation:

npm install --save jquery jquery.easing popper.js

Now we need to import those libraries to main.js file. Here I’m giving the full source code of main.js:

On line 4 we import jQuery, then bootstrap and finally jQuery-easing. Then on line 11 we initialize global variable jquery so we can use it anywhere in .vue files with this.jquery. We are done with 3rd party libraries. It’s turn to integrate custom JS code from the template. You can find it here. Go back to App.vue and add the following code to script section:

Here I added mounted() property. You need to wrap your jQuery code with $nextTick callback because jQuery code should be executed after DOM is ready. Now you can copy template’s JS code and paste it inside nextTick. There should be a little refactoring. First of all, get rid of closure and “use strict” instruction. In case if you are using linting, get rid of linting error (remove semicolons, replace double quotes with single quotes and so on, see terminal window for help).

At this point, it’s time to use our global variable jquery from main.js. Add the following line before this.$nextTick:

const $ = this.jquery

It’s a little trick. If I create $ variable, I don’t need to change the custom code. With this workaround you should see working scroll spy and scroll animation.

So far so good! If you have any troubles please check out my code here or ass a comment, I’ll try to sort out your issue.

Put your data

Now, when we have a working template, we can start populate our resume with our data. I will leave existing blocks/sections as they are.

General idea is following: you create data properties about yourself and render this data using curly braces or v-html directive. Utilize v-for directive if you want to create a repetitive blocks. For example, take a look what I’ve done with Experience section. I created a list of objects, where every object represent one working place. Then I used v-for for iterating over array with work places and render details with curly braces.

Don’t hesitate on changing existing structure of the sections. I reused most of the code. But some parts I didn’t like, so a changed them for my needs.

Setting up prerender for Vue

I want my portfolio/CV website be SEO friendly. This means I want the content of my site to be clearly visible by search engine’s crawlers. There are two ways to do this: server-side rendering (SSR) or pre-rendering. In my case, using SSR is overkill. Pre-rendering will work just well.

For Vue-based projects exists a pre-render plugin called prerender-spa-plugin. Let’s install it:

npm install --save prerender-spa-plugin

You can setup it for your project in a pretty easy way. In your root directory find /build folder, inside this folder there is webpack.prod.conf.js file. Open it and add the following:

Long story short, whenever you will run npm run build this plugin will pre-render as much as it can on the final HTML page. Here is an example:

Source code of the same page without pre-render (left) and with pre-render (right)

As you can see from this example, final HTML with pre-render contains all necessary data we want to show to crawlers in order to have SEO-friendly website.

Hosting on Github Pages

Finally, we want to upload our website to GitHub. They have a very handy service called GitHub Pages. This service allows you to create your own website on GitHub in a few simple steps. Let’s do them:

1. Create a repository named “username.github.io” (where username is your GitHub username)
2. Clone this repository:

git clone https://github.com/username/username.github.io

3. Build your VueJS project (run this from project folder)

npm run build

By default this command will create /dist folder with index.html page and all static assets.

4. Copy content of /dist folder to folder with cloned repository

5. Commit and push those files to GitHub:

git add .
git commit -m 'Initial commit'
git push

6. Done! Now just open in your browser URL username.github.io and enjoy your website online ✨

What to do next

Of course, it’s not a comprehensive list of actions you can do with your resume/portfolio website. I collected several ideas you should consider to do in order to have stunning website:

1. Connect you own domain. Good tutorials are here and here. Also consider setup of SSL for your custom domain
2. Add favicon. I used this service https://www.1and1.com/favicon-generator
3. Generate sitemap and robots.txt (here and here)
4. Add Google Analytics tracker. Or Google Tag Manager. I just pasted their snippet to index.html page
5. Add you website to Google Search Console and Bing Webmaster tools. This will help crawlers to find your website
6. Optimize your website
7. Create your custom and unique design :)

If you have anything else to suggest please feel free to leave me a comment.

Thank you for your attention! See you next time.

If you like this tutorial you can pledge me a few bucks $ on my paypal account!

✉️ Subscribe to CodeBurst’s once-weekly Email Blast, 🐦 Follow CodeBurst on Twitter, view 🗺️ The 2018 Web Developer Roadmap, and 🕸️ Learn Full Stack Web Development.