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的目录下,执行
vuepress dev docs
启动服务后,访问公网ip:8080即可。至此,vuepress基本配置就完成了。
结语
通过这次课程,我们学会了如何搭建个人静态网站与云笔记,在接下来的课程里,我们还会学习ESC的更多用法。最后希望你喜欢这篇BLOG!!