preface

I have been paying attention to Vuepress since last year, but I haven’t been thorough enough. I want to build a personal blog with vuepress. This time, I will introduce you to Vuepress

The complete directory

Full structure of official website

Initial project

# install yarn add -d VuePress as a local dependency NPM install -d vuepress # create markdown file echo '# Hello vuepress! '> docs/ readme. md # start writing NPX vuepress dev docsCopy the code

Create package.json (root)

{
  "scripts": {
    "dev": "vuepress dev docs".// Start the project
    "build": "vuepress build docs" // Compile the project}}Copy the code

Create config.js (under the.vuepress file)

You need to create the. Vuepress folder

Module. exports = {title: 'exports ', // title:' exports ', // title: 'exports ', // title:' exports ', // top nav: [{text: 'guide ',link: '/guide/'}, // to guide folder {text:' dataStructure and algorithm ',link: '/dataStructure/'}]} sidebar: {/ / side navigation '/ dataStructure: [/ / corresponding to the top of the navigation [',' README '], [' one ', 'stack, queue, list], / / corresponding filename and side text]}}Copy the code

The homepage README. The md

---
home: true  / / the key
heroImage: ./img/banner.jpg  // Ignore the.vuepress directory pathHeroText: Front-end schoolboy! -Tagline: You love technology, you love stars. Markdown-centric project structure helps you focus on writing with a minimum of details. - Enjoy the development experience of Vue + Webpack, use Vue components in Markdown, and use Vue to develop custom themes. - Title: High performance Details: VuePress pre-renders static HTML for each page and runs as SPA when the page is loaded. Footer: MIT Licensed | Copyright ©2018-present Evan You
---
Copy the code

The blog project is now ready to deploy to GitHub Pages

The deployment of

1. Create a project on Github

IO // Project name // XXXX is your Github account name

2. Package. json adds code

    {
  "scripts": {
    "dev": "vuepress dev docs"."build": "vuepress build docs"."deploy": "bash deploy.sh" / / add}}Copy the code

Create the deploy.sh file in the root directory

#! /usr/bin/env sh # make sure the script has an error set -e # generate static file NPM run build # go to the generated folder CD docs/.vuepress/dist git init git add -a git Github. IO USERNAME = https://<USERNAME>.github [email protected]:USERNAME/USERNAME.github.io.git master cd -Copy the code

Then step

    npm run deploy
    
Copy the code

Problems encountered

When NPM run deploy is executed locally, an error message is displayed as follows


    [email protected]: Permission denied (publickey). fatal: Could not read from remote repositor y.  Please make sure you have the correct access rights 
    
Copy the code

This is a warning that we don’t have write permission and just follow me as I go along

1. Run the cli

    $ ssh-keygen -t rsa -C "xxxx.com" // Your email address
Copy the code

You need to change your email address to your own, press Enter, and use the default. Id_rsa is the private key and cannot be leaked. Id_rsa. pub is the public key and can be safely shared with anyone. The following is the directory of the file to copy after it is found

2. Add SSH dead simple

Add the copied SSH here

The final result

conclusion

For more information about vuepress configuration, please visit the official website of Vuepress. Don’t click the “like” button when you see this, while doing a personal blog project of your own. Gnome male – “!!!!!!

Front end of a pupil!!