嘉兴网站建设企业,WORDpress文章分类栏目,江门企业自助建站系统,做图片素材的网站有哪些什么是VuePress?
以下是VuePress官方文档的介绍#xff1a;VuePress 是一个以 Markdown 为中心的静态网站生成器。你可以使用 Markdown 来书写内容#xff08;如文档、博客等#xff09;#xff0c;然后 VuePress 会帮助你生成一个静态网站来展示它们。VuePress 诞生的初…
什么是VuePress?
以下是VuePress官方文档的介绍VuePress 是一个以 Markdown 为中心的静态网站生成器。你可以使用 Markdown 来书写内容如文档、博客等然后 VuePress 会帮助你生成一个静态网站来展示它们。VuePress 诞生的初衷是为了支持 Vue.js 及其子项目的文档需求但是现在它已经在帮助大量用户构建他们的文档、博客和其他静态网站。
什么时Vercel
以下是Vercel官方文档的介绍Vercel 是一个面向开发人员的平台可提供更快地构建和部署 Web 应用程序所需的工具、工作流程和基础设施而无需额外配置。Vercel 开箱即用地支持流行的前端框架其可扩展、安全的基础设施分布在全球范围内可以从用户附近的数据中心提供内容以实现最佳速度。在开发过程中Vercel 提供了用于项目实时协作的工具例如自动预览和生产环境以及预览部署的评论。 以上就是关于VuePress和Vercel的定义 如何使用VuePress?
格外注意 我们的vuepress版本是2.0首先得保证你的node版本在18.16.0以上 搭建一个基础的博客目录 创建一个新目录并进入
mkdir vuepress-starter
cd vuepress-starter初始化项目
git init
npm init:::warning 注意在npm init这一步你只需要一直按回车就行了 :::
将 VuePress 安装为本地依赖
npm install -D vuepressnext在 package.json 中添加scripts
{scripts: {docs:dev: vuepress dev docs,docs:build: vuepress build docs}
}添加之后你的package.json长这样儿
{name: vuepress-demo,version: 1.0.0,description: ,main: index.js,scripts: {test: echo \Error: no test specified\ exit 1,docs:dev: vuepress dev docs,docs:build: vuepress build docs},author: ,license: ISC,devDependencies: {vuepress: ^2.0.0-rc.0}
}将node_modules、.temp、.cache目录添加到 .gitignore 文件中
echo node_modules .gitignore
echo .temp .gitignore
echo .cache .gitignore在你的项目根目录下创建docs文件夹以及在docs文件夹下面创建README.md文件。docs文件夹是你以后主要工作的目录用来存放md文档、静态资源、配置信息等 运行命令npm run docs:dev启动开发服务就会启动一个http://localhost:8080/ 的本地服务然后让我们在README.md中写点东西来看看效果直接写 Markdown 语法即可比如我们写上一个 # vuepress-demo打开浏览器就会看到效果 以上就是对vuepress最基础的上手操作我们搭建了一个vuepress项目并启动了一个开发服务并为它设置了一个h1的标题 vuepress基础配置
在**docs/.vuepress**文件夹下创建一个**config.js**(如果没有.vuepress那就在docs目录下面手动创建一个)config.js主要是用来存放项目的一些配置所以这个文件显得及其重要。 以下的配置均写在config.js中 主题
我们先使用默认主题默认主题是内置了的不需要再单独安装如果需要安装其他的主题具体的操作可以查看官方文档 主题
import { defaultTheme } from vuepress // 默认主题export default {theme: defaultTheme({// 默认主题配置navbar: [{text: 掘金, link: https://juejin.cn/user/515006730085735},{text: Github, link: https://github.com/xiaobai-Coding},],}),
}navbar导航栏
navbar属性为一个数组text为标题link为需要导航的链接例如像下面这样
navbar: [{text: 掘金, link: https://juejin.cn/user/515006730085735},{text: Github, link: https://github.com/xiaobai-Coding},],sidebar侧栏目录
sidebar属性接收一个数组 text标题、collapsible是否可折叠、children子项目children中可以嵌套继续子项目
sidebar: [{text: 学习,collapsible: true,children: [/* JavaScript */{text: JavaScript,collapsible: true,children: []},/* Vue */{text: Vue,collapsible: true,children: []},/* CSS */{text: CSS,collapsible: true,children: []},{text: 03.md,link: /study/03.md,}]},
]标题和语言
title属性为一个字符串作为博客的标题展示lang博客的语言默认为英文我们可以将它改为中文zh-CN
import { defaultTheme } from vuepress/theme-default
module.exports {title: 小白Coding日志,lang: zh-CN,description: 这里是小白Coding日志,会以轻松简单的方式,通过分享编程学习日常,帮助大家一步步掌握编程技能!,theme: defaultTheme({navbar: [{text: 掘金, link: https://juejin.cn/user/515006730085735},{text: Github, link: https://github.com/xiaobai-Coding},],})
}描述
description属性为一个字符串作为博客的描述信息
logo
展示在左上角的logo为一张图片建议图片不要太大最好压缩一下再使用
静态资源
我们将静态资源放在public目录下在.vuepress目录下面创建一个public文件夹用来存放静态资源比如我们要使用logo直接这样/images/logo1.png它会被复制到最终生成的网站的根目录下。具体的你可以看官方文档 public
home页配置
home页也就是读者访问你的博客第一眼看到的内容在这里你可以对自己的博客做一些简要介绍和声明以让读者快速的了解你的博客。还记得我们最开始的时候在docs目录下创建的README.md文件嘛这个文件就是配置首页内容的地方 注意语法是这样子的 ---
home: true
heroImage: /images/logo2.png
heroAlt: 小白Coding日志
heroText: 小白Coding日志
tagline: 低头做事无问西东种下一棵树的最佳时间是十年前和现在
actions:- text: 开始阅读link: /study/02.mdtype: primary
footer: 这里是小白Coding日志,会以轻松简单的方式,通过分享编程学习日常,帮助大家一步步掌握编程技能!
---详细配置您可以看home配置
lastUpdatedText最近更新时间戳 标签的文字、contributorsText贡献者列表 标签的文字
lastUpdatedText: 上次更新,
contributorsText: 贡献者经过以上步骤你就可以搭建出一个属于自己的博客了 将代码提交到Github并且与Vercel关联实现自动部署
在Github中新建一个仓库然后将自己的博客系统代码提交到仓库中这一步相信大家都会操作我就不重复了吧。在这一步将代码提交到Github的目的就是与Vercel关联项目在Vercel中部署之后以后更新你的博客内容只需要将代码提交到Github中,然后Vercel就能实现自动部署
首先需要使用你自己的Github账号来登录Vercel。点击新建项目来添加Github中的项目选择对应的项目。点击导入按钮来导入要部署的项目。部署的配置一般使用默认的就行输出的目录要改一下docs/.vuepress/dist点击部署按钮开始部署等一会儿就部署好了只要你在本地运行vuepress build docs命令能够打包成功那么部署也基本上没有问题的部署成功之后Vercel会给你分配一个默认的域名通过这个域名就能访问到自己的博客网站 你以为到这里就大功告成结束了其实还差最后一步请接着继续往下看 Vercel部署的网站国内无法访问的问题
博客部署成功之后会发现在外网中是可以正常访问的但国内是无法访问的可是我们部署的个人博客网站主要面向对象还得是国内的小伙伴们啊这个问题得解决啊不然这个事情就等于白忙活一场。 遇到这个问题我的想法是能不花钱就不花钱我用了两个方案去解决这个问题 试着使用 GithubPages 的方式去免费部署自己的网站折腾了两晚上(因为我都是利用下班后的时间在弄这个事情)发现GithubPages部署后达到的效果并不理想不是我想要的所以这个方案最终被抛弃。注册一个自己的域名在Vercel中设置自定义域名去解决这个问题然后国内就可以正常访问了。我是在阿里云注册了一个域名通过www.xiaobaicoding.com重定向到vercel。 在阿里云购买注册域名完成相关实名认证等操作进入vercel点击已经部署成功的项目进入详情点击设置后选择域名在输入框中输入你刚刚在阿里云注册的那个域名点击添加按钮后根据vercel的提示再去到阿里云域名管理控制台对域名进行解析在阿里云输入相关配置保存后耐心等待一段时间就好了这个可能每个人的情况不同然后在浏览器地址栏中直接输入自己注册的那个域名就能访问自己的博客网站了 看来还是得花钱啊花钱能免去很多麻烦 搭建个人博客网站并实现自动化部署是一个重要的里程碑。通过 VuePress 和 Vercel我们成功创建了一个功能强大且稳定的博客平台并解决了国内访问的问题。这个过程可能有挑战但我们的不懈努力让我们取得了成功。谢谢您的阅读和耐心希望这篇文章能帮助您搭建自己的个人博客并且解决在部署过程中可能遇到的问题。祝愿您的博客之旅愉快不断取得进步与成就有任何问题欢迎小伙伴们评论区留言。
