为什么要搭建博客呢?
其实一直有搭建博客的打算，平时记笔记都是零零散散的，每到要用的时候这里一块那里一块；一直就这么过来，于是痛定思痛下定决心搭建一个属于自己的博客。
但是又想有一个属于自己的博客又不想花费太多时间咋办：用现有框架快速搭建！
于是找到了这些快速搭建的方式：
- 博客平台 (掘金、CSDN、博客园、Farbox之类的一站式平台，写好文章网上丢就可以了)
- 纯自己码 (需要超强的技术壁垒)
搭建博客的工具 (目前也是最主流的方式)
- Hexo
- Vuepress (本文主要说的)
为什么用VuePress搭建博客?
VuePress 由两部分组成：第一部分是一个极简静态网站生成器， 它包含由 Vue 驱动的主题系统和插件 API，另一个部分是为书写技术文档而优化的默认主题，它的诞生初衷是为了支持 Vue 及其子项目的文档需求。
每一个由 VuePress 生成的页面都带有预渲染好的 HTML，也因此具有非常好的加载性能和搜索引擎优化（SEO）。同时，一旦页面被加载，Vue将接管这些静态内容，并将其转换成一个完整的单页应用（SPA），其他的页面则会只在用户浏览到的时候才按需加载。
事实上，一个 VuePress 网站是一个由Vue、VueRouter 和webpack 驱动的单页应用。如果你以前使用过 Vue的话，当你在开发一个自定义主题的时候，你会感受到非常熟悉的开发体验，你甚至可以使用 Vue DevTools 去调试你的自定义主题。
那我们开始吧！
前提条件
VuePress 需要 Node.js >= 8.6
初始化搭建VuePress
创建并进入一个新目录
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)更好呢?找个花里胡哨的主题~
vuepress-theme-reco主题搭建
个人认为这个主题应该是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
}
}
]
这里我配置的是小黑猫,当然还要很多主题初音,萝莉任你探索~
还有更多插件在等你~~
blog部署
既然是搭建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 网址
就说明发布成功了，访问这个网址就可以看到你的博客啦
示例：我的博客
最后
至此,从零开始搭建部署博客就完成了~
当然这只是开始,更加重要的是去坚持去利用博客记录自己的所思所想~
成为一个优秀的打工人!
