使用技術
VuePress + vuepress-theme-reco
VuePress簡介
- 簡潔至上：以 Markdown 為中心的項目結構，以最少的配置幫助你專注於寫作。
- Vue 驅動：享受 Vue + webpack 的開發體驗，可以在 Markdown 中使用 Vue 組件，又可以使用 Vue 來開發自定義主題。
- 高性能：VuePress 會為每個頁面預渲染生成靜態的 HTML，同時，每個頁面被加載的時候，將作為 SPA 運行。
一、上手搭建
1.創建並進入一個新目錄
mkdir vuepress-starter && cd vuepress-starter
2.使用你喜歡的包管理器進行初始化
yarn init # npm init
3.將 VuePress 安裝為本地依賴
yarn add -D vuepress # npm install -D vuepress
官方不推薦全局安裝 VuePress
4.創建你的第一篇文檔
mkdir docs && echo '# Hello VuePress' > docs/README.md
5.在 package.json 中添加一些 scripts
{
"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs"
}
}
6.在本地啟動服務器
yarn docs:dev # npm run docs:dev
VuePress 會在 http://localhost:8080 啟動一個熱重載的開發服務器。
二、目錄結構
.
├── docs
│ ├── .vuepress (可選的)
│ │ ├── components (可選的)
│ │ ├── theme (可選的)
│ │ │ └── Layout.vue
│ │ ├── public (可選的)
│ │ ├── styles (可選的)
│ │ │ ├── index.styl
│ │ │ └── palette.styl
│ │ ├── templates (可選的, 謹慎配置)
│ │ │ ├── dev.html
│ │ │ └── ssr.html
│ │ ├── config.js (可選的)
│ │ └── enhanceApp.js (可選的)
│ │
│ ├── README.md
│ ├── guide
│ │ └── README.md
│ └── config.md
│
└── package.json
vuepress-theme-reco簡介
此主題幾乎繼承 VuePress 默認主題的一切功能。
- 過去：開發一款看着開心、寫着順手的 vuepress 博客主題。
- 當下：幫助更多的朋友節省時間去用心書寫內容，而不是僅僅配置一個博客去孤芳自賞。
- 未來：吸引更多的朋友參與到開發中來，繼續強大功能。
一、安裝和引用
1.安裝
npm install vuepress-theme-reco --save-dev
# or
yarn add vuepress-theme-reco
2.引用
// .vuepress/config.js
module.exports = {
theme: 'reco'
}
二、寫文章時添加分類、標簽、日期、作者
---
title: 此處是標題 # 文章標題
date: 2021-03-10 10:00:00 # 時間
sidebar: 'auto' # 側邊欄
categories: # 分類
- java
tags: # 標簽
- vue
author: 默存 # 作者
---
部署Gitee&GitHub
一、部署
這里使用Gitee作為列子，畢竟國內的速度快。。。
1.創建倉庫（typ1805）
使用 typ1805.gitee.io 訪問首頁，不帶二級目錄的 pages，需要建立一個與自己個性地址同名的倉庫。
2.提交代碼至創建的倉庫（typ1805）
3.部署Gitee Pages
二、瀏覽訪問
三、更新問題
Gitee Pages 個人版不支持提交自動更新，需要手動更新。。。