preface

As a front-end how can not belong to their own blog, but usually busy with work, it is difficult to take out a lot of time to build their own blog. I don’t know if you’ve heard of VuePress, which is a quick way to build a vue like official document. It also provides blog themes that allow you to quickly build your own blog, with built-in comments, tag walls, timelines, etc. Here are some of my own tips on how to deploy a blog.

preview

The construction of personal blog is mainly vuepress + Reco theme

  • Personal blog preview address
  • Vuepress official document
  • Reco Topic documents

Initialize the

  • Create a project folderblogAnd initialize it
npm init -y
Copy the code
  • The installationVuepress
npm install -D vuepress
Copy the code
  • inpackage.jsonTo add startup/compile commands. You are advised to add startup commands-temp .temp“, so we don’t need to restart the project to see the effect after we change the configuration file.
{
  "scripts": {
    "dev": "vuepress dev docs -temp .temp",
    "build": "vuepress build docs"
  }
}
Copy the code
  • createdocsFolder, and indocsCreate a readme.md document in the folder.
# Hello VuePress
Copy the code
  • runnpm run devCommand to access our first document (readme.md) locally.

The directory structure

The official recommended directory structure, you can follow this structure to build

. ├ ─ ─ docs │ ├ ─ ─ the vuepress (optional) │ │ ├ ─ ─ components (optional) │ │ ├ ─ ─ the theme (optional) │ │ │ └ ─ ─ Layout. The vue │ │ ├ ─ ─ public (optional) │ │ ├ ─ ─ styles (optional) │ │ │ ├ ─ ─ but styl │ │ │ └ ─ ─ the palette. Styl │ │ ├ ─ ─ templates (optional, Careful configuration) │ │ │ ├ ─ ─ dev. HTML │ │ │ └ ─ ─ SSR. HTML │ │ ├ ─ ─ the config, js (optional) │ │ └ ─ ─ enhanceApp. Js (optional) │ │ │ ├ ─ ─ the README. │ md ├ ─ ─ guide │ │ └ ─ ─ the README. Md │ └ ─ ─ config. The md │ └ ─ ─ package. The jsonCopy the code

Focus on these two files:

  • docs/README.md: the home page.
  • docs/.vuepress/config.js: configuration file.

Home page

Copy the following contents into the docs/ readme. md file to check whether the home flag is enabled on the home page. You can also set null to the title and subtitle to disable the home page.

-- Home: true heroImage: /hero.png heroText: hero Tagline: hero Subtitle actionText: Get started quickly → actionLink: 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. Footer: MIT Licensed | Copyright © 2018 - present Evan You -Copy the code

The configuration file

Docs /.vuepress/config.js, configure the navigation bar, sidebar, search, logo… Refer to the following files for configuration

module.exports = {
  "title": "Tree meets deer.".// Website title
  "description": "Life can't be as good as you think it is, but it's not as bad as you think it is.".// Website description
  "dest": "docs/.vuepress/dist".// Directory for storing packaged files
  "base": "/blog/".// The path of the packaged static resource
  // The site icon
  "head": [["link",
      {
        "rel": "icon"."href": "/avatar.png"}]],/ / the plugin
  "plugins": [['@vuepress/register-components'.// Comment plugin]],/ / theme - reco
  "theme": "reco".// Navigation/sidebar configuration, the timeline is built-in, just need to configure the route, link is the path of the document. Equivalent to routes in vUE
  "themeConfig": {
    / / the navigation bar
    "nav": [{"text": "Home page"."link": "/"."icon": "reco-home"
      },
      {
        "text": "Timeline"."link": "/timeline/"."icon": "reco-date"
      },
      {
        "text": "Essays"."icon": "reco-document"."link": "/theme-reco/theme-reco/"
      },
      {
        "text": "Message board"."icon": "reco-suggestion"."link": "/theme-reco/message-board.md"
      },
      {
        "text": "About me"."icon": "reco-account"."items": [{"text": "Personal Information"."link": "/theme-reco/about.md"}, {"text": "Nuggets"."link": "https://juejin.cn/user/3281394147006381"."icon": "reco-juejin"}}]].// In the sidebar, the auto identifier is automatically generated. Each document generates a directory based on its title, which can also be configured by itself
    // "sidebar": "auto",
    "sidebar": {
      "/theme-reco/theme-reco/": [
        ""."timer"]},// Comment on the plug-in configuration
    "valineConfig": {
      "appId": ' '.// your appId
      "appKey": ' '.// your appKey
    },
    / / website logo
    "logo": "/avatar.png".// Whether to enable search
    "search": true,}}Copy the code

The deployment of

  • Create a git repository blog (the repository must be public, or pages will be charged)
  • Find Pages in setting of repository, open Pages, default is main branch, save
  • In my own deployment, in the same branch, the packaged files are placed in the Docs folder in the root directory, and Then Pages sets the docs folder so that every time the document is written, the packaged and committed code is automatically deployed

Blog mainly records the article of a few study, if have inadequacy, hope everybody points out, thank.