preface

If you want to build your own blog in minutes, you can skip to the end and show you how to build a blog in minutes.

Quick reference

  • This is a Vuepress theme that integrates the categories, TAG walls, pagination, comments and other features needed for blogging.
  • The pursuit of minimalist theme, simple configuration, suitable for mobile terminal.
  • Preview the address
  • GitHub address for theme plugin
  • Personal blog deployment GitHub address
  • Blog effect display:

Subject to use

Install the theme

Create a new project my-blog:

mkdir my-blog
cd my-blog
Copy the code

Initialize YARN or NPM:

Yarn init or NPM init -yCopy the code

Install vuepress and vuepress-theme-melodydl:

Yarn add vuepress vuepress-theme-melodydl or NPM install vuepress vuepress-theme-melodydlCopy the code

Create the SRC /_posts folder and Vuepress configuration file. The project structure looks like this:

My - blog ├ ─ ─ the SRC # blog source file directory │ ├ ─ ─. # vuepress vuepress directory │ │ └ ─ ─ public static resource file # vuepress │ │ └ ─ ─ config. Js # vuepress │ ├─ ├─ ├─ ├─ ├─ ├─ ├─ ├─ ├─ ├.md... └ ─ ─ package. JsonCopy the code

Add script to package.json:

{
  "scripts": {
    "dev": "vuepress dev src",
    "build": "vuepress build src"
  }
}
Copy the code

Configure the topic

Configure vuepress and theme in SRC /.vuepress/config.js:

Click to show an example configuration 
Module. exports = {// url Title: 'Top Blog | Top Blog', // url description: 'personal Blog', // url favicon icon set etc head: [ ['link', { rel: 'icon', href: '/favicon.ico' }], ['meta', { name: 'viewport', content: 'width=device-width,initial-scale=1,user-scalable=no'}]], // Theme: 'melodydl', // theme: {title: PersonalInfo: {// name name: 'melodydl', // public folder under Avatar: '/avatar-top.jpeg', // header background image headerBackgroundImg: '/avatar-bg.jpeg', // 'In me the tiger sniffs the rose<br/> ', // 'Shanghai, China'}, / / at the top of the navigation bar content nav: [{text: 'HOME' link: '/'}, {text: 'ABOUT', link: '/ ABOUT/'}, {text: Header: {home: {title: 'Top Blog', subtitle: {home: {title: 'Top Blog', subtitle: Tags: {title: 'tags ', subtitle: {title:' tags ', subtitle: {title: 'tags ', subtitle: {title:' tags ', subtitle: {title: 'tags ', subtitle: PostHeaderImg: '/post-bg.jpeg',}, // social platform account info SNS: {CSDN: {CSDN: { account: 'csdn', link: 'https://blog.csdn.net/weixin_44002432', }, weibo: { account: 'weibo', link: 'https://weibo.com/u/5656925978', }, juejin: { account: 'juejin', link: 'https://juejin.im/user/3843548382238791' }, zhihu: { account: 'zhihu', link: 'https://www.zhihu.com/people/sheng-tang-de-xing-kong' }, github: { account: 'github', link: 'https://github.com/youdeliang'}}, / / footer at the bottom of the associated Settings footer: {/ / gitbutton configuration gitbtn: {/ / warehouse address the repository: "https://ghbtns.com/github-btn.html?user=youdeliang&repo=vuepress-theme-top&type=star&count=true", frameborder: Scrolling: 0, width: "80px", height: "20px"}, // add custom footer: 'Copyright & Copy; Top Blog 2020 <br /> Theme By <a href="https://www.vuepress.cn/" target="_blank">VuePress</a> | <a Href = "https://www.github.com/youdeliang/" target = "_blank" > youdeliang < / a > `}, / / paging configuration pagination: {/ / article number each page perPage: Comments: false comments: {owner: 'youdeliang', repo: 'vuepress-theme-melodydl', clientId: 'dfba8ecad544784fec1f', clientSecret: '1358ac11bc8face24f598601991083e27372988d', autoCreateIssue: false, }, } }Copy the code

Vssue comment plugin

If you know Gitment and Gitalk, Vssue does exactly what they do — store comments in Github’s Issue system, post and display comments on your page, edit and delete comments, A Vuepress plugin was provided (the initial motivation was to start commenting on my own Vuepress blog).

The Vssue comment plugin can be used to view the documentation manual. Portal.

About page Configuration

-- Layout: About title: About subtitle: You can be good, but you don't have to be perfectCopy the code

Create a blog

Create the MD file under SRC /_posts

<! -- _posts/2019-04-01-JS Asynchronous programming solution summary. Md --> -- title: JS asynchronous programming solution summary date: 2019-04-01 tags: This blog post is primarily a summary of Javcscript asynchronous programming solutions. The content above is a summary, which will be displayed in the table of contents. <! -- more --> More The content below will only be fully displayed when browsing this article, not in the table of contents.Copy the code

Run the corresponding script to generate your blog site

# build NPM run dev # Build NPM run devCopy the code

Github deploys blogs for free

Add the deploy.sh file

Automatic deployment scripts
set -e
# building
npm run build
# Navigate to the build output directory
cd src/.vuepress/dist

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

Push to the master branch of your repository
git push -f [email protected]:fantastic-cq/blog.git master
Copy the code

Json adds the run footer command

"scripts": {
    "dev": "vuepress dev src"."build": "vuepress build src"."deploy": "bash deploy.sh"
},
Copy the code

Run the YARN deploy command to publish the packaged files to a new branch of Github Master. This repository must be connected to the remote Github repository.

Modify github configurations

First you must change the repository name to Youdeliang.github. IO, add.github. IO to the username and click project Setting.

Then, go to GitHub Pages and click Check It Out Here! Go to Source, select the branch and folder directory to package the upload, and click Save.

The last generated link is the link to your blog.

Ps: Xiaobian used Travis for automatic deployment before, but the wools were too serious, they have been changed to charge. So this way although cumbersome point, but simple and easy to operate. Other modes of automatic deployment will be explored later.

For details about other deployment steps, see the Vuepress official documentation. portal

Build a blog every minute

> config. Js > package.json > config. Js > package. Json > config. Other later changes are also acceptable). Run yarn Install to quickly access yarn Dev. Follow the free deployment process above to build a beautiful blog in minutes.

The last

If you feel that the theme is useful or needs to be improved, you are welcome to like the Star and mention the issue. Your encouragement is a great support to me, thank you 🙏.