ECS实践训练营Day1--搭建自己专属的静态网站与云笔记
ECS实践训练营Day1--搭建自己专属的静态网站与云笔记
实验环境：CentOS 7.7 64位
安装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
npm是随同Node.js一起安装的一个包管理工具，通过它我们可以很方便地下载别人的程序，包括Vuepress.
我们先切换npm的下载源为淘宝镜像
npm config set registry https://registry.npm.taobao.org
然后再安装Vuepress
npm install -g vuepress
安装完后，创建一个文件夹作为目录
mkdir Lanly_blogs
cd Lanly_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
cd docs
mkdir .vuepress
cd .vuepress
mkdir public
touch config.js
cd ..
touch README.md
vim README.md
在README.md中添加以下内容
---
home: true
heroText: Lanlyの博客
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
然后退到Lanly_blogs的目录下，执行
vuepress dev docs
启动服务后，访问公网ip:8080即可。
目标被拒绝的话先去查看是否开放了8080端口。
至此，vuepress基本配置就完成了。
更多的配置可参见VuePress的使用文档，像导航栏什么的在config.js文件中配置。
由于服务要保持开始，网站才能访问，我们可以用终端复用器screen来开启服务，来避免链接的终端被占用的尴尬。
yum -y install screen # 安装screen
screen -S vuepress # 创建一个名为vuepress的session
进入 Lanly_blogs 目录
vuepress dev docs
然后按ctrl A 再按 D，将该终端挂起即可。
Vuepress和github
Vuepress生成的是静态网站，这恰好可以放在github page上。这样我们就不用担心服务器到期了
先在github上创建一个仓库，名字必须是自己的GitHub名且以.github.io结尾。
然后回到Lanly_blogs中的package.json中的script中添加
"docs:build": "vuepress build docs", #这个之前添加了就不用添加
"deploy": "bash deploy.sh"
然后在与package.json同级目录下创建deploy.sh文件，内容是
#!/usr/bin/env sh
# 确保脚本抛出遇到的错误
set -e
# 生成静态文件
npm run docs:build
# 进入生成的文件夹
cd docs/.vuepress/dist
git init
git add -A
git commit -m 'deploy'
# 如果发布到 https://<USERNAME>.github.io 填写你刚刚创建的仓库地址
git push -f https://github.com/NicCraver/niccraver.github.io.git master
cd -
然后执行
npm deploy
项目就能部署到Github了。
