搭建博客

几年前在小白阶段使用过 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.xztar -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/nodeln -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 vuepresscd 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,     // 在导航栏菜单中所占的位置，默认2text: 'Category' // 默认文案 “分类”},tag: {location: 3,     // 在导航栏菜单中所占的位置，默认3text: '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

以下内容参考这个博客主题去搭建，我想说的是先做到用会别人的，再去设计自己的主题让别人用

vuepress-theme-reco 主题使用

最近事情比较多，大概先说下我文章的出发点：

首先你先需要去大概把这个主题的官方文档大概瞟一眼，或者继续参考我的文章。先说明，我的文章不是把官网的文档copy下来或者是说讲一下知识点，这样反而没什么意义。我文章的内容应该是让你快速实现效果，少走许多坑和弯路。

为了使你更加有信心继续跟上我的文章步骤走，我推荐你先看下，下面这几位博主博客的效果（我也是参考这样的样式来改的，后面文章内容会教你加一些自己的Vue组件，和怎么去改原主题的源码）

参考博客地址：

https://reinness.com/
https://www.zealsay.com/

基于 Vuepress 搭建个人博客，文章详细，助你快速上手相关推荐

基于Hexo框架快速搭建个人博客--文章一键发布（五）
基于Hexo框架快速搭建个人博客--文章一键发布一.文章对比二.发布到Github 三.一键发布四.总结博客链接: 会思想的苇草i 文章链接: 基于Hexo框架快速搭建个人博客–搭建(一) 基 ...
基于hexo框架快速从0到1搭建个人博客----文章写作（四）
基于hexo框架快速从0到1搭建个人博客----文章写作一.Github图床(图片存储) 二.PicGo(图片上传) 三.jsDelivr(CDN加速) 四.Typora(写文传图) 五.总结一. ...
手把手教你使用 VuePress 搭建个人博客
手把手教你使用 VuePress 搭建个人博客有阅读障碍的同学,可以跳过第一至四节,下载我写好的工具包: git clone https://github.com/zhangyunchencc/vu ...
Github + Hexo 搭建个人博客超详细教程
Github + Hexo 搭建个人博客超详细教程本文目录 generated with DocToc 网站搭建本文目录 1.安装node.js 2.添加国内镜像 3.安装Git 4.注册Gith ...
使用vuepress搭建静态博客
什么是vuePress vuePress是以vue驱动的主题系统的简约静态网站生成工具(拥有自己的默认主题). veuPress由vue,vue-router,webpack驱动的单页面应用,每个ma ...
vue论坛网站的文章自动排版_基于 VuePress 定制个人博客网站
VuePress 简单来说,VuePress 是 Vue 驱动的静态网站生成器.VuePress 简单易上手,同时也有足够强大的定制能力,尤其对熟悉 Vue 的前端开发人员而言.相比于知名的博客生成器 ...
vuepress搭建个人博客并部署
想要快速搭建自己的个人博客,记录自己的工作学习心得,争取当一条有梦想的咸鱼相信大家都了解过vue这个框架.而今天,我们的主角vuepress 就是vue的作者尤大大的一个作品.开源于大概2年前,其本 ...
基于selenium生成Csdn 博客文章简索的excel文件
Csdn 上各大博主的博客文章很有参考价值和独特见解,查看起来总觉得不是特别的方便.于是抽空用selenium 做了个简索生成工具.生成的是excel 2007的文章格式. 截图一截图二截图三截 ...
基于Node.js的博客文章管理系统设计与实现
目录摘要 I Abstract II 引言 1 1.1. 项目背景 1 1.1.1. 什么是博客 1 1.1.2. 博客技术的现状 1 1.1.3. 为什么是NodeJS 1 1.2. 系统开 ...

基于 Vuepress 搭建个人博客，文章详细，助你快速上手