Create a modern vuepress blog in 5 minutes!
at the end of this tutorial you will create a vuepress blog that looks and feels like this demo http://vp-modern.z3by.com,
You can scaffold your project how ever you want, here we will use Create Vuepress 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
After that you will be prompted for some basic info.
then, let’s open the project with a good code editor (Visual Studio Code :wink:)
The directory structure will look like this
all posts will go inside
let’s install dependencies and run a development serve by running
yarn && yarn dev
you can access the development server at http://localhost:8080/
Let’s install my theme by running
yarn add -D vuepress-theme-modern-blog
Then let’s change Vuepress config,
/blog/.vuepress/config.js then change theme value from
you might need to restart the development server.
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
We can add some values that will improve how the post looks, for example we can specify title, description and Image.
Now you can see the difference
NOTE to use internal image link you can put your image inside the public directory in
.vuepress/public/images then the image value will be like this
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
// path: /blog/.vuepress/config.js
we will modify it to be
it is not a magic you can check this to see what we have done here.
to change theme colors let’s navigate to
you can see that it contains some Stylus variables, let’s change the
and let’s add a new variable and let’s name it
$secondaryColor and give it a value of
:tada: Now you can see that the whole theme colors did change
now you can see that te footer colors looks ugly! I did this on purpose :smiling_imp: 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
so let’s go to
.vuepress/styles/index.styl and let’s add some styling for example
you might need
!important statement in some cases not all cases, but it is a good practice to use it wisely.
this theme is using Unsplash Random API as a place holder for the Hero Image, to replace it with your own image just add your image to themeConfig like this
We will use Disqus 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
now you will see this cool comments box after each post
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
copy this value and add it to themeConfig this way:
Sitemaps are very important for your website to be indexed by google, you can learn more about Sitemaps here
We will auto generate a sitemap for our blog, all you need to do is to add these two settings to you themeConfig
replace hostname value with your own domain name, for example mine is https://www.ahmadmostafa.com/
It is good to allow your users to share your posts on their Social Media accounts, Disqus 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
you can add other networks to
now you can see a cool floating button on the right side of your posts that help your users sharing your content! :tada:
That’s It! :tada:
go and add some cool posts! :wink: