阿里云大学 玩转云计算 搭建基于VuePress的静态网站

阿里云大学 玩转云计算 搭建基于VuePress的静态网站

本系列分为两期,第一期为《搭建基于VuePress的静态网站》。第二期为《云端打造家庭文件备份中心》,因为是面对新手的教程,所以说会尽量详细,希望大家多多反馈自己在搭建中的问题,我也会及时在文章内修改

·搭建基于VuePress的静态网站
·云端打造家庭文件备份中心

本文较长,有些步骤讲解较细,请耐心查看,

主要内容

1.服务器更换系统
2.安装配置VuePress
3.配置Nginx实现静态网页访问

云服务器的开通(系统更换)与配置

相信看到这篇文章的小伙伴已经通过阿里云高校计划免费领取(还没有领取的小伙伴可以点击这里领取),有了一台属于自己的服务器,那么我们就直接从更换服务器系统以及安全组的配置开始。

服务器停机 更换系统镜像

这次搭建VuePress,我们将使用Ubuntu 18.04系统
第一步打开实例列表,将服务器停机
停机
然后在右侧 “更多”——>“磁盘和镜像”——>“更换操作系统”
更换系统
更换操作系统,选择Ubuntu 18.04 ,然后配置密码
Ubuntu 18.04

配置安全组

这里为了方便,我们直接开放所有端口
在这里插入图片描述

首次连接服务器

连接服务器,我们选择对学生/家庭用户免费的xshell和xftp下载地址https://www.netsarang.com/zh/free-for-home-school/
xshell
我们打开xshell,新建一个服务器连接,配置服务器地址与用户密码
在这里插入图片描述
用户名为 root 密码为刚刚设置的ssh密码
在这里插入图片描述

安装VuePress程序

安装Node.Js

nodejs是VuePress的必备环境,所以我们首先来安装Node.Js

  1. 因为使用了Ubuntu,所以我们可以直接使用包管理器来安装Node.Js

  2. 我们安装最新版的Node.Js 14.x,首先配置源地址

    curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -

    如果需要也可以通过更改上方数字,改变Node.Js版本,比如稳定版12.x

  3. 然后直接进行安装

    sudo apt-get install -y nodejs

安装VuePress主程序

  1. 为了加快安装速度,我们更换为国内的淘宝源

    npm config set registry https://registry.npm.taobao.org
  2. 运行安装命令

    npm install -g vuepress

    当出现Thank you for using vuepress!即认为安装成功

  3. 创建一个项目目录

    mkdir vuepress && cd vuepress
  4. 初始化VuePress

    npm init -y

    这样我们就完成了VuePress的安装,现在就可以进行配置了

配置VuePress

目录构建

我们使用远程文件工具xftp来进行目录和文件的修改

  1. 进入目录 /root/vuepress 可以看到刚刚初始化后生成的文件“package.json‘
    在这里插入图片描述

    1. 双击打开,编辑内容,修改"scripts"的内容为
      "scripts": {
      "docs:dev": "vuepress dev docs",
      "docs:build": "vuepress build docs"
      },

      修改完后应如图所示
      在这里插入图片描述

  2. 在目录docs中新建文件夹.vuepress,因为这是个隐藏文件夹,我们必须修改xftp的设置才能看到
    在 工具——>选项——>常规 显示隐藏的文件
    在这里插入图片描述

  3. 新建一个文件README.md,打开填写Hello VuePress - first blog!,保存后退出

  4. 进入.vuepress新建文件夹public和文件config.js,并修改config.js内容如下

    module.exports = {
    title: 'VuePress入门介绍', 
    description: 'VuePress入门介绍',
    dest:'/home/vuepress'
    }

    这里的dest是构建后静态网站页面的输出路径,后面配置Nginx时会用到
    现在我们来看一下VuePress的目录结构

    vuepress
    ├── docs //以后要在这⾥⾯写⽂章,直接在此⽂件夹下新建⽂件夹,然后再建md⽂档就⾏,链接会⾃动⽣成
    │   ├── README.md // 这个将会是我们以后的⾸页
    │   └── .vuepress // 这个⾥⾯会存放⼀些配置和组件
    │       ├── public // 静态⽂件存放地
    │       └── config.js //配置⽂件,以后的所有配置基本都在这⾥写
    └── package.json //

    网站内容填写与杂项配置

    在这里我们就使用一个比较简单的文档来讲解如何添加博客内容

  5. 返回vuepress目录,运行指令

    vuepress dev docs
  6. 这时候就可以访问http://ecsip:8080查看刚刚搭建的博客了
    但是此时网站上只有我们刚刚写的"Hello VuePress - first blog!"。我们来给他加一点东西

  7. 打开主目录下的"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
    ---
  8. 还有其他很多选项,大家可以对照官方文档进行尝试,这里不再赘述。

    安装配置Nginx,实现静态网页访问

  9. 在上一步测试完成后如果对网页效果比较满意,就可以通过运行下面的命令完成网页的构建
    进入vuepress目录,执行下面命令构建静态网页

    vuepress build docs

    构建完成的文件会存放在 /home/vuepress目录中
    这也是一会我们配置Nginx时的网站目录

  10. 安装、启动Nginx

    apt-get install nginx
    service nginx start
  11. 启动完成后,我们就可以修改Nginx的配置文件了
    在xftp中打开Nginx的配置文件目录/etc/nginx/conf.d
    新建文件vuepress.conf,并打开填写配置,端口号为80,server_name后填写自己ecs的ip,root后为刚刚文件生成的路径

    server {
        listen 80;
        root /home/vuepress;
        index index.html index.htm index.nginx-debian.html;
        server_name 自己ecs的ip;
        location / {
        try_files $uri $uri/ =404;
        }
    }

    然后输入指令重载Nginx配置

    nginx -s reload

    现在就可以直接使用http://ecsip访问博客了,而且每次构建后,都会更新

友情链接

阿里云高校计划:https://developer.aliyun.com/adc/college/
本人的博客:https://www.imut.xyz,欢迎交换友链

点赞

发表评论

电子邮件地址不会被公开。必填项已用 * 标注