This is the 11th day of my participation in Gwen Challenge

Mock Service worker (1) Node+Koa (2) Node+Koa (3) – This article introduces Vuepress + Github, a personal static blogging tool

Only for reference, according to the need to eat, inadequate, welcome all the big bosses give advice, supplement and improve, welcome to share

  • To do a good job, he must sharpen his tools. Practice promotes the development of science and technology
  • As a senior “collector”, I collected more and more information and articles. I wanted to organize a notebook of my own.
  • This article is to be shared with youVuepress + githubBuild your own knowledge notebook to help you increase your knowledge and improve your competitiveness

Vuepress + Github Pages

Based on Vuepress framework and GitHub Pages function, using Vue syntax development to quickly build free Markdown blog

Introduction of Vuepress Jane

github-stars–vuejs/vuepress:

Vuepress is a minimalist static web site generator, vuUe-driven static web site generator

Github /vuejs/ Vuepress [my] : the rest of my life front-end notebook

[Features] :

  • The Markdown-centric project structure helps you focus on writing with minimal configuration.

  • Vue drivers enjoy the development experience of Vue + Webpack and can use Vue components in Markdown and custom themes can be developed using Vue.

  • High-performance VuePress generates static HTML for each page pre-rendered and runs as a SPA when each page is loaded.

Set up process

1. Create a project directory

Command lines are created with commands:

mkdir fe-notes && cd fe-notes
Copy the code

2. Package management initializes && install dependencies

# or use npm
yarn init # npm init
yarn add vuepress -D
Copy the code

In 3.package.jsonAdd somescriptsFacilitate the operation of the project

At this point VuePress will launch a hot-loaded development server at http://localhost:8080, but with no content yet,

{
  "scripts": {
    "docs:dev": "vuepress dev docs"."docs:build": "vuepress build docs"}}Copy the code

4. Add blog content

In the root directory of the project, create a new docs folder and create a markdown file. Vuepress will generate the corresponding page, which is the blog post

mkdir docs
Create a new page markdown
echo '# Hello VuePress! ' > docs/README.md
Copy the code

5. Configure the blog

However, without any configuration, users will not be able to navigate freely on the site. So, to better customize our site, we then create a new.vuepress folder under the docs directory and execute the following command:

# Create a.vuepress folder
mkdir docs\.vuepress
Copy the code

Next, create a new config.js file under the.vuepress folder, where config.js is a necessary configuration file for the vuepress website, and add the following code:

module.exports = {
  base: '/blog-demo/',
  title: 'blog-demo',
  description: 'Vuepress blog demo'
}
Copy the code

The meanings of configuration items are as follows:

  • Base: The base path of the site, whose value should always start and end with a slash. I’m going to set it to/blog-demo/, we run the project locally again, and the access path needs to change tohttp://localhost:8080/blog-demo/
  • Title: The title of the site
  • Description: The description of the website

Default Theme Configuration

Vuepress provides a default theme that lets you use the rules instead of implementing complex Markdown file rendering, directory structure, and so on from scratch. If you want to customize your own themes, check out the official documentation: Vuepress- Development Themes.

Home page

The default theme provides a home page layout. To use it, specify home: true in your root readme. md format YAML front Matter. So, modify the readme.md we originally created:

---
home: trueActionText: Get started → actionLink: / Features: - title: heroImage: /vue-logo.png Markdown-centric project structure helps you focus on writing with minimal configuration. - 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. ---Copy the code
  • HeroImage: The home image, placed in the.vupress/publicIf you don’t have one, create one, save a picture of the home page you want, and use it here.
  • For other parameters, please refer to the official documentation: Vuepress- Default theme home page

The navigation bar

The navigation bar may contain your page title, search box, navigation bar links, multilingual switching, warehouse links, depending on your configuration. Add some navigation links to the.vupress/config.js file:

module.exports = {
    themeConfig: {
      // Your GitHub repository, please fill in correctly
      repo: 'https://github.com/xxxxxxx/blog-demo'.// Customize the warehouse link text.
      repoLabel: 'My GitHub',
      nav: [
        { text: 'Home', link: '/' },
        { text: 'FirstBlog', link: '/blog/FirstBlog.md'}}}]Copy the code

Next, we create a new blog folder under the docs directory and create /blog/ firstblog.md under the blog directory for our FirstBlog post:

# My first blog post
My First Blog
Copy the code

We have in the project root directory, the blog – demo, type the command that NPM run docs: dev, browser, visit http://localhost:8080/blog-demo/ to view the page effect, To see our FirstBlog post, click on FirstBlog in the upper right corner of the page:

Local Preview

The sidebar

Finally, we configure the sidebar to make the user experience better, adding some code to the.vupress/config.js file:

module.exports = {
  themeConfig: {
    sidebar: [
      ['/'.'home'],
      ['/blog/FirstBlog.md'.'My first blog post']]}}Copy the code

Local preview

Now that we have a simple blog, run the project again, click the button on the front page to get started quickly, and we can see:

My first blog post

Register components in VuePress

Writing Vue code in VuePress is consistent with the way we normally write single files, and there may be times when we need to use Vue’s UI component library. For example, Element, Mint, etc. When we use these UI component libraries in our projects, we register them in main.js or botostrap.js. Fortunately, VuePress also supports this functionality. We can do some application-level configuration by creating a.vuepress/ enhanceapp. js file. This file exprot default is a hook function, where you can do some special processing. Such as adding global routing hooks and registering external component libraries.

//.vuepress/ enhanceapp.js // globally register Element library import Vue from'vue'
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

export default ({
 Vue,
 options,
 router
}) => {
 Vue.use(Element)
}
Copy the code

In the normal development of Vue, sometimes we need to do some custom components. In VuePress, we can write our custom components in the.vuepress/ Components directory, and VuePress iterates through all the *. Vue files in that directory at compile time. And see them registered as global components.

/ / register a custom components / / docs /. Vuepress/components/hello.html vue < template > < div class ="cpt-hello">Hello VuePress Demo</div>
</template>
Copy the code

This way we don’t need to register these components when we write Vue code in Markdown files, and we can use edges directly in Markdown.

// docs/.vuepress/vue/README.md
<template>
 <div class="test-demo">
  {{ msg }}
  <my-hello></my-hello>
  <el-button>button</el-button>
 </div>
</template>

<script>
export default {
 data () {
  return {
   msg: 'Hello VuePress! '
  }
 }
}
</script>
Copy the code

Deploy to Github Pages

When we finished the document, we came to our most concerned place, how to push the packaged code to the gh-Pages branch of the remote warehouse, there should be many articles on the Internet describing how to do this, but many methods are quite troublesome, fortunately, there is a tool gh-Pages has solved this trouble for us.

NPM install -d gh-pages # 2. Add the script command "scripts": {"docs:dev": "vuepress dev docs", "docs:build": "Vuepress build docs", // I changed the output directory of vuepress, so if you did not change the dest attribute of.vuepress/config.js //, Vuepress /dist "deploy": "gh-pages -d dist", "deploy:build": "npm run docs:build && gh-pages -d dist" } # 3. Git git git git git git git git git Failed to get remote.origin.url (task must either be run in a git repository with a configured origin remote or must be configured with the "repo" option). npm run deploy:build // 4. Open your 'Github Pages' at' https://<yourname>.github. IO /<repo> 'Copy the code

Xn213.github. IO/fe-Notes with Click (Front-end notebook for the rest of my life)

Just open up here: mineconfig.jsConfigure, and add one-click deployment filesdeploy.sh

/ * * * *!!!!! Attention!!!!! To deploy the.sh file to github, git must be configured with a Github account, * and git must be open in the current directory! * /
module.exports = {
  title: 'Front-end notebook for the Rest of my life'.// Set the site title
  description: 'Recording a lot of very normal, very mundane code.'.// Describe the home page below the title
  dest: './dist'.// Set the output directory
  base: '/fe-notes/'.themeConfig: {
    // Assume GitHub. Can also be a complete dead simple url / / https://github.com/xn213/fe-notes
    repo: 'https://github.com/xn213/fe-notes'.// If your document is not at the root of the repository
    docsDir: 'fe-notes'.// Optional. The default value is master
    docsBranch: 'gh-pages'.// Default true, set to false to disable
    editLinks: false.nav: [{text: 'Big front end'.link: '/Frontend/' },
      { text: 'notebook'.link: '/notes/' },
      { text: 'Vue'.link: '/course/Vue/' },
      { text: 'React'.link: '/course/React/' },
      { text: 'code tools'.link: '/CodeTools/VSCode/VSCodeVue' },
      { text: 'Hodgepodge'.link: '/dzh/Explain' },
      { text: Blog for the Rest of my life.link: 'https://xn213.github.io/FrontEndNav/' },
      // { text: 'test', link: '/Test/' },
      // Configure the nav drop-down list
      / / {
      // text: 'tutorial ',
      // items: [
      // { text: 'Vue', link: '/course/Vue/VueRespond' },
      // { text: 'React', link: '/course/React/' },
      // { text: 'Vuepress', link: '/course/Vuepress/GithubPagesVuepressBlog' },
      / /]
      // },].sidebar: {
      '/Frontend/': [
        '/Frontend/ code readability '.'/Frontend/ page optimization '.'/Frontend/Fetch',
        {
          title: 'HTML'.// Sidebar group
          collapsable: true.children: ['/Frontend/HTML/HTML'.'/Frontend/HTML/HTML5'],}, {title: 'Css'.collapsable: true.children: ['/Frontend/Css/The-Shapes-of-CSS'.'/Frontend/Css/CssFonts_A-Z'],}, {title: 'Js'.collapsable: true.children: [
            '/Frontend/Js/this'.'/Frontend/Js/EventLoop'.'/Frontend/Js/prototype'.'/Frontend/Js/WriteCode',],},],},sidebarDepth: 1.// sidebar directory reads the title to ##}},Copy the code
Alternatively, you can create the deploy.sh file for one-click deploymentMake sure the script throws any errors it encounters
set -e
# generate static file /dist && using gh-pages to deploy under the gh-papes branch of the corresponding repository set in config.js
npm run deploy:build
Copy the code

Of course, there are many useful tools for building blogs. Here are some of them for reference only.

Can customize their own theme, can greatly improve the accumulation of knowledge, there is no get?

Welcome to comment on your private tools and share your blog with everyone =, =

Today’s preview will be updated tomorrow:

Having said Vuepress + Github build your own blog (knowledge accumulation notebook), tomorrow I plan to update and explore other tools for building personal blogs: Hugo && Hexo…

Hurry up, everyone’s own knowledge notebook, record learning, enhance competitiveness, the next article please look forward to! hahah~

You can refer to the study article:

  1. Use OpenWrite to configure the blog guide public account plug-in – public account get the verification code read the full text

  2. Deploy the VuePress blog using Github Actions