基于ECS搭建VuePress个人博客

本教程是基于ECS搭建VuePress个人博客网站

首先创建ECS实例,选用系统centos(此处省略创建步骤)

1.创建安全组——开放22端口和8080端口

注:22端口用于ssh远程连接服务器,8080端口是用于访问博客的端口

基于ECS搭建VuePress个人博客_第1张图片

授权对象0.0.0.0/0 表示所有人都可以访问

2.通过ssh远程连接服务器,我这里使用的软件是xshell

ssh root@你的ecs的公网IP地址

3.安装node.js

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
sudo tar -xJvf node-v13.9.0-linux-x64.tar.xz -C /usr/local/lib/nodejs

5.验证是否解压成功,进入以下目录,执行 ./node -v

cd /usr/local/lib/nodejs/node-v13.9.0-linux-x64/bin
./node -v

基于ECS搭建VuePress个人博客_第2张图片

可以看到显示了版本号v13.9.0表示解压成功

6.添加环境变量

vim ~/.bash_profile

找到 PATH= P A T H : PATH: PATH:HOME/bin

按下 i 键,转化为插入模式

在PATH= P A T H : PATH: PATH:HOME/bin 后⾯添加路 径:/usr/local/lib/nodejs/node-v13.9.0-linux-x64/bin

基于ECS搭建VuePress个人博客_第3张图片

然后退出保存,先按esc 从插入模式转换成只读模式

然后执行

:wq

保存退出,然后输入以下命令进行

source ~/.bash_profile

切换到其他目录,执行node -v,我这里演示后退1个目录

cd ../
node -v

如果返回版本号,则表示环境变量添加成功。

执行

npm version
npx -v

基于ECS搭建VuePress个人博客_第4张图片

显示出这些内容,node.js就算安装完毕了。

7.安装VuePress

全局安装,执行以下命令

npm config set registry https://registry.npm.taobao.org
npm install -g vuepress

基于ECS搭建VuePress个人博客_第5张图片

创建一个文件夹作为目录,进入文件夹进行项目初始化

mkdir try_blogs
cd try_blogs
npm init -y

初始化之后会生成一个package.json文件

基于ECS搭建VuePress个人博客_第6张图片

8.配置VuePress

配置 package.json 脚本

vim package.json

修改改scripts中的内容

“docs:dev”: “vuepress dev docs”,

“docs:build”: “vuepress build docs”
基于ECS搭建VuePress个人博客_第7张图片

保存退出

在当前目录新建docs文件夹,进入docs文件夹,创建.vuepress目录

mkdir docs
cd docs
mkdir .vuepress

新建一个md文件

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

进入.vuepress目录,创建config.js配置文件,和public目录

cd .vuepress
echo >config.js
mkdir public

完成以后的工作目录结构图

基于ECS搭建VuePress个人博客_第8张图片

docs文件夹:以后要在这里写文章,直接在这个文件夹下新建文件夹,在新建md文档就行

README.md:这是我们的首页

.vuepress:存放一些配置和组件

public:静态文件存放地

config.js :配置文件

然后—回到try_blogs目录

cd ..
cd ..

执行

vuepress dev docs

基于ECS搭建VuePress个人博客_第9张图片

成功以后,打开浏览器输入

http://你的ecs公网ip:8080 访问博客网站

基于ECS搭建VuePress个人博客_第10张图片

显示这个页面,证明你的博客搭建成功啦!

下一步,简单的配置首页,更改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
---

再开一个终端,连接到ecs实例,连接成功以后

cd /usr/local/lib/nodejs/try_blogs/docs
vim README.md

拷贝 ,保存

基于ECS搭建VuePress个人博客_第11张图片

拷贝以后注意缩进是否正确

然后刷新页面,如出现如下页面,说明你成功啦!

基于ECS搭建VuePress个人博客_第12张图片

教程到这里就结束啦,感谢大家的观看,有疑问请留言!

你可能感兴趣的:(Ecs,vue,ecs,云服务器,vue,npm,centos)