Mi primer post en vuepress in 5 minutes!

Mi primer post en vuepress in 5 minutes!

# get started

You can scaffold your project how ever you want, here we will use Create Vuepress (opens new window) with the Blog boilerplate.

so let's get started by running this command in an empty directory

yarn create vuepress

Now you will be prompted to choose what boilerplate you want to go with, let's select blog

then, let's open the project with a good code editor (Visual Studio Code 😉)

yarn && yarn dev

you can access the development server at http://localhost:8080/ (opens new window)

# Add Frontmatter metadata to the posts

Let's take one of the demo posts generated by the first step and let's add some new Frontmatter metadata into it.

Current metadata is on the upper section of the post that is located withing --- mark, like this

---
date: 2018-11-7
tag:
  - frontmatter
  - vuepress
author: ME
location: City
---

# Increase Posts per page

now the current config shows only 2 Posts per page, to increase this number we will modify blog plugin options by modifying this method in /blog/.vuepress/config.js

    // path: /blog/.vuepress/config.js
    modifyBlogPluginOptions(blogPluginOptions) {
      return blogPluginOptions
    },

we will modify it to be

    modifyBlogPluginOptions(blogPluginOptions) {
      blogPluginOptions["directories"].find(
        el => el.id == "post"
      ).pagination.lengthPerPage = 10;
      return blogPluginOptions;
    },

it is not a magic you can check this (opens new window) to see what we have done here.

# Customize Theme

# Change theme Colors

to change theme colors let's navigate to blog/.vuepress/styles/palette.styl

you can see that it contains some Stylus (opens new window) variables, let's change the $accentColor to #6A82FB and let's add a new variable and let's name it $secondaryColor and give it a value of #FC5C7D

🎉 Now you can see that the whole theme colors did change

# add custom styling

now you can see that te footer colors looks ugly! I did this on purpose 😈 to let you add your own styling and not to stick to mine!

to change Footer style you can inspect the page using your browser and check the proper css selector for the element you want to change, in our case it is a <footer> element with a class attribute set to footer

so let's go to .vuepress/styles/index.styl and let's add some styling for example

footer.footer
  background lighten(#000, 20%) !important

you might need !important statement in some cases not all cases, but it is a good practice to use it wisely.

# Change Hero Image

this theme is using Unsplash Random API (opens new window) as a place holder for the Hero Image, to replace it with your own image just add your image to themeConfig like this

themeConfig: {
    heroImage: "<YOUR_NEW_IMAGE_URL>",
    ...

# Add commenting functionality

We will use Disqus (opens new window) as a commenting engine, so go ahead and create an account, and get the Short Website Name from Disqus configurations, put it inside themeConfig object in .vuepress/config.js as follows

themeConfig: {
    disqus: "<DISQUS WEBSITE SHORT NAME>",
    ...

now you will see this cool comments box after each post

# Add google analytics

after deploying your Blog you will need to know some statistics about your website, how much visitors you have and where your website visits are coming from, etc...

to have these cool features we will incorporate Google Analytics, to get started you just need to create an account on Google analytics, then you need to create a property that is linked to your domain, after that you can get the Tracking ID of this property, it is usually composed of some numbers, prefixed with UA- copy this value and add it to themeConfig this way:

themeConfig: {
    googleAnalytics: "UA-************", // replace this value with your tracking ID
    ...

# Add Sitemap

Sitemaps are very important for your website to be indexed by google, you can learn more about Sitemaps here (opens new window)

We will auto generate a sitemap for our blog, all you need to do is to add these two settings to you themeConfig

themeConfig: {
    sitemap: true,
    hostname: "https://www.yourdomain.com/",
    ...

# Add Social-Sharing feature

It is good to allow your users to share your posts on their Social Media accounts, Disqus (opens new window) already offers this feature, but it is good to make it more visible to your users so you encourage them to share your content, we will add these settings to themeConfig to enable social sharing feature

themeConfig: {
    socialShare: true,
    socialShareNetworks: ["twitter", "facebook"],
    ...

you can add other networks to socialShareNetworks array.

now you can see a cool floating button on the right side of your posts that help your users sharing your content! 🎉

That's It! 🎉 go and add some cool posts! 😉


Victor
2020 with ❤️ By Victor