静态网站搭建与研究-vuepress

奔跑的飞

已于 2022-03-01 15:20:53 修改

阅读量526

点赞数

分类专栏：建站文章标签： javascript 前端 vue.js

于 2022-03-01 15:18:10 首次发布

本文链接：https://blog.csdn.net/sinat_29421531/article/details/123206843

版权

建站专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.简介

官网 https://vuepress.vuejs.org/zh/
Vue 驱动的静态网站生成器

2.起步

1.安装


// 全局安装
yarn global add vuepress # 或者：npm install -g vuepress
// 本地依赖安装
yarn add -D vuepress # npm install -D vuepress

mkdir vuepress-starter && cd vuepress-starter
yarn init # npm init

2.创建你的第一篇文档

// 新建一个 markdown 文件
mkdir docs && echo '# Hello VuePress' > docs/README.md

在 package.json 中添加一些 scripts

{
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }
}

在本地启动服务器

yarn docs:dev # npm run docs:dev

启动项目: npm run docs:dev这条命令相当于vuepress dev docs
打包项目: npm run build这条命令相当于 vuepress build docs

3.配置

1.配置文件

如果没有任何配置，这个网站将会是非常局限的，用户也无法在你的网站上自由导航。为了更好地自定义你的网站，让我们首先在你的文档目录下创建一个 .vuepress 目录，所有 VuePress 相关的文件都将会被放在这里。你的项目结构可能是这样：

mkdir .vuepress

.
├─ docs
│  ├─ README.md
│  └─ .vuepress
│     └─ config.js
└─ package.json

一个 VuePress 网站必要的配置文件是 .vuepress/config.js，它应该导出一个 JavaScript 对象：

module.exports = {
  title: 'Hello VuePress',
  description: 'Just playing around'
}

mkdir public

vuepressBlogDemo
├─── docs
│   ├── README.md
│   └── .vuepress
│       ├── public
│       └── config.js
└── package.json

这个文件夹是用来放置静态资源的，打包出来之后会放在.vuepress/dist/的根目录。

2.基本配置


module.exports = {
    title: '学之道',
    description: '学无止境--业精于勤，荒于嬉；行成于思，毁于随',
    // 注入到当前页面的 HTML <head> 中的标签
    head: [
      ['link', { rel: 'icon', href: '/favicon.ico' }], // 增加一个自定义的 favicon(网页标签的图标)
    ],
    base: '/', // 这是部署到github相关的配置
    markdown: {
      lineNumbers: true // 代码块显示行号
    },
    // themeConfig: {
    //   sidebarDepth: 2, // e'b将同时提取markdown中h2 和 h3 标题，显示在侧边栏上。
    //   lastUpdated: 'Last Updated' // 文档更新时间：每个文件git最后提交的时间
    // },
    themeConfig: {
        lastUpdated: '上次更新', // string | boolean
        nav:[
          { text: 'html', link: '/html/' }, // 内部链接 以docs为根目录
          { text: '博客', link: 'https://blog.csdn.net/sinat_29421531?spm=1008.2028.3001.5343/' }, // 外部链接
          // 下拉列表
          {
            text: 'GitHub',
            items: [
              { text: 'GitHub地址', link: 'https://github.com/fenglongtian' },
              {
                text: 'Gitee',
                link: 'https://gitee.com/fenglongtian'
              }
            ]
          }        
        ]
      }
  };

---
home: true
heroText: 学无止境
tagline: 业精于勤，荒于嬉；行成于思，毁于随
heroImage: /hero.gif

actionText: 快速上手 →
actionLink: /zh/guide/
features:
- title: 学习
  details: 读书学习可以开拓视野，增长见识！既要保持学习，也要学会抬头看路。
- title: 技能
  details: 一步一个脚印，脚踏实地，向前走...始于前端，不止于前端，努力成为一个优秀的工程师，学会总结与分享，做些有意义的事！
- title: 感悟
  details: 人生短暂，学会感受生活，学会享受生活...
footer: MIT Licensed | Copyright © 2018-present 京ICP备16006076号-1
---

部署

GitHub Pages

在 docs/.vuepress/config.js 中设置正确的 base。如果你打算发布到 https://<USERNAME>.github.io/，则可以省略这一步，因为 base 默认即是 “/”。如果你打算发布到 https://<USERNAME>.github.io/<REPO>/（也就是说你的仓库在 https://github.com//），则将 base 设置为 "/<REPO>/"。
在你的项目中，创建一个如下的 deploy.sh 文件（请自行判断去掉高亮行的注释）:

#!/usr/bin/env sh

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

# 生成静态文件
npm run docs: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>
# git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages

cd -

奔跑的飞

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
静态网站搭建与研究-vuepress

1.简介官网 https://vuepress.vuejs.org/zh/Vue 驱动的静态网站生成器2.起步1.安装// 全局安装yarn global add vuepress # 或者：npm install -g vuepress// 本地依赖安装yarn add -D vuepress # npm install -D vuepressmkdir vuepress-starter && cd vuepress-starteryarn init # npm i
复制链接

扫一扫