VuePress 从零搭建到部署

头像
你也很棒哦
    阅读 7 分钟

    <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

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

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

    ├─ 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

    页面出来,大功告成~

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

    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
        }
      }
    ]

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

    还有更多插件在等你~~

    <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新建一个仓库，如图所示

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


    创建好仓库以后，本地拉去代码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上你应该可以看到你的分支

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

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

    前端vue.jsjavascript
    你也很棒哦
    199 声望12 粉丝

    bug

    « 上一篇
    前端规范

    引用和评论

    推荐阅读
    头像
    如何实现一个楼中楼的评论系统

    小蚊酱赞 24阅读 10.3k

    头像
    腾讯新闻中心首页改版啦

    小蚊酱赞 11阅读 9.3k评论 7

    头像
    网页设计的垂直居中

    寒青赞 39阅读 4.6k评论 3

    头像
    CSS团队协作规范

    寒青赞 36阅读 3.9k

    头像
    前端如何入门 Go 语言

    robin赞 26阅读 7.7k评论 8

    头像
    100个React最佳实践小技巧

    夕水赞 17阅读 2.6k评论 4

    头像
    不使用 JS 纯 CSS 获取屏幕宽高

    南城FE赞 15阅读 2.1k评论 3

    0 条评论
    得票最新