Protip of the day: free Blog with VuePress and GitHub Pages

# Who this is for

If you want a Blog with the requirements:

• Free (except for the domain)
• Can handle virtually any traffic
• Fast response time
• Fully and easily customizable
• Posts written in Markdown
• Static content
• Ad and Cookie free

And you don't need:

• A WISIWYG Editor
• User management
• Dynamic content

Than a great solution is to use a Vuepress Blog in combination with GitHub Pages.

# Create a Vuepress Blog

# Why VuePress?

Vuepress is a great idea which is also known from Jekyll and Hugo: text written in markdown is translated to a static HTML document, using a self defined template. You can also add YAML in the markdown file and collect some variables to be used in templates that can be created using Vue components.

What I really enjoy about Vuepress is the simplicity to create or extend the theme and to implement resuable custom elements on the page. While other frameworks add their own templating system or another language to the mix, Vuepress just uses the Vue framework and the vue cli - and thus the core web technologies HTML, CSS and JavaScript - which are always good to know and learn.

You get the full power of HTML, CSS, JavaScript and Vue.js, combined with a simple way to manage your content using Markdown. And in the end you get a static site, which is great because you can host it for free on GitHub pages, without the need to manage a database.

# VuePress Blog Boilerplate

There is a great Blog Boilerplate from @bencodezen that I started with. There is a detailed tutorial available in which every step of the installation and customization is being explained. If you follow the tutorial until step 4 you will know your way around the VuePress framework.

# Create a GitHub Page

GitHub page offers a great deal:

• Free
• Fast CDN
• Just push to a repository to publish a page

To start a GitHub page, just create a repository named <USERNAME>/<USERNAME>.github.io

Then build and push your project to the repository, I am using the shell script suggested on the vuepress site:

#!/usr/bin/env sh

# abort on errors
set -e

# build
npm run build

# navigate into the build output directory
cd public/

# if you are deploying to a custom domain
echo 'www.example.com' > CNAME

git init
git add -A
git commit -m 'deploy'

git push -f https://github.com/<USERNAME>/<USERNAME>.github.io.git master


cd -

# Add a domain and analytics

When adding a domain be sure to add the echo 'www.example.com' > CNAME part to the deploy script, to let GitHub know you use a custom domain.