搭建博客
几年前使用过 WordPress + 阿里云服务器 搭建了博客,
抹坑后,也顺便使用了阿里云的一些服务。
但当时没有记录笔记的习惯,过了好久很多操作也遗忘了。
加上服务器过期了好多数据也没有备份,那就重新搭一个快速上手的博客,
想着怎么也应该尝试一些新的方法,刚好也了解到了尤大神的 Vuepress。因为也更好的支持 Vue
此文章内容将会抽时间持续更新ing,请尝试不同时间段来参考。
准备工作
1、准备服务器环境,或者最后部署到GitHub或码云托管
因本人常用阿里云服务器操作,有以下简述步骤:
1.1、阿里云官网购买服务器,顺便再阿里云上买个域名
1.2、域名实名认证 + 服务器绑定域名 + 备案网站(这些操作需要审核时间,可以先跳过这步)
1.3、在自己的服务器选择 Linux centos版本 系统 (初始化)
1.4、需要node环境
1.4.1:可以在创建服务器实例时初始化之前候选择上(但提供的版本太低,最后也可以先升级下,升级node操作自行百度)
1.4.2:也可以在创建服务器实例时候不安装node环境(若选择这步骤可以进行如下操作)
(1)打开node中文官网(http://nodejs.cn/download/)
(2)右键复制 Linux二进制(x64)链接。.tar.xz格式的
(3)打开自己的服务器,使用命令: ‘weget xxxxx(网址链接)’
(4)在该目录下解压,有两层压缩,下面解压命令:
xz -d node-v8.11.3-linux-x64.tar.xz
tar -xvf node-v8.11.3-linux-x64.tar
(5)配置环境变量(nano 是一个命令行编辑器,你也可以使用vim、vi等命令)
sudo vim /etc/profile
复制下面两行到刚打开的profile文件最底部(注意node的安装地址 /root/node-v14.15.0-linux-x64/ 换成自己的):
#node 8.11.3
export NODE_HOME=/root/node-v14.15.0-linux-x64
export PATH=$PATH:$NODE_HOME/bin
保存后退出,再执行下面命令将环境变量生效:
source /etc/profile
(6)、将目录软链接到全局环境下(命令后面的/usr/local/bin/node
是固定的)
ln -s /root/node-v14.15.0-linux-x64/bin/node /usr/local/bin/node
ln -s /root/node-v14.15.0-linux-x64/bin/npm /usr/local/bin/npm
(7)、这样安装好了以后使用npm安装的包(比如:ionic serve),使用包的命令时可能会提示找不到命令,没关系,在用户目录
下终端执行下面命令(固定写法):
echo -e "export PATH=$(npm prefix -g)/bin:$PATH" >> ~/.bashrc && source ~/.bashrc
(8)、 这样我们在所有用户下,都可以使用npm,也可以使用npm安装的包的命令。大功告成,成功的将nodejs安装并配置到全局环境下。
2、安装宝塔
2.0、为什么要安装宝塔?
宝塔只是个辅助工具,日后运维操作可以很方便,对于不懂Linux指令的道友还是很友好的帮助。这里只是对新手的建议,对于老手可以自己进行部署
2.1 、宝塔官网(https://www.bt.cn/download/linux.html)
若是阿里云服务器,建议先参考文章配置好开放的端口号:https://www.bt.cn/bbs/thread-2897-1-1.html
2.2、在服务器中安装宝塔
Centos版本输入以下命令:
yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh
安装过程遇见 y 或 n 选项,直接选y
2.3、安装成功后,你的服务器上会出现外网地址和用户名+密码,打开这个地址,然后输入用户和密码
3、安装 yarn
3.1、为什么要安装yarn,而不使用npm呢?
yarn和npm都是包管理工具,但是yarn是崭新的,经过重新设计的npm客户端,于2016年10月发布,相比于npm,yarn在运行速度上有显著的提升,安装时间变少,功能上也有很多改进。
yarn虽然和nom一样是本地缓存,但是yarn无需互联网链接就能安装本地缓存的依赖项,提供了离线模式,而这个是npm实现不了的。
yarn解决了由于语义版本控制而导致的npm的不确定性问题,通过安装时创建的默认文件,确保使用的库的版本相同。
yarn增加了一些能让开发人员并行化处理所有必需的操作,且通过添加了一些改进,使得运行速度有了显著的提升,整个安装时间也变得更少。
npm的输出信息比较冗长,相比之下,yarn简洁很多。默认情况下,直观且直接地打印出必要的信息。
yarn的语义相对于npm更加清晰,主要是因为yarn改变了一些npm的命令名称,看上去就更清晰了。
上面简介了yarn作用和与npm的对比,但是这里强制采用yarn工具
以下是Vuepress官网给的建议:
如果你的现有项目依赖了 webpack 3.x,我们推荐使用 Yarn 而不是 npm 来安装 VuePress。因为在这种情形下,npm 会生成错误的依赖树。
3.2、安装yarn
这里使用了npm进行安装(也可以采用yum,wget等)
在安装之前,先设置下npm的国内淘宝镜像吧~
npm config set registry https://registry.npm.taobao.org
设置好,那么开始安装,如下:
npm i yarn -g
安装完成后,可以查看下版本,检验是否安装成功
yarn -v
设置yarn国内镜像
yarn config set registry https://registry.npm.taobao.org/
Vuepress 简单使用
以下内容来有一部分自官网文档,我的这些内容是助你快速上手,而不是去copy官网文档
一些官方给的知识点和配置介绍咱先不看,先搭建好,看效果,有别的需求之后再去改动
当然你可以继续参考我的文章,也可直接查看官网的文档
Vuepress官网(https://www.vuepress.cn/)
初始化
1.0、先在本地主机上初始化(最后在部署到服务器上),创建vuepress目录,并进入
mkdir vuepress
cd vuepress
1.1、使用yarn工具,初始化
yarn init -y
1.2、将 VuePress 安装为本地依赖
yarn add -D vuepress # npm install -D vuepress
1.3、创建你的第一篇文档
mkdir docs && echo '# Hello VuePress' > docs/README.md
1.4、在 package.json
中添加一些 scripts
此处我们把 docs
目录作为 targetDir
下面所有的“文件的相对路径”都是相对于 docs
目录的。
{
"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs"
}
}
默认页面路由地址如下:
文件的相对路径 | 页面路由地址 |
---|---|
/README.md | / |
/guide/README.md | /guide/ |
/config.md | /config.html |
1.5、在本地启动服务器
yarn docs:dev
# npm run docs:dev
1.6、访问内网(http://localhost:8080)
若出现如下图,便是基本的搭建成功
目录结构
VuePress 遵循 “约定优于配置” 的原则,推荐的目录结构如下:
.
├── docs
│ ├── .vuepress (可选的) '用于存放全局的配置、组件、静态资源等。'
│ │ ├── components (可选的) '该目录中的 Vue 组件将会被自动注册为全局组件'
│ │ ├── theme (可选的) '用于存放本地主题'
│ │ │ └── Layout.vue
│ │ ├── public (可选的) '静态资源目录'
│ │ ├── styles (可选的) '用于存放样式相关的文件'
│ │ │ ├── index.styl '将会被自动应用的全局样式文件,会生成在最终的 CSS 文件结尾,具有比默认样式更高的优先级'
│ │ │ └── palette.styl '用于重写默认颜色常量,或者设置新的 stylus 颜色常量'
│ │ ├── templates (可选的, 谨慎配置) '存储 HTML 模板文件。'
│ │ │ ├── dev.html '用于开发环境的 HTML 模板文件'
│ │ │ └── ssr.html '构建时基于 Vue SSR 的 HTML 模板文件。'
│ │ ├── config.js (可选的) '配置文件的入口文件,也可以是 YML 或 toml。'
│ │ └── enhanceApp.js (可选的) '客户端应用的增强'
│ │
│ ├── README.md
│ ├── guide
│ │ └── README.md
│ └── config.md
│
└── package.json
官网也给了以下提示:
当你想要去自定义 templates/ssr.html
或 templates/dev.html
时,最好基于 默认的模板文件 (opens new window)来修改,否则可能会导致构建出错
基本配置
首先在你的文档目录下(也就是docs目录)创建一个 .vuepress
目录,所有 VuePress 相关的文件都将会被放在这里。你的项目结构可能是这样:
.
├─ docs
│ ├─ README.md
│ └─ .vuepress
│ └─ public
│ └─ config.js
└─ package.json
README.md文件中添加的内容如下:
---
home: true
heroImage: https://jine.oss-cn-beijing.aliyuncs.com/image/weimei.jpg
actionText: ↓
actionLink: /zh/guide/
heroText: Write the Code,Change the World~
tagline: 喜欢篮球,脾气贼棒√
features:
- title: 赞赏
- details: 点点手指哟~
footer: MIT Licensed | Copyright © 2020-present Evan You
---
Front-matter 是文件最上方以 ---
分隔的区域,用于指定个别文件的变量
VuePress 提供了对 YAML front matter (opens new window)开箱即用的支持,这些数据可以在当前 markdown 的正文,或者是任意的自定义或主题组件中使用。
注意:copy时候,不要把 — 给丢掉 ,这就类似于写法格式,可不能丢掉
一个 VuePress 网站必要的配置文件是 .vuepress/config.js
,它应该导出一个 JavaScript 对象:
你可以先把我大概配置页面基本的内容copy,先把页面跑起来
module.exports = {
title: 'Jine', //标题
keywords: '前端开发',
description: '前端开发 Jine 的个人博客',
repo: 'https://github.com/', //仓库地址
base: '/docs/', // 配合部署项目
head: [
['link', { rel: 'png', href: '/img/熊猫.png' }]
],
lastUpdated: 'Last Updated',
themeConfig: { //主题配置
// 博客配置
blogConfig: {
category: {
location: 2, // 在导航栏菜单中所占的位置,默认2
text: 'Category' // 默认文案 “分类”
},
tag: {
location: 3, // 在导航栏菜单中所占的位置,默认3
text: 'Tag' // 默认文案 “标签”
}
},
logo: '/img/博客专家.png',
nav: [ //导航栏
{ text: '首页', link: '/' },
{ text: '码趣', link: '/code/' },
{ text: '赞赏', link: '/money/' },
{ text: 'About me', link: '/me/' },
{ text: 'CSDN', link: 'https://blog.csdn.net/weixin_42760849' }
],
sidebar: 'auto',
displayAllHeaders: true, // 默认值:false
}
}
/*
以下例举俩个参数的描述如下:
title
类型: string
默认值: undefined
网站的标题,它将会被用作所有页面标题的前缀,同时,默认主题下,它将显示在导航栏(navbar)上。
#description
类型: string
默认值: undefined
网站的描述,它将会以 <meta> 标签渲染到当前页面的 HTML 中。
注意:我的图片路径是在本地的doc/.vuepress/public/img
你在引入图片直接 /img/xxxx.png ,因为它会默认把public目录当做图片资源的根路径
*/
上述的配置好后,运行起 dev server
如下图:
更多配置和参数描述参见官网的 => 配置 来查看所有可配置的选项。
主题配置
在 VuePress 中,目前自带了一个默认的主题(正是你现在所看到的),它是为技术文档而设计的。同时,默认主题提供了一些选项,让你可以去自定义导航栏(navbar)、 侧边栏(sidebar)和 首页(homepage) 等,详情请参见 默认主题 。
如果你想开发一个自定义主题,可以参考 自定义主题。
主题配置我日后的文章单独去更新
我先建议想要快速搭建个好看的博客,可以先用别人写好的博客主题
以下内容参考这个博客主题去搭建,我想说的是先做到用会别人的,再去设计自己的主题让别人用
vuepress-theme-reco 主题使用
最近事情比较多,大概先说下我文章的出发点:
首先你先需要去大概把这个主题的官方文档大概瞟一眼,或者继续参考我的文章。先说明,我的文章不是把官网的文档copy下来或者是说讲一下知识点,这样反而没什么意义。我文章的内容应该是让你快速实现效果,少走许多坑和弯路。
为了使你更加有信心继续跟上我的文章步骤走,我推荐你先看下,下面这几位博主博客的效果(我也是参考这样的样式来改的,后面文章内容会教你加一些自己的Vue组件,和怎么去改原主题的源码)
参考博客地址:
https://reinness.com/
https://www.zealsay.com/