VuePress + GitHub Pages 生成静态网站

最新推荐文章于 2024-09-06 16:48:39 发布
最新推荐文章于 2024-09-06 16:48:39 发布
阅读量1.5k 收藏 5
点赞数
分类专栏： Vue.js 文章标签： VuePress
文章仅作个人记录学习，部分内容来自网络著作权归作者所有，如有侵权请联系删除。欢迎一起学习交流！
本文链接：https://blog.csdn.net/yinqian999/article/details/90694736
版权

文章目录

VuePress官网
VuePress指南

VuePress ：Vue 驱动的静态网站生成器

一、环境

Node.js 版本 >= 8

全局安装 VuePress
npm install -g vuepress

创建项目文件夹，进入项目文件夹，初始化项目
使用 npm init 或 npm init -y（默认yes）

新建docs文件夹
docs文件夹作为项目文档根目录，主要放置Markdown类型的文章和.vuepress文件夹

在 docs 中创建 .vuepress 文件夹
在.vuepress中创建 public 文件夹和 config.js 文件
在这里插入图片描述

二、配置

package.json
vuepress dev docs命令运行本地服务，通过访问http://localhost:8080即可预览网站，vuepress build docs命令用来生成静态文件，默认情况下，放置在docs/.vuepress/dist目录中。在这里将两个命令封装成脚本的方式，直接使用npm run docs:dev和npm run docs:build即可。
在这里插入图片描述
config.js 中配置网站标题、描述、主题等信息
config.js更多配置

module.exports = {
    title: '',
    description: '',
    head: [ // 注入到当前页面的 HTML <head> 中的标签
    ['link', {
        rel: 'icon',
        href: '/favicon.ico'
    }], ],
    base: '/',
    // 这是部署到github相关的配置
    markdown: {
        lineNumbers: false // 代码块显示行号
    },
    themeConfig: {
        logo: '/logo.png',
        // displayAllHeaders: true // 默认值：false,显示所有页面的标题链接
        nav: [ // 导航栏配置
        {
            text: '主页',
            link: '/'
        },
        //  {text: 'language',
        //  items: [
        //    { text: 'Chinese', link: '/language/chinese' },
        //    { text: 'Japanese', link: '/language/japanese' }
        //  	]
        // },
        {
            text: '文章',
            link: '/xxx/xx'
        },
        {
            text: '博客',
            link: ''
        },
        {
            text: 'GitHub',
            link: ''
        }],
        sidebar: 'auto',
        // 侧边栏配置
        sidebarDepth: 2,
        // 侧边栏显示2级
        lastUpdated: 'Last Updated',

        // sidebar: [
        //   '/',
        //   '/page-a',
        //   ['/page-b', 'bbbbbbbbbb'],
        //   ['/page-c', 'cccccccccc'],
        //   {
        //     title: 'Group 1',
        //     // collapsable: false,
        //     children: [
        //       '/page-a',
        //       '/page-b',
        //       '/page-c'
        //     ]
        //   },
        //     {
        //     title: 'Group 2',
        //     // collapsable: false,
        //     children: [
        //       '/page-b',
        //       '/page-c'
        //     ]
        //   },
        // ],
    }
};

首页
默认的主题提供了一个首页（Homepage）的布局(用于这个网站的主页)。想要使用它，需要在你的根级 README.md的home: true，然后添加数据。

---
home: true
heroImage: /hero.png
actionText: Get Started →
actionLink: /guide/
features:
- title: Simplicity First
  details: Minimal setup with markdown-centered project structure helps you focus on writing.
- title: Vue-Powered
  details: Enjoy the dev experience of Vue + webpack, use Vue components in markdown, and develop custom themes with Vue.
- title: Performant
  details: VuePress generates pre-rendered static HTML for each page, and runs as an SPA once a page is loaded.
footer: MIT Licensed | Copyright © 2018-present Evan You
---

PWA配置
……

完成了基础搭建后，就可以在docs目录下新建 .md 文件写文章了

自定义容器
在这里插入图片描述
支持Emoji
Emoji
在这里插入图片描述
Badge

内置的组件，你可以在标题中，使用这个组件来为某些 API 添加一些状态：

### Badge <Badge text="beta" type="warn"/> <Badge text="0.10.1+"/>

在这里插入图片描述
更多配置详情请见 VuePress指南

三、部署 （使用 Github Pages）

新建仓库：USERNAME.github.io （USERNAME必须是你 Github 的账号名称）

在项目根目录下创建 deploy.sh 文件，内容如下：

# 确保脚本抛出遇到的错误
set -e

# 生成静态文件
npm run build

# 进入生成的文件夹
cd docs/.vuepress/dist

# 如果是发布到自定义域名
# echo 'www.example.com' > CNAME

git init
git add -A
git commit -m 'deploy'

# 如果你想要部署到 https://USERNAME.github.io
git push -f git@github.com:USERNAME/USERNAME.github.io.git master

# 如果发布到 https://USERNAME.github.io/<REPO>  REPO=github上的项目
# git push -f git@github.com:USERNAME/<REPO>.git master:gh-pages

cd –

设置package.json

{
    "scripts": {
        "deploy": "bash deploy.sh"
      },
}

运行 npm run deploy 即可自动构建部署到github上

yinqian_Golang
关注
专栏目录
VuePress-source:VuePress＆Github静态网站
03-23
在“VuePress-source:VuePress＆Github静态网站”这个项目中，我们看到的是使用 VuePress 创建的静态网站的源代码，它被托管在 Github 上，这符合开源的精神，允许用户查看、学习和贡献代码。 VuePress 的主要特点...
Linux学习笔记-shell脚本拼接文件并排序
weixin_45030158的博客
09-27 2886
shell实现两个文件的拼接 在实际的数据处理中，需要将多个文件写到同一个文件中，或者实现两个文件的拼接操作，这时候可以采用如下代码： cat inputFileName1 > outputFileName cat inputFileName2 >> outputFileName 第一行的目的是将输入文件1输出到输出文件中，第二行是将输入文件二直接添加在输出文件的尾部。随后如果仍有后续文件的拼接可继续使用第二行： cat inputFileNamen >> outputFil
作为一名程序员，怎么可以没有自己的博客网站（一份超详细VuePress + Github Pages教程）
weixin_43832950的博客
06-19 502
教你如何用VuePress + Github Pages 打造一个自己的博客网站，希望对你有所帮助~
超详细！！！最新的VuePress + Github Pages + Github Actions实现博客自动部署
最新发布
m0_59415345的博客
09-06 1078
本文着重讲述如何使用通过将VuePress项目部署自动在上。每一位开发者有一个自己的博客网站是一件很酷的事情，由于最近想整理一下在学习前端过程中的学习心得、体会等内容，因此一直想搭建一份自己的博客系统，用于后期的知识点回顾。其实在此之前，有使用进行博客的搭建，但是Vue写多了以后，想用VuePress也搭建一个，并作为后期文档维护的网站。在这里打个小广告。我的博客是在一位开源大佬的基础上搭建的，内容包含了HTML、CSS、JS/TS、VUE、REACT等一些列前端技术点，面试技巧等内容。！！
vuepress+github pages 搭建学习文档（保姆级教程）
mubaiyang2019的博客
08-04 1279
Vuepress+Github Pages 搭建个人学习文档！
VuePress2.0 + Github Actions部署到Github Pages教程
weixin_43019353的博客
05-19 761
选择权限，看不懂不懂全勾Read and write。就代表构建失败，可点进去查看原因。这代表成功，看到红色的。构建成功会发现多了个分支。
从零开始：VuePress2 + GitHub Pages 搭建你的第一个免费博客网站
zhanyd的博客
12-13 886
现在我就教你用 VuePress2 + GitHub Pages 搭建个人博客网站，不用服务器，完全免费哦，亲测有效~
VuePress 静态网站生成方法步骤
12-01
details: VuePress 为每个页面预渲染生成静态的 HTML，同时在页面被加载的时候，将作为 SPA 运行。 footer: MIT Licensed | Copyright © 2018-present Evan You --- ``` ### 侧边栏 要启用侧边栏，需在`config....
使用vuepress搭建静态博客的示例代码
10-17
7. 构建与部署：完成本地开发后，使用`vuepress build`命令构建项目生成静态文件，然后可以将这些文件部署到任何静态文件托管服务上，如GitHub Pages、Netlify或Vercel等。 综上所述，VuePress不仅是一款用于快速...
vuepress基于Vue的简约静态站点生成器
08-12
7. **易于部署**：VuePress生成的站点是纯静态的，可以轻松部署到任何静态文件托管服务上，如GitHub Pages、Netlify或阿里云OSS等。 8. **社区生态**：VuePress拥有活跃的开发者社区，提供了许多预建的主题和插件，...
手把手带你用 VuePress + Github Pages 搭建博客
afsdfrsg的博客
03-30 970
3. 添加导航栏我们现在在页首的右上角添加导航栏，修改config.jsnav: [{ text: ‘首页’, link: ‘/’ },text: ‘冴羽的 JavaScript 博客’,items: [{ text: ‘掘金’, link: ‘https://juejin.cn/user/712139234359182/posts’ }效果如下：更多的配置参考 VuePress 导航栏。4. 添加侧边栏现在我们添加一些 md 文档，目前文档的目录如下：├─ docs我们在。
VuePress部署到GitHub Pages
m0_37820751的博客
01-05 1501
自定义域名需要在自己的域名上添加解析。
手把手带你用 VuePress + Github Pages 搭建博客(1)
2401_84437691的博客
05-03 748
{ title: “泛型”, path: “/handbook/Generics” }],对应的效果如下：5. 更换主题现在基本的目录和导航功能已经实现，但如果我还想要加载 loading、切换动画、模式切换（暗黑模式）、返回顶部、评论等功能呢，为了简化开发成本，我们可以直接使用主题，这里使用的主题是 vuepress-theme-rec：现在我们安装 vuepress-theme-reco：# or然后在config.js里引用该主题：// …// …
VuePress搭建博客部署Gitee Pages
默存
03-10 2198
使用技术 VuePress + vuepress-theme-reco VuePress简介 VuePress文档地址 简洁至上：以 Markdown 为中心的项目结构，以最少的配置帮助你专注于写作。 Vue 驱动：享受 Vue + webpack 的开发体验，可以在 Markdown 中使用 Vue 组件，又可以使用 Vue 来开发自定义主题。 高性能：VuePress 会为每个页面预渲染生成静态的 HTML，同时，每个页面被加载的时候，将作为 SPA 运行。 一、上手搭建 1.创建并进入一个新
部署vuepress项目到githubPage
博客简介
10-26 1016
部署vuepress项目到githubPage上
vuepress创建+github展示页面（一）
qq_58791174的博客
06-14 237
写在前面，想要搭建首先要准备好一下几个工具。
手把手带你用 VuePress + Github Pages 搭建博客，2024年最新面试阿里巴巴
2401_83740189的博客
04-11 363
3. 添加导航栏我们现在在页首的右上角添加导航栏，修改config.jsnav: [{ text: ‘首页’, link: ‘/’ },text: ‘冴羽的 JavaScript 博客’,items: [{ text: ‘掘金’, link: ‘https://juejin.cn/user/712139234359182/posts’ }效果如下：更多的配置参考 VuePress 导航栏。4. 添加侧边栏现在我们添加一些 md 文档，目前文档的目录如下：├─ docs我们在。
基于Vuepress+GithubPages+Vercel进行博客搭建部署
℡﹏余温***
04-26 1072
基于vuepress theme hope + Vercel + GithubPages搭建博客并进行部署。
如何将vuepress项目部署到GitHub Pages
04-07
您可以按照以下步骤将vuepress项目部署到GitHub Pages： 1. 首先，您需要在GitHub上创建一个新的仓库，并将其命名为username.github.io（其中username是您的GitHub用户名）。 2. 在您的vuepress项目中，创建一个新...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值