搭建自己专属的静态网站与云笔记

打造专属云笔记

VuePress

VuePress是以Vue驱动的静态⽹站⽣成器，它由两部分组成：第一部分是一个极简静态网站生成器，它包含由 Vue 驱动的主题系统和插件 API，另一个部分是为书写技术文档而优化的默认主题，它的诞生初衷是为了支持 Vue 及其子项目的文档需求。

前期准备

配置端口

首先，查看自己的服务器安全组的配置，22端口（为了使用ssh，远程控制自己的服务器）与8080端口（让他人访问自己的笔记）是否开放，配置如下图：

安装node.js

1. 个人推荐Xshell远程连接
2. 登入终端
3. 下载Node.js 13.9.0 64位安装包
   wget https://npm.taobao.org/mirrors/node/v13.9.0/node-v13.9.0-linux-x64.tar.xz
4. 创建Node.js安装⽬录
   sudo mkdir -p /usr/local/lib/nodejs
5. 将⼆进制⽂件解压到要安装⽬录
   sudo tar -xJvf node-v13.9.0-linux-x64.tar.xz -C /usr/local/lib/nodejs
6. 使⽤查看node.js版本号命令验证是否解压成功
   cd /usr/local/lib/nodejs/node-v13.9.0-linux-x64/bin
./node -v
7. 修改环境变量，使得能在任意⽬目录下执⾏行行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
8. 到其他⽬录下验证

cd
node -v
npm version
npx -v

命令输出后显示版本号

安装 VuePress

1. 为加快下载安装速度，采⽤淘宝镜像。
   npm config set registry https://registry.npm.taobao.org先设置淘宝源
   npm install -g vuepress然后安装vuepress
2. 创建⼀个⽂件夹作为⽬录
   mkdir try_blogs
d try_blogs
3. 项⽬初始化
   npm init -y
   初始化后会⽣成⼀个package.json⽂件
   之后进⼊配置步骤

配置 VuePress

基本配置步骤

设置package.json的脚本配置

vim package.json
# 修改scripts中的内容如下：
"scripts": {
 "docs:dev": "vuepress dev docs",
 "docs:build": "vuepress build docs"
},

配置后如下图：

在当前目录中创建⼀个文档目录

1. 创建docs

   mkdir docs

2. 创建.vuepress⽬录
   cd docs
mkdir .vuepress

3. 新建⼀个md⽂件
   echo '# Hello VuePress - first blog!' >README.md

4. 创建config.js配置⽂件
   cd .vuepress
echo >config.js

5. 创建public⽬录
   mkdir public

6. 完成后的⼯作⽬录如下：

docs                  //以后要在这里面写文章，直接在此文件夹下新建文件夹，然后再建md文档就行，链接会自动生成
README.md             //这个将会是我们以后的首页
.vuepress             //这个里面会存放⼀些配置和组件
public                //静态文件存放地
config.js             //配置文件，以后的所有配置基本都在这里写

启动服务

1. 回到try_blogs⽬录，执⾏命令
   vuepress dev docs
   注：VuePress中有两个命令:

vuepress dev docs 命令运⾏本地服务，通过访问(http://localhost:8080)即可预览⽹
 站
vuepress build docs 命 令 ⽤ 来 ⽣ 成 静 态 ⽂ 件 ， 默 认 情 况 下 ， 放 置 在
docs/.vuepress/dist⽬录中，当然你也可以在docs/.vuepress/config.js中的dest字段
 来修改默认存放⽬录。在这⾥将两个命令封装成脚本的⽅式，直接使⽤npm run
docs:dev和npm run docs:build即可。

2. 修改README.md⽂件，将原来的内容删除后，将以下内容拷贝进去

---
home: true
heroText: Vue技术博客初试
tagline: 项目结构，关注讨论，每⽇日分享
actionText: 每日更新 →
actionLink: /testlink/
features:
- title: 项目结构
  details: 以Markdown 为中心的项目结构，以最少的配置帮助你专注于写作。
- title: 关注讨论
  details: 享受Vue + webpack的开发体验，在 Markdown中使用Vue组件，同时可以使用Vue来开发自定义主题。
- title: 每日分享
  details: VuePress 为每个页⾯面预渲染生成静态的HTML，同时在页面被加载的时候，将作为SPA运行。
footer: LearnVueonECS Licensed | Copyright © 2020-present
---

3. 在浏览器中运⾏： http://ECS公⽹IP:8080
   运行效果如下：