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了。