关于前端:VuePress-从零搭建到部署

为什么要搭建博客呢?

其实始终有搭建博客的打算，平时记笔记都是零零散散的，每到要用的时候这里一块那里一块；始终就这么过去，于是痛定思痛下定决心搭建一个属于本人的博客。

然而又想有一个属于本人的博客又不想破费太多工夫咋办：用现有框架疾速搭建！

于是找到了这些疾速搭建的形式：

博客平台 (掘金、CSDN、博客园、Farbox之类的一站式平台，写好文章网上丢就能够了)
纯本人码 (须要超强的技术壁垒)

搭建博客的工具 (目前也是最支流的形式)

Hexo
Vuepress (本文次要说的)

为什么用VuePress搭建博客?

VuePress 由两局部组成：第一局部是一个极简动态网站生成器，
它蕴含由 Vue 驱动的主题零碎和插件 API，另一个局部是为书写技术文档而优化的默认主题，它的诞生初衷是为了反对 Vue 及其子项目的文档需要。

每一个由 VuePress 生成的页面都带有预渲染好的 HTML，也因而具备十分好的加载性能和搜索引擎优化（SEO）。同时，一旦页面被加载，Vue将接管这些动态内容，并将其转换成一个残缺的单页利用（SPA），其余的页面则会只在用户浏览到的时候才按需加载。

事实上，一个 VuePress 网站是一个由Vue、VueRouter 和webpack 驱动的单页利用。如果你以前应用过 Vue的话，当你在开发一个自定义主题的时候，你会感触到十分相熟的开发体验，你甚至能够应用 Vue DevTools 去调试你的自定义主题。

那咱们开始吧！

VuePress 须要 <a style="color: #3eaf7c;" href="https://nodejs.org/en/" target="_blank"rel="noopener noreferrer">Node.js</a> &gt;= 8.6

</p>
</div>

<span style="font-size: inherit; line-height: inherit; margin: 0px; display: inline-block; font-weight: normal; background: rgb(128, 128, 128); color: rgb(255, 255, 255); padding: 3px 10px 1px; border-top-right-radius: 3px; border-top-left-radius: 3px; margin-right: 3px;">初始化搭建VuePress</span>

</h3>

创立并进入一个新目录

mkdir vuepress-starter && cd vuepress-starter

应用你喜爱的包管理器进行初始化

yarn init # npm init

将 VuePress 装置为本地依赖,举荐本地装置 VuePress

yarn add -D vuepress # npm install -D vuepress

新建docs文件夹,开始第一篇文档

mkdir docs && echo '# Hello VuePress' > docs/README.md

设置package.json

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

在本地启动服务器

yarn docs:dev # npm run docs:dev

简简单单服务就这么起来了

这一看如同没啥用啊,咋疾速呢,先看看目前的目录构造:

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

如果咱们本人一步一步去搭建接下来就应该去进行config文件配置了:

module.exports = {    title: '个人主页',     description: '小白的博客',    head: [        ['link', { rel: 'icon', href: '/img/logo.ico' }],        ['link', { rel: 'manifest', href: '/manifest.json' }],    ]}

title：网站题目
description：网站形容
head：额定的须要被注入到以后页面的HTML"head"中的标签，其中门路的"/"就是public资源目录。

就这样一步一步搭建起来的博感觉最初总是差了点意思,这和我设想中怎么不一样,那怎样才能体(zhuang)验(bi)更好呢?找个花里胡哨的主题~

<span style="font-size: inherit; line-height: inherit; margin: 0px; display: inline-block; font-weight: normal; background: rgb(128, 128, 128); color: rgb(255, 255, 255); padding: 3px 10px 1px; border-top-right-radius: 3px; border-top-left-radius: 3px; margin-right: 3px;">vuepress-theme-reco主题搭建</span>

</h3>

集体认为这个主题应该是vuepress最好的一个主题之一，是博主午后南杂制作的一个超赞主题。
主题地址)

用主题好比游戏开局有了神器,一个字,就是淦!

装置

既然咱们有了神器就不必管之前的装置构建了,间接配备神器走起~

# createnpx vuepress-theme-reco-cli init my-blog# ornpm install  -greco-cli init my-blog# installcd my-blognpm install

执行dev命令运行程序

# runnpm run dev# buildnpm run build

页面进去,功败垂成~

然而感觉还是差了那么点意思,咋没有可恶的板娘,咋不能评论~

ok,那咱们持续

开启评论性能

很难受 vuepress-theme-reco帮咱们内置了评论性能,应用valine:一款疾速、简洁且高效的无后端评论零碎。

# 开启valineConfig: {  appId: "", // your appId  appKey: "" // your appKey}

获取appId和appKey:登录valine
登录胜利创立利用

创立实现点击设置获取利用appId, appKey,评论有了,美滋滋~

取得板娘的钟爱

取得可恶板娘加成~
通过配置板娘插件,装置胜利之后,在config.js中配置plugins

plugins: [    [      "@vuepress-reco/vuepress-plugin-kan-ban-niang",      {        theme: ["blackCat"],        clean: true,        modelStyle: {          position: "fixed",          left: "0px",          bottom: "0px",          opacity: "0.9",          zIndex: 99999        }      }    ]

这里我配置的是小黑猫,当然还要很多主题初音,萝莉任你摸索~

还有更多插件在等你~~

<span style="font-size: inherit; line-height: inherit; margin: 0px; display: inline-block; font-weight: normal; background: rgb(128, 128, 128); color: rgb(255, 255, 255); padding: 3px 10px 1px; border-top-right-radius: 3px; border-top-left-radius: 3px; margin-right: 3px;">blog部署</span>

</h3>

既然是搭建blog,部署当然很重要,如何部署呢?官网部署

GitHub Pages (本文次要说的)
Netlify
Google Firebase
Surge
Heroku
Vercel

为啥选GitHub,因为只有抉择GitHub部署能力配的上我打工人的身份!

第一步

你的 vuepress 我的项目是否曾经在github上的仓库下

如果是，请跳到第二步

如果不是，想在GitHub新建一个仓库，如图所示

仓库名字要和config.js 里的 base 属性值一样

创立好仓库当前，本地拉去代码git clone <你复制的地址>

把你的vuepress我的项目除了node_modules文件夹之外的文件全副复制到git clone下来的文件夹内

而后npm install 或者 yarn

npm run docs:dev 打包/打包后的文件在docs/.vuepress/dist文件夹下git add -Agit commit -m 'init'git push

第二步

增加脚本,咱们在根目录创立scritps文件,在文件下新建deploy-gh.sh文件,内容如下:

#!/usr/bin/env sh# 确保脚本抛出遇到的谬误set -e# 生成动态文件npm run build# 进入生成的文件夹cd public# 如果是公布到自定义域名# echo 'www.example.com' > CNAMEgit initgit add -Agit 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# 把下面的 <USERNAME> 换成你本人的 Github 用户名，<REPO> 换成仓库名，比方我这里就是：# git push -f git@github.com:wangxifa/qinFeng.git master:gh-pagesgit push -f https://github.com/wangxifa/qinFeng.git master:gh-pagescd -

这里举荐应用http,防止了ssh设置的问题
咱们在package.json设置快捷方式

 "scripts": {    "dev": "vuepress dev . --open --host \"localhost\"",    "build": "vuepress build .",    "gh": "bash scripts/deploy-gh.sh"  },

运行代码

yarn gh

第三步

此时github上你应该能够看到你的分支

点击settings ,而后往下拉，找到 GitHub Pages

在Source的下拉选中你的分支

呈现 Your site is published at 网址

就阐明公布胜利了，拜访这个网址就能够看到你的博客啦

示例：我的博客

<span style="font-size: inherit; line-height: inherit; margin: 0px; display: inline-block; font-weight: normal; background: rgb(128, 128, 128); color: rgb(255, 255, 255); padding: 3px 10px 1px; border-top-right-radius: 3px; border-top-left-radius: 3px; margin-right: 3px;">最初</span>

</h3>

至此,从零开始搭建部署博客就实现了~

当然这只是开始,更加重要的是去保持去利用博客记录本人的所思所想~

成为一个优良的打工人!

本文章的编写参考了

搭建一个收费的，有限流量的Blog----github Pages和Jekyll入门

用Vuepress搭建专属你的博客吧

部署 VuePress 到 GitHub Pages (超具体)