VuePress搭建博客部署Gitee Pages
<h3 id="使用技术">使用技术</h3><p>VuePress + vuepress-theme-reco</p>
<h3 id="vuepress简介">VuePress简介</h3>
<p>VuePress文档地址</p>
<ul>
<li>简洁至上：以 Markdown 为中心的项目结构，以最少的配置帮助你专注于写作。</li>
<li>Vue 驱动：享受 Vue + webpack 的开发体验，可以在 Markdown 中使用 Vue 组件，又可以使用 Vue 来开发自定义主题。</li>
<li>高性能：VuePress 会为每个页面预渲染生成静态的 HTML，同时，每个页面被加载的时候，将作为 SPA 运行。</li>
</ul>
<h5 id="一上手搭建">一、上手搭建</h5>
<p>1.创建并进入一个新目录</p>
<pre><code class="language-sh">mkdir vuepress-starter && cd vuepress-starter
</code></pre>
<p>2.使用你喜欢的包管理器进行初始化</p>
<pre><code class="language-sh">yarn init # npm init
</code></pre>
<p>3.将 VuePress 安装为本地依赖</p>
<pre><code class="language-sh">yarn add -D vuepress # npm install -D vuepress
</code></pre>
<blockquote>
<p>官方不推荐全局安装 VuePress</p>
</blockquote>
<p>4.创建你的第一篇文档</p>
<pre><code class="language-sh">mkdir docs && echo '# Hello VuePress' > docs/README.md
</code></pre>
<p>5.在 package.json 中添加一些 scripts</p>
<pre><code class="language-json">{
"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs"
}
}
</code></pre>
<p>6.在本地启动服务器</p>
<pre><code class="language-sh">yarn docs:dev # npm run docs:dev
</code></pre>
<p>VuePress 会在 http://localhost:8080 启动一个热重载的开发服务器。</p>
<h5 id="二目录结构">二、目录结构</h5>
<pre><code>.
├── 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
</code></pre>
<h3 id="vuepress-theme-reco简介">vuepress-theme-reco简介</h3>
<p>vuepress-theme-reco文档地址</p>
<blockquote>
<p>此主题几乎继承 VuePress 默认主题的一切功能。</p>
</blockquote>
<ul>
<li>过去：开发一款看着开心、写着顺手的 vuepress 博客主题。</li>
<li>当下：帮助更多的朋友节省时间去用心书写内容，而不是仅仅配置一个博客去孤芳自赏。</li>
<li>未来：吸引更多的朋友参与到开发中来，继续强大功能。</li>
</ul>
<h5 id="一安装和引用">一、安装和引用</h5>
<p>1.安装</p>
<pre><code class="language-sh">npm install vuepress-theme-reco --save-dev
# or
yarn add vuepress-theme-reco
</code></pre>
<p>2.引用</p>
<pre><code class="language-js">// .vuepress/config.js
module.exports = {
theme: 'reco'
}
</code></pre>
<h5 id="二写文章时添加分类标签日期作者">二、写文章时添加分类、标签、日期、作者</h5>
<pre><code class="language-yaml">---
title: 此处是标题 # 文章标题
date: 2021-03-10 10:00:00 # 时间
sidebar: 'auto' # 侧边栏
categories: # 分类
- java
tags: # 标签
- vue
author: 默存 # 作者
---
</code></pre>
<h3 id="部署giteegithub">部署Gitee&GitHub</h3>
<h5 id="一部署">一、部署</h5>
<blockquote>
<p>这里使用Gitee作为列子，毕竟国内的速度快。。。</p>
</blockquote>
<p>1.创建仓库（typ1805）</p>
<blockquote>
<p>使用 typ1805.gitee.io 访问首页，不带二级目录的 pages，需要建立一个与自己个性地址同名的仓库。</p>
</blockquote>
<p>2.提交代码至创建的仓库（typ1805）</p>
<p><img src="https://img2020.cnblogs.com/blog/1267674/202103/1267674-20210310103926562-2099595636.png" alt="提交代码" loading="lazy"></p>
<p>3.部署Gitee Pages</p>
<p><img src="https://img2020.cnblogs.com/blog/1267674/202103/1267674-20210310103949364-510843536.png" alt="部署" loading="lazy"></p>
<h5 id="二浏览访问">二、浏览访问</h5>
<p> https://typ1805.gitee.io</p>
<h5 id="三更新问题">三、更新问题</h5>
<p>Gitee Pages 个人版不支持提交自动更新，需要手动更新。。。</p><br><br>
来源：https://www.cnblogs.com/typ1805/p/14510137.html
頁:
[1]