Linux系统之部署Blog-Index导航页

news2025/1/21 18:44:12

Linux系统之部署Blog-Index导航页

  • 一、Blog-Index介绍
    • 1.1 Blog-Index简介
    • 1.2 Blog-Index特点
    • 1.3 Blog-Index使用场景
  • 二、本地环境介绍
    • 2.1 本地环境规划
    • 2.2 本次实践介绍
    • 2.3 Yarn介绍
  • 三、检查本地环境
    • 3.1 检查本地操作系统版本
    • 3.2 检查系统内核版本
    • 3.3 检查系统是否安装yarn
  • 四、部署Node.js 环境
    • 4.1 下载Node.js安装包
    • 4.2 解压Node.js安装包
    • 4.3 创建软链接
    • 4.4 配置环境变量
    • 4.5 查看node版本
  • 五、安装yarn工具
    • 5.1 安装yarn
    • 5.2 检查yarn版本
    • 5.3 设置国内镜像源
  • 六、部署Blog-Index
    • 6.1 下载软件包
    • 6.2 查看源码目录
    • 6.3 安装相关依赖
    • 6.4 启动项目
  • 七、访问Blog-Index首页
  • 八、配置web服务器访问Blog-Index
    • 8.1 修改配置文件
    • 8.2 打包生产版本
    • 8.2 检查apache2 服务
    • 8.3 拷贝网站文件
    • 8.4 访问Blog-Index

一、Blog-Index介绍

1.1 Blog-Index简介

这是一个基于 Vue 的通用网站导航页面，你可以将其放在个人网站的首页作为您博客的引导页面或者是您其他项目的引导页。使用自适应布局兼容多端显示，方便游客浏览您的个人网站，背景图来自于 Bing 每日图片。

1.2 Blog-Index特点

  • 基于 Vue：使用 Vue.js 框架开发，具有良好的组件化和可维护性。

  • 通用导航页面：作为个人网站的首页，可以将博客、项目等导航到一个页面，方便游客浏览和访问。

  • 自适应布局：使用响应式设计，能够适配不同尺寸的设备，包括桌面、平板和手机。

  • 多端兼容：在不同浏览器和操作系统上都能正常显示和使用，例如 Chrome、Firefox等。

  • Bing 每日图片：背景图来自于 Bing 搜索引擎的每日图片，提供美丽且具有多样性的背景。

  • 可配置性：可以自定义导航链接、背景图等内容，根据个人需求进行定制。

  • 简洁美观：界面简洁大方，颜色搭配和排版合理，提供良好的用户体验。

1.3 Blog-Index使用场景

  • 个人网站首页：作为您博客的引导页面，方便游客浏览您的博客分类和最新文章。
  • 个人项目引导页：作为您其他项目的引导页，展示项目的功能和特点，方便用户了解和使用您的项目。
  • 网站导航页面：将您常访问的网站链接整理成一个导航页面，方便自己和其他人快速访问这些网站。
  • 链接集合页面：将您收集的各种链接整理成一个页面，方便自己和其他人浏览和点击这些链接。

二、本地环境介绍

2.1 本地环境规划

本次实践为个人测试环境，操作系统版本为centos7.6。

hostname本地P地址操作系统版本内核版本node版本
jeven192.168.3.246Ubuntu 22.04.1 LTS5.15.0-89-genericv18.0.0

2.2 本次实践介绍

1.本次实践部署环境为个人测试环境，生产环境请谨慎；
2.在centos7.6环境下部署Blog-Index导航页。

2.3 Yarn介绍

  • Yarn是一个JavaScript包管理工具，由Facebook开发，旨在提高包的下载速度和稳定性。它可以替代NPM进行包的安装、更新、卸载等操作。

三、检查本地环境

3.1 检查本地操作系统版本

检查本地操作系统版本，当前版本为Ubuntu 22.04.1 LTS。

root@jeven:~# cat /etc/os-release
PRETTY_NAME="Ubuntu 22.04.1 LTS"
NAME="Ubuntu"
VERSION_ID="22.04"
VERSION="22.04.1 LTS (Jammy Jellyfish)"
VERSION_CODENAME=jammy
ID=ubuntu
ID_LIKE=debian
HOME_URL="https://www.ubuntu.com/"
SUPPORT_URL="https://help.ubuntu.com/"
BUG_REPORT_URL="https://bugs.launchpad.net/ubuntu/"
PRIVACY_POLICY_URL="https://www.ubuntu.com/legal/terms-and-policies/privacy-policy"
UBUNTU_CODENAME=jammy

3.2 检查系统内核版本

检查系统内核版本，当前内核版本为5.15.0-89-generic。

root@jeven:~# uname -r
5.15.0-89-generic

3.3 检查系统是否安装yarn

检查系统是否安装yarn工具

root@jeven:~#  yarn -v
Command 'yarn' not found, but can be installed with:
apt install cmdtest

四、部署Node.js 环境

4.1 下载Node.js安装包

下载Node.js安装包，本次使用的Node.js版本为v20.10.0。

wget https://nodejs.org/dist/v20.10.0/node-v20.10.0-linux-x64.tar.xz

4.2 解压Node.js安装包

执行以下命令，解压Node.js安装包。

tar -xvJf node-v20.10.0-linux-x64.tar.xz

4.3 创建软链接

采用创建软链接的方法，使得在任意目录下都可以直接使用node和npm命令。

ln -s /root/node-v20.10.0-linux-x64/bin/node /usr/local/bin/node
ln -s /root/node-v20.10.0-linux-x64/bin/npm /usr/local/bin/npm

4.4 配置环境变量

  • 在/etc/profile文件中，新增以下两行：
export NODE_HOME=/root/node-v20.10.0-linux-x64/bin/
export PATH=$PATH:$NODE_HOME:/usr/local/bin/
  • 使变量生效
source /etc/profile

4.5 查看node版本

查看node版本，确保Node.js正常安装。

root@jeven:~# node -v
v20.10.0
root@jeven:~# npm -v
10.2.3

五、安装yarn工具

5.1 安装yarn

  • 使用npm全局安装yarn
 npm install -g yarn

在这里插入图片描述

5.2 检查yarn版本

检查yarn版本，当前安装版本为1.22.21。

root@jeven:~# yarn --version
1.22.21

5.3 设置国内镜像源

设置国内镜像源

yarn  config set registry https://registry.npmmirror.com

在这里插入图片描述

六、部署Blog-Index

6.1 下载软件包

下载Blog-Index软件包

git clone https://github.com/EsunR/Blog-Index.git

在这里插入图片描述

6.2 查看源码目录

查看Blog-Index源码目录

root@jeven:~# tree -L 2 ./Blog-Index/
./Blog-Index/
├── CHANGELOG.md
├── commitlint.config.js
├── demo
│   └── show.png
├── index.html
├── package.json
├── postcss.config.js
├── public
│   └── favicon.ico
├── README.md
├── src
│   ├── App.vue
│   ├── assets
│   ├── components
│   ├── config.ts
│   ├── hooks
│   ├── main.ts
│   ├── types
│   └── utils
├── tsconfig.json
├── vite.config.ts
└── yarn.lock

8 directories, 14 files

6.3 安装相关依赖

  • 进入Blog-Index源码目录
root@jeven:~# cd Blog-Index/
root@jeven:~/Blog-Index# ls
CHANGELOG.md          demo        package.json       public     src            vite.config.ts
commitlint.config.js  index.html  postcss.config.js  README.md  tsconfig.json  yarn.lock
  • 安装相关依赖
root@jeven:~/Blog-Index# yarn install
yarn install v1.22.21
[1/5] Validating package.json...
[2/5] Resolving packages...
[3/5] Fetching packages...
info There appears to be trouble with your network connection. Retrying...
info There appears to be trouble with your network connection. Retrying...
info There appears to be trouble with your network connection. Retrying...
[4/5] Linking dependencies...
[5/5] Building fresh packages...
$ husky install
husky - Git hooks installed
Done in 66.21s.

在这里插入图片描述

6.4 启动项目

在开发环境中，执行以下命令，启动Blog-Index项目。

yarn dev --host 192.168.3.246

在这里插入图片描述

七、访问Blog-Index首页

访问地址：http://192.168.3.246:5173，将IP地址替换为自己服务器IP地址。如果无法访问，则查看服务器防火墙是否配置，如果是云服务器，则还需配置安全组端口。

在这里插入图片描述

在这里插入图片描述

八、配置web服务器访问Blog-Index

8.1 修改配置文件

修改配置文件src/config.ts

vim src/config.ts

在这里插入图片描述

8.2 打包生产版本

使用以下命令来打包生产版本，打包输出在 dist/目录下。

yarn build

在这里插入图片描述

root@jeven:~/Blog-Index# ls dist/
assets  favicon.ico  index.html  ssr-manifest.json  ssr-manifest.json.gz

8.2 检查apache2 服务

安装apache2，Apache2是一个开源的Web服务器软件，是Apache软件基金会的一个成员项目。Apache2是Apache Web Server的下一代版本，是目前世界上使用最广泛的Web服务器软件之一。

apt install apache2 -y

启动apache2服务

systemctl enable apache2 --now

检查apache2服务状态，确保apache2服务处于正常运行状态。

root@jeven:~/Blog-Index# systemctl status apache2
● apache2.service - The Apache HTTP Server
     Loaded: loaded (/lib/systemd/system/apache2.service; enabled; vendor preset: enabled)
     Active: active (running) since Mon 2024-01-29 07:17:21 UTC; 1 week 5 days ago
       Docs: https://httpd.apache.org/docs/2.4/
   Main PID: 1031 (apache2)
      Tasks: 55 (limit: 4558)
     Memory: 6.5M
        CPU: 33.061s
     CGroup: /system.slice/apache2.service
             ├─  1031 /usr/sbin/apache2 -k start
             ├─783063 /usr/sbin/apache2 -k start
             └─783064 /usr/sbin/apache2 -k start

Feb 07 00:00:03 jeven systemd[1]: Reloaded The Apache HTTP Server.
Feb 08 00:00:02 jeven systemd[1]: Reloading The Apache HTTP Server...
Feb 08 00:00:03 jeven apachectl[642921]: AH00558: apache2: Could not reliably determine the server's fully qualified domain name, using 127.0.1.1. S>
Feb 08 00:00:03 jeven systemd[1]: Reloaded The Apache HTTP Server.
Feb 09 00:00:03 jeven systemd[1]: Reloading The Apache HTTP Server...
Feb 09 00:00:03 jeven apachectl[706265]: AH00558: apache2: Could not reliably determine the server's fully qualified domain name, using 127.0.1.1. S>
Feb 09 00:00:03 jeven systemd[1]: Reloaded The Apache HTTP Server.
Feb 10 00:00:02 jeven systemd[1]: Reloading The Apache HTTP Server...
Feb 10 00:00:03 jeven apachectl[783062]: AH00558: apache2: Could not reliably determine the server's fully qualified domain name, using 127.0.1.1. S>
Feb 10 00:00:03 jeven systemd[1]: Reloaded The Apache HTTP Server.
lines 1-23/23 (END)

8.3 拷贝网站文件

将Blog-Index目录下的网站文件都拷贝网站根目录/var/www/html下

cp -a dist/* /var/www/html/

重启apache2服务

systemctl restart apache2

8.4 访问Blog-Index

访问地址：http://192.168.3.246，将IP地址替换为自己服务器IP地址，进入到Blog-Index首页。如果无法访问，则查看服务器防火墙是否配置，如果是云服务器，则还需配置安全组端口。

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1801334.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

通过调用栈快速探究 Compose 中 touch 事件的处理原理

通过调用栈快速探究 Compose 中 touch 事件的处理原理

前言 Compose 视图的处理方式和 Android 传统 View 有很大差别，针对 touch 事件的处理自然也截然不同。 如何在 Compose 中处理 touch 事件，官方已有非常详尽的说明，可以参考：https://developer.android.google.cn/jetpack/comp…
阅读更多...
[图解]企业应用架构模式2024新译本讲解11-领域模型4

[图解]企业应用架构模式2024新译本讲解11-领域模型4

1 00:00:00,160 --> 00:00:01,870 好，到这里的话 2 00:00:02,620 --> 00:00:05,060 文字处理器的产品对象就生成了 3 00:00:06,880 --> 00:00:09,180 同样下面就是电子表格 4 00:00:10,490 --> 00:00:11,480 电子表格也同样的 5 00:00:11,490 -->…
阅读更多...
【Vue】——组件的注册与引用

【Vue】——组件的注册与引用

💻博主现有专栏： C51单片机（STC89C516），c语言，c，离散数学，算法设计与分析，数据结构，Python，Java基础，MySQL，linux&#xf…
阅读更多...
【Java面试】九、微服务篇-SpringCloud（上）

【Java面试】九、微服务篇-SpringCloud（上）

文章目录 1、SpringCloud五大组件2、服务注册和发现2.1 Eurake2.2 Eurake和Nacos的区别 3、Ribbon负载均衡3.1 策略3.2 自定义负载均衡策略 4、服务雪崩与熔断降级4.1 服务雪崩4.2 服务降级4.3 服务熔断 5、服务限流5.1 Nginx限流5.2 网关限流 6、微服务监控7、面试 1、SpringC…
阅读更多...
antd vue a-select 搜索

antd vue a-select 搜索

数据结构 list: [{ name: "序号", id: 0, show: true },{ name: "出库单编号", id: 1, show: false },{ name: "wbs元素", id: 2, show: true },{ name: "序号1", id: 3, show: true },{ name: "出库单编号1", id: 4, show…
阅读更多...
每天五分钟深度学习pytorch：pytorch中的广播机制是什么？

每天五分钟深度学习pytorch：pytorch中的广播机制是什么？

本文重点 在pytorch中经常有张量和张量之间的运算，那么有一点需要注意，那就是维度要匹配，如果维度不匹配就有可能出现问题。如果维度不一致，此时也可以同时进行操作，此时就需要使用pytorch中的广播机制，本节课程就讲解pytorch中的广播机制。 广播机制示意图 如上就是py…
阅读更多...
基于C#的计算机与安捷伦34970A通信方法

基于C#的计算机与安捷伦34970A通信方法

概述 安捷伦34970A采集数据，34970A支持RS232接口，但是如果直接用winform自带的seriaport类基本是没必要使用的，安捷伦等仪表通讯需要用到VISA的库。 库的获取 1. 是德科技的IO Library. 2. NI下载NI-VISA. 两者用法接近. 代码如下 using…
阅读更多...
【数据分析基础】实验numpy、pandas和matplolib

【数据分析基础】实验numpy、pandas和matplolib

文件score.xlsx 中存放了学生的各个科目的考试成绩（如下图）， 1. 编程实现：输入任意一个学号，将该学号对应的成绩，通过雷达图显示。 （1）程序代码： import pandas as pd…
阅读更多...
在Java中使用SeleniumAPI，超详细

在Java中使用SeleniumAPI，超详细

Java中 Selenium相关操作 1 定位元素 1.1 css选择器定位元素 就是定位到页面的元素，本质上就是一个一个的语法 下面举几个具体的例子： 类选择器 按照给定的 class 属性的值，选择所有匹配的元素。 语法：.classname 例子&am…
阅读更多...
【中篇】从 YOLOv1 到 YOLOv8 的 YOLO 物体检测模型历史

【中篇】从 YOLOv1 到 YOLOv8 的 YOLO 物体检测模型历史

YOLO 型号之所以闻名遐迩，主要有两个原因：其速度和准确性令人印象深刻，而且能够快速、可靠地检测图像中的物体。上回我解释了Yolo v1， 今天从Yolov2开始。 YOLOv2：更好、更快、更强 2017 年 7 月一个闷热的星期二下午，雷德蒙(Joseph Redmon, Yolo创始人)再次走上舞台。 …
阅读更多...
MASA：匹配一切、分割一切、跟踪一切

MASA：匹配一切、分割一切、跟踪一切

摘要 在复杂场景中跨视频帧稳健地关联相同对象是许多应用的关键，特别是多目标跟踪（MOT）。当前方法主要依赖于标注的特定领域视频数据集，这限制了学习到的相似度嵌入的跨域泛化能力。我们提出了MASA，一种新颖的方法用于…
阅读更多...
嵌入式Linux系统编程 — 3.1 Linux系统中的文件类型

嵌入式Linux系统编程 — 3.1 Linux系统中的文件类型

目录 1 Linux 系统中的文件类型简介 2 普通文件 2.1 什么是普通文件 2.2 普通文件分类 3 目录文件 4 字符设备文件和块设备文件 4.1 什么是设备文件 4.2 查看设备文件的方法： 5 符号链接文件（link） 5.1 什么是符号链接文件 5.2 如…
阅读更多...
生成式人工智能 - stable diffusion web-ui安装教程

生成式人工智能 - stable diffusion web-ui安装教程

一、Stable Diffusion WEB UI 屌丝劲发作了，所以本地调试了Stable Diffusion之后，就去看了一下Stable Diffusion WEB UI，网络上各种打包套件什么的好像很火。国内的也就这个层次了，老外搞创新，国内跟着屁股后面搞搞应用层，就叫大神了。 不扯闲篇了，我们这里从git源码直接…
阅读更多...
【vscode-快捷键 一键JSON格式化】

【vscode-快捷键 一键JSON格式化】

网上有很多JSON格式化工具，也有很多好用的在线json格式化工具。但是其实Vscode里面的可以直接格式化JSON，这里分享一个我常用的小插件 Prettify JSON 未格式化的JSON数据 召唤出命令行，输入prettify JSON 即可! ✿✿ヽ(▽)ノ✿
阅读更多...
C# WinForm —— 26 ImageList 介绍

C# WinForm —— 26 ImageList 介绍

1. 简介 图片集合，用于存储图像的资源，并在关联控件中显示出来 可以通过 索引、键名 访问每张图片 没有事件 2. 属性 属性解释(Name)控件ID，在代码里引用的时候会用到,一般以 imgList 开头ClolorDepth用于呈现图像的颜色数，默…
阅读更多...
立创小tips

立创小tips

立创小tips 原理图中 1-修改图纸属性 保存完，绘制原理图的界面就出现了，然后我们鼠标点击原理图的边缘变成红色就可以高边表格的属性了。 2-鼠标右键可以移动整个原理图 3-查看封装 点击任意一个元器件，在右侧就会显示封装属性&#xff…
阅读更多...
9.1 Go 接口的定义

9.1 Go 接口的定义

💝💝💝欢迎莅临我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。 推荐:「stormsha的主页」…
阅读更多...
文章解读与仿真程序复现思路——电网技术EI\CSCD\北大核心《基于日间-日内不确定集的中长期电源扩展规划》

文章解读与仿真程序复现思路——电网技术EI\CSCD\北大核心《基于日间-日内不确定集的中长期电源扩展规划》

本专栏栏目提供文章与程序复现思路，具体已有的论文与论文源程序可翻阅本博主免费的专栏栏目《论文与完整程序》 论文与完整源程序_电网论文源程序的博客-CSDN博客https://blog.csdn.net/liang674027206/category_12531414.html 电网论文源程序-CSDN博客电网论文源…
阅读更多...
输入偏置电流是什么？

输入偏置电流是什么？

输入失调电流与输入补偿电流概念一样（input offset current）：同相减去反相输入端偏置电流的差值。这是由生产工艺导致同相与反相端的电流大小方向都会有所不同。 第一种情况：同相输入端减去反相输入端 第一种情况：同相…
阅读更多...
使用cv2控制鼠标实现circle的拖拽

使用cv2控制鼠标实现circle的拖拽

2.代码 import numpy as np import cv2x_center [100,200,300,400] y_center [200,200,200,200] radius 30def mouse_LButtonDown(event, x, y, flags, param):global tempif event cv2.EVENT_LBUTTONDOWN:print(f" Down Clicked at ({x}, {y})")for i in range…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023