VuePress从零开始部署

时间：2023-04-01 00:20:57 vue.js

为什么要建博客？其实，我一直打算建一个博客。我通常在这里和那里做笔记。每次我需要用到它的时候，我到处都有一块；但是如果你想拥有自己的博客又不想花太多时间怎么办：利用已有的框架快速搭建吧！于是找到了这些快速搭建的方法：博客平台（掘金、CSDN、博客园、Farbox等一站式平台，写好文章扔到网上就行）纯自码（需要超强的技术壁垒）搭建博客的工具（目前最主流的方式）HexoVuepress（本文主要讨论）为什么要用VuePress搭建博客？VuePress由两部分组成：第一部分是一个极简的静态网站生成器，它包括一个由Vue驱动的主题系统和插件API，另一部分是为编写技术文档而优化的默认主题，它最初是为了支持文档需求而诞生的Vue及其子项目。VuePress生成的每个页面都带有预渲染的HTML，因此它具有非常好的加载性能和搜索引擎优化（SEO）。同时，一旦页面加载完毕，Vue就会接管静态内容，将其转化为一个完整的单页应用程序（SPA），其他页面只会在用户浏览到它时才按需加载。事实上，VuePress网站是由Vue、VueRouter和webpack提供支持的单页面应用程序。如果你之前使用过Vue，当你开发自定义主题时，你会感受到非常熟悉的开发体验，甚至可以使用VueDevTools来调试你的自定义主题。让我们开始吧！

先决条件

VuePress需要Node.js>=8.6

初始化构建VuePress创建并进入新目录mkdirvuepress-starter&&cdvuepress-starter使用你喜欢的包yarninit#npminit将VuePress安装为本地依赖，建议在本地安装VuePressadd-Dvuepress#npminstall-Dvuepress新建一个docs文件夹并启动第一个文档mkdirdocs&&echo'#HelloVuePress'>docs/README.mdsetuppackage.json{"scripts":{"docs:dev":"vuepressdevdocs","docs:build":"vuepressbuilddocs"}}在本地启动服务器yarndocs:dev#npmrundocs:dev很简单，服务就这样起来了。乍一看似乎没什么用。让我们看一下当前的目录结构：├─docs│├─README.md│└─.vuepress│└─config.js└─package.json如果我们一步一步构建它，我们应该配置配置文件：module.exports={title:'个人主页',description:'小白的博客',head:[['link',{rel:'icon',href:'/img/logo.ico'}],['link',{rel:'manifest',href:'/manifest.json'}],]}title:网站标题description:网站描述head:需要注入到当前页面的HTML“head”中的附加标签，其中路径中的“/”为公共资源目录就这样，一步步搭建起来的博客，到最后总感觉少了一些趣味。为什么和我想象的不一样，那我怎么体验（zhuang）体验（bi）更好呢？找个花哨的主题~

vuepress-theme-reco主题构建个人觉得这个主题应该是vuepress最好的主题之一了，而且是博主吴南扎做的一个超赞的主题。主题地址）使用主题就像在游戏开始时拥有神器一样。一个字，就是甘！安装既然有了神器，就不用管前面的安装搭建了，直接装备神器就可以了~#createnpxvuepress-theme-reco-cliinitmy-blog#ornpminstall-greco-cliinitmy-blog#installcdmy-blognpminstall执行dev命令运行程序#runnpmrundev#buildnpmrunbuild页面出来了，大功告成~不过感觉还是少了点意思，为什么呢不可爱吗？半娘，我怎么不能评论啊~ok，那我们继续很舒服的打开评论功能。vuepress-theme-reco帮我们搭建一个评论功能，使用valine：一个快速、简单、高效的无后台评论系统。#打开valineConfig:{appId:"",//你的appIdappKey:""//你的appKey}获取appId和appKey:登录valine并登录成功创建app创建完成后点击设置获取appId,appKey,评论都有了，好开心~获得板娘的爱，获得萌板娘的红包~安装成功后，通过配置板娘插件在config.js中配置plugins插件：[["@vuepress-reco/vuepress-plugin-kan-ban-niang",{主题:["blackCat"],clean:true,modelStyle:{position:"fixed",left:"0px",bottom:"0px",opacity:"0.9",zIndex:99999}}]这里我配置的是小黑猫，当然还有很多主题初音、萝莉等你探索~还有更多插件等着你~~

博客部署既然是搭建博客，部署当然很重要。如何部署？官网部署GitHubPages（本文主要讲）为什么NetlifyGoogleFirebaseSurgeHerokuVercel选择GitHub，因为只有选择GitHub部署才能匹配我的workersIdentity！第一步是你的vuepress项目是否已经在github的仓库下了。如果是，请跳至第二步。如果没有，你想在GitHub上创建一个新的仓库。如图所示，仓库的名字要和config.js中的base属性值一样。创建仓库后，拉取代码到本地。gitclone<你复制的地址>将你的vuepress项目除了node_modules文件夹以外的所有文件复制到gitclone之后的文件夹中然后npminstall或者yarnnpmrundocs:dev打包/打包的文件在docs/.vuepress/dist文件夹gitadd-Agitcommit-m'init'gitpush第二步添加脚本，我们在根目录下新建一个scritps文件，并在deploy-文件下新建一个gh.sh文件，内容如下如下：#!/usr/bin/envsh#确保脚本抛出遇到的错误set-e#生成静态文件npmrunbuild#进入生成的文件夹cdpublic#如果发布到自定义域#echo'www.example.com'>CNAMEgitinitgitadd-Agitcommit-m'deploy'#如果发布到https://.github.io#gitpush-fgit@github.com:/.github.io.gitmaster#如果发布到https://.github.io/#gitpush-fgit@github.com:/。gitmaster:gh-pages#将上面的替换成你自己的Github用户名,<REPO>替换为仓库名，例如这里是：#gitpush-fgit@github.com:wangxifa/qinFeng.gitmaster:gh-pagesgitpush-fhttps://github.com/wangxifa/qinFeng.gitmaster:gh-pagescd-这里推荐HTTP，避免ssh设置的问题我们在package.json中设置快捷方式"scripts":{"dev":"vuepressdev.--open--host\"localhost\"","build":"vuepressbuild.","gh":"bashscripts/deploy-gh.sh"},运行代码yarngh步骤3此时，你应该可以在github上看到你的分支，点击settings，然后向下滚动，找到GitHubPages，在Source下拉选择你的分支，出现Yoursiteispublishedat的URL，即发布成功。访问此URL以查看您的博客。示例：我的博客

最后至此，从头开始构建和部署博客就完成了完成啦~当然这只是开始，更重要的是坚持用博客记录你的想法~成为一名优秀的工作者！这篇文章的写作指的是搭建一个免费、无限流量的Blog-----开始使用githubPages和Jekyll使用Vuepress搭建自己的博客。部署VuePress到GitHubPages（超级详细）

上一篇：javascript实现前端下载图片

下一篇：推荐一个框架

VuePress从零开始部署相关文章