Day1--基于Vuepress搭建自己专属的静态网站与云笔记

本文链接：https://blog.csdn.net/qq_34001250/article/details/107849264

Day1–基于Vuepress搭建自己专属的静态网站与云笔记

在今天的课程中，我们学习到了ESC最经典的用法，搭建个人静态网站与云笔记，下面我们就来看看如何一步一步进行搭建吧！

配置安全策略

在安装之前，我们先进行一些前期的安全策略配置准备。首先我们通过快速创建规则开放SSH(22)端口，并授权给0.0.0.0/0，即所有人来开放端口权限。同样我们还需要通过添加安全组规则来添加8080端口给所有人，这样我们后续的Vuepress能够正常运行。

安装Node.js

首先有一点需要率先说明，安装Vuepress前确保Node.js的版本大于等于8。首先我们先通过下列指令下载Node.js 13.9.0 64位安装包：

wget https://npm.taobao.org/mirrors/node/v13.9.0/node-v13.9.0-linux-x64.tar.xz

然后使用下列指令为Node.js创建安装目录：

sudo mkdir -p /usr/local/lib/nodejs

接着解压刚才下载的安装包：

sudo tar -xJvf node-v13.9.0-linux-x64.tar.xz -C /usr/local/lib/nodejs

紧接着修改下环境变量，使得我们在任意位置都能用命令行运行关于Node的命令

vim ~/.bash_profile

过后我们找到 PATH=$PATH:$HOME/bin，在PATH=$PATH:$HOME/bin 后⾯添加路径

:/usr/local/lib/nodejs/node-v13.9.0-linux-x64/bin，

然后重载一下：

source ~/.bash_profile

这样，Node.js就安装好了。

安装Vuepress

通过学习大佬Lanly的博客我了解到，npm是随同Node.js一起安装的一个包管理工具，通过它我们可以很方便地下载别人的程序，包括Vuepress.

我们先切换npm的下载源为淘宝镜像，这样可以加速我们的下载速度：

npm config set registry https://registry.npm.taobao.org

然后通过下列指令来安装Vuepress：

npm install -g vuepress

安装完后，我们创建一个文件夹作为目录：

mkdir Jvruo_blogs
cd Jvruo_blogs

接着进行初始化：

npm init -y

初始化完毕后会有一个package.json，我们对它进行配置：

vim package.json

修改scripts里面的内容为：

"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs"
},

这样我们在终端就能运行 vuepress dev docs 和 vuepress build docs命令:

vuepress dev docs 本地运行服务可通过http://localhost:8080访问页面
vuepress build docs 可生成静态文件

然后再创建目录

在当前⽬录中创建⼀个⽂档⽬录

mkdir docs

创建.vuepress⽬录

cd docs
mkdir .vuepress

新建⼀个md⽂件

echo '# Hello VuePress - first blog!' >README.md

创建config.js配置⽂件

cd .vuepress
echo >config.js

创建public⽬录

mkdir public

接着在README.md中添加以下内容

---
home: true
heroText: 蒟蒻のBLOG
tagline: Welcome to your VuePress site
actionText: 快速上手 →
actionLink: /testlink/
features:
- title: 简洁至上
	- details: 以 Markdown 为中心的项目结构，以最少的配置帮助你专注于写作。
- title: Vue驱动
	- details: 享受 Vue + webpack 的开发体验，在 Markdown 中使用 Vue 组件，同时可以使用Vue 来开发自定义主题。
- title: 高性能
	- details: VuePress 为每个页面预渲染生成静态的 HTML，同时在页面被加载的时候，将作为 SPA 运行。
footer: MIT Licensed | Copyright © 2018-present Evan You
---

这个README.md就是我们网站的首页。

这是我们目前的目录结构

| - docs                    # 以后要在里写⽂章，直接在此文件夹下新建⽂件夹，然后再建md文档就行，链接会自动生成
|    | - README.md          # 网站首页
|    | - .vuepress          # 存放配置及组件
|           | - public      # 静态文件存放地
|           | - config.js   # 配置文件
| - package.json

然后退到Jvruo_blogs的目录下，执行