• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

VuePress 从零搭建到部署

互联网 diligentman 2周前 (11-20) 13次浏览

<div style=”font-size: 16px; word-spacing: 2px; letter-spacing: 2px; font-family: ‘Helvetica Neue’, Helvetica, ‘Hiragino Sans GB’, ‘Microsoft YaHei’, Arial, sans-serif; background-image: linear-gradient(90deg, rgba(50, 0, 0, 0.05) 3%, rgba(0, 0, 0, 0) 3%), linear-gradient(360deg, rgba(50, 0, 0, 0.05) 3%, rgba(0, 0, 0, 0) 3%); background-size: 20px 20px; “><div>

为什么要搭建博客呢?

其实一直有搭建博客的打算,平时记笔记都是零零散散的,每到要用的时候这里一块那里一块;一直就这么过来,于是痛定思痛下定决心搭建一个属于自己的博客。

但是又想有一个属于自己的博客又不想花费太多时间咋办:用现有框架快速搭建!

于是找到了这些快速搭建的方式:

  • 博客平台 (掘金、CSDN、博客园、Farbox之类的一站式平台,写好文章网上丢就可以了)
  • 纯自己码 (需要超强的技术壁垒)

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

  • Hexo
  • Vuepress (本文主要说的)

为什么用VuePress搭建博客?

VuePress 由两部分组成:第一部分是一个极简静态网站生成器,
它包含由 Vue 驱动的主题系统和插件 API,另一个部分是为书写技术文档而优化的默认主题,它的诞生初衷是为了支持 Vue 及其子项目的文档需求。

每一个由 VuePress 生成的页面都带有预渲染好的 HTML,也因此具有非常好的加载性能和搜索引擎优化(SEO)。同时,一旦页面被加载,Vue将接管这些静态内容,并将其转换成一个完整的单页应用(SPA),其他的页面则会只在用户浏览到的时候才按需加载。

事实上,一个 VuePress 网站是一个由Vue、VueRouter 和webpack 驱动的单页应用。如果你以前使用过 Vue的话,当你在开发一个自定义主题的时候,你会感受到非常熟悉的开发体验,你甚至可以使用 Vue DevTools 去调试你的自定义主题。

那我们开始吧!

<div style=”background-color: rgba(255,229,100,.3); border-color: #e7c000; color: #6b5900;padding: .1rem 1.5rem;border-left-width: .5rem;border-left-style: solid;margin: 1rem 0;”>
<p class=”custom-block-title”>前提条件</p>
<p>

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

</p>
</div>

<h3 style=”color: inherit;line-height: inherit;padding: 0px; margin: 1.6em 0px;font-weight: bold;border-bottom: 2px solid rgb(128, 128, 128);”>

<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

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

VuePress 从零搭建到部署

这一看好像没啥用啊,咋快速呢,先看看目前的目录结构:

├─ 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)更好呢?找个花里胡哨的主题~

<h3 style=”color: inherit;line-height: inherit;padding: 0px; margin: 1.6em 0px;font-weight: bold;border-bottom: 2px solid rgb(128, 128, 128);”>

<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最好的一个主题之一,是博主午后南杂制作的一个超赞主题。
主题地址)

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

安装

既然我们有了神器就不用管之前的安装构建了,直接装备神器走起~

# create
npx vuepress-theme-reco-cli init my-blog
# or
npm install  -g
reco-cli init my-blog

# install
cd my-blog
npm install

执行dev命令运行程序

# run
npm run dev

# build
npm run build

页面出来,大功告成~
VuePress 从零搭建到部署

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

ok,那我们继续

开启评论功能

很舒服 vuepress-theme-reco帮我们内置了评论功能,使用valine:一款快速、简洁且高效的无后端评论系统。

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

获取appId和appKey:登录valine
登录成功创建应用
VuePress 从零搭建到部署
创建完成点击设置获取应用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
        }
      }
    ]

这里我配置的是小黑猫,当然还要很多主题初音,萝莉任你探索~
VuePress 从零搭建到部署

还有更多插件在等你~~

<h3 style=”color: inherit;line-height: inherit;padding: 0px; margin: 1.6em 0px;font-weight: bold;border-bottom: 2px solid rgb(128, 128, 128);”>

<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新建一个仓库,如图所示
VuePress 从零搭建到部署

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

VuePress 从零搭建到部署
创建好仓库以后,本地拉去代码git clone <你复制的地址>

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

然后npm install 或者 yarn

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

第二步

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

#!/usr/bin/env sh

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

# 生成静态文件
npm run build

# 进入生成的文件夹
cd public

# 如果是发布到自定义域名
# 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

# 把上面的 <USERNAME> 换成你自己的 Github 用户名,<REPO> 换成仓库名,比如我这里就是:
# git push -f git@github.com:wangxifa/qinFeng.git master:gh-pages
git push -f https://github.com/wangxifa/qinFeng.git master:gh-pages

cd -

这里推荐使用http,避免了ssh设置的问题
我们在package.json设置快捷方式

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

运行代码

yarn gh

第三步

此时github上你应该可以看到你的分支
VuePress 从零搭建到部署

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

VuePress 从零搭建到部署

在Source的下拉选中你的分支

出现 Your site is published at 网址

就说明发布成功了,访问这个网址就可以看到你的博客啦

示例:我的博客

<h3 style=”color: inherit;line-height: inherit;padding: 0px; margin: 1.6em 0px;font-weight: bold;border-bottom: 2px solid rgb(128, 128, 128);”>

<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 (超详细)


喜欢 (0)