VuePress + Firebase Hosting

This post explains how to set up a website powered by VuePress and hosted on Firebase Hosting.

# VuePress

VuePressis a static website generator based on Vue.js Javascript framework. It was designed to easily generate documentation web pages based on markdown pages. However, it remains really flexible thanks to support of Vue components within markdowns pages.

# Install VuePress

# Installation

npm install -g vuepress

# Development server

vuepress dev

It starts a development server with hot-reload. By default, the server starts at localhost:8080.

# Build

vuepress build

It builds the website and output the files into .vuepress/dist by default.

# VuePress Directory Structure

At that moment, the file directory should be pretty minimal

|- .vuepress
| |- dist

Let's create a few more markdown files to add more content to the website:

• A about directory with a README.md: Information about the website and its author
• Root directory README.md: Website home page
  • See Homepage Default Theme Config docs for more details
  • It should provide a link to the about page

Furthermore, a VuePress config file is necessary to provide the site's name and description, and a navbar to easily search and navigate throughout the site.

module.exports = {
    title: `Hello, I'm Damien!`,
    description: 'Software developer and other stuff',
    themeConfig: {
        nav: [
            {text: 'About', link: '/about/'}
        ]
    }
}

The directory now looks like this.

|- .vuepress
| |- dist
| |- config.js
|
|- about
| |- README.md
|
|- README.md

That is enough content. Let's deliver it!

# Firebase Hosting

Firebase Hosting is a Google Firebase product to easily deploy and host a website. It supports custom domains and free SSL certificates for them. Furthermore, the content hosted is delivered fast, thanks to Firebase CDN servers around the world.

# Create a project

Creating a Firebase is really simple.

1. Navigate to the Firebase Console.
2. Click Add Project.
3. Name the project.
4. Optionally, edit the project ID and locations.
5. Click Create Project.

That's it!

# Install Firebase tools

Firebase provides a great cli tool that has many purposes. Let's start by installing it.

npm install -g firebase-tools

# Deploy

Before deploying the website, the Firebase project needs to be initialized.

First things first, let's login.

firebase login

The login allows the Firebase CLI to be in context of whatever Google Account and its corresponding Firebase projects.

Then, run the init command

firebase init

This prompts the user for a few setup questions

• The Firebase CLI features to set
  • Select the Hosting option.
• The Firebase project to associate
  • Select the project created previously.
• The public directory that will be uploaded to Firebase
  • Enter the build output path (which is .vuepress/dist by default).
• Rewrite all urls to index.html
  • No.
• Overwrite 404.html
  • No.
• Overwrite root index.html
  • No.

The configuration is saved to firebase.json and the project information to .firebaserc.

Before deploying, we want to make sure we built the latest version of our website

vuepress build

Then, deploying is as easy as running the following

firebase deploy

The release history can be reviewed by visiting the Firebase console. Select the project, then navigate the the Hosting page. All the release can be viewed. Furthermore, past deployments can be redeployed, which is great and quick way to rollback the website if need be.

# Documentation

• VuePress
• Firebase Hosting

Damien Springuel

Software Developer

Saskatoon, SK, Canada

If you have any questions, comments, or feedback regarding this post, you can contact me at contact@damien-springuel.ca.