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

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首页。如果无法访问，则查看服务器防火墙是否配置，如果是云服务器，则还需配置安全组端口。

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

C语言scanf( ) 函数、fprintf( ) 函数与 scanf( ) 函数和printf( ) 函数有什么不同？

C语言scanf( ) 函数、fprintf( ) 函数与 scanf( ) 函数和printf( ) 函数有什么不同？

一、问题 fscanf( ) 函数、fprintf( ) 函数与 printf( ) 函数、scanf( ) 函数的作⽤相似，都是格式化读写函 数，那么这两个读写函数有什么不同呢？ 二、解答 两者的区别就在于前⾯的字符“f”，即 fscanfQ函数和 fprintfD函数的读写…
阅读更多...
2005-2022年各省居民人均消费支出数据（无缺失）

2005-2022年各省居民人均消费支出数据（无缺失）

2005-2022年各省居民人均消费支出数据（无缺失） 1、时间：2005-2022年 2、来源：国家统计局、统计年鉴 3、指标：全体居民人均消费支出 4、范围：31省 5、缺失情况：无缺失 6、指标解释 居民人…
阅读更多...
【经验分享】搭建跨境电商那个独立站必备的功能模块以及实现

【经验分享】搭建跨境电商那个独立站必备的功能模块以及实现

搭建跨境电商独立站时，需要确保网站具备一系列关键的功能板块，以提供用户友好的购物体验并确保业务的顺利进行。以下是这些功能板块的详细归纳： 注册登录与身份验证： 用户注册与登录：允许用户创建账户，通过…
阅读更多...
排查互联网敏感信息，对信息泄露说“不”

排查互联网敏感信息，对信息泄露说“不”

前言 01 近几年，随着我国对网络安全的重视，贴近实战的攻防演练活动越发丰富，各单位的网络安全建设也逐步从“事后补救”升级为“事前防控”。在演练中，进攻方会在指定时间内对防守方发动网络攻击，检测出防守方存在的…
阅读更多...
这才是计科之 Onix XV6 源码分析（3、Unix-like系统的进程调度模块）

这才是计科之 Onix XV6 源码分析（3、Unix-like系统的进程调度模块）

这才是计科之 Onix & XV6 源码分析（3、Unix-like系统的进程调度模块） 前言 前面已经分析了XV6的启动流程以及内存管理，接下来，我们探究进程调度的实现。与其说进程调度，我觉得可以顺应内存的虚拟化的叫法&#x…
阅读更多...
Python报错：IndentationError: unexpected indent问题的解决办法及原因

Python报错：IndentationError: unexpected indent问题的解决办法及原因

解决Python报错：IndentationError: unexpected indent问题的解决办法及原因 Python是一种注重可读性的编程语言，它使用缩进来定义代码块。如果你遇到了IndentationError: unexpected indent的错误，这意味着Python解释器在代码中遇到了意外的缩…
阅读更多...
HTML，CSS，JavaScript实例——3D骰子，跨纬度蠕虫，动态登录表单。

HTML，CSS，JavaScript实例——3D骰子，跨纬度蠕虫，动态登录表单。

文章目录 一、3D筛子1.HTML2.CSS 二、跨纬度蠕虫1.HTML2.CSS3.JS 三、动态登录表单1.HTML2.CSS 一、3D筛子 1.HTML <!--ring div starts here--> <div class"ring"><i style"--clr:#00ff0a;"></i><i style"--clr:#ff0057…
阅读更多...
如何拼接全景图？PTGui Pro macOS安装包

如何拼接全景图？PTGui Pro macOS安装包

PTGui Pro是一款功能强大的全景图像拼接软件&#xff0c;特别适合专业摄影师和设计师使用。它能够将多张照片拼接成高质量的全景图&#xff0c;支持普通、圆柱和球形等多种全景模式。软件提供了自动图像拼接和手动模式&#xff0c;用户可根据需求灵活选择。同时&#xff0c;PTG…
阅读更多...
大屏可视化建设方案（word）

大屏可视化建设方案（word）

1.系统概述 1.1.需求分析 1.2.重难点分析 1.3.重难点解决措施 2.系统架构设计 2.1.系统架构图 2.2.关键技术 2.3.接口及要求 3.系统功能设计 3.1.功能清单列表 3.2.数据源管理 3.3.数据集管理 3.4.视图管理 3.5.仪表盘管理 3.6.移动端设计 3.1.系统权限设计 3.…
阅读更多...
平稳交付 20+ 医院，卓健科技基于 OpenCloudOS 的落地实践

平稳交付 20+ 医院，卓健科技基于 OpenCloudOS 的落地实践

导语&#xff1a;随着数字化转型于各个行业领域当中持续地深入推进&#xff0c;充当底层支撑的操作系统正发挥着愈发关键且重要的作用。卓健科技把 OpenCloudOS 当作首要的交付系统&#xff0c;达成了项目交付速度的提升、安全可靠性的增强、运维成本的降低。本文将会阐述卓健科…
阅读更多...
源码解析：从零解读SAM(Segment Anything Model)大模型！

源码解析：从零解读SAM(Segment Anything Model)大模型！

节前&#xff0c;我们星球组织了一场算法岗技术&面试讨论会&#xff0c;邀请了一些互联网大厂朋友、参加社招和校招面试的同学。 针对算法岗技术趋势、大模型落地项目经验分享、新手如何入门算法岗、该如何准备、面试常考点分享等热门话题进行了深入的讨论。 合集&#x…
阅读更多...
Postman 打开错误的解决方法

Postman 打开错误的解决方法

错误如下&#xff1a; PostMan的文件都是放在用户文件下&#xff0c;所以在Local和Roaming文件夹下查看&#xff0c;并删除所有PostMan相关文件夹。 我电脑上的路径在 C:\Users\Administrator\AppData\Local 和 C:\Users\Administrator\AppData\Roaming【Administrator为系…
阅读更多...
南山代理记账，为您提供专业、高效的服务和全方位的支持

南山代理记账，为您提供专业、高效的服务和全方位的支持

随着商业活动的不断深化和扩展&#xff0c;企业的会计工作越来越重要&#xff0c;而作为一家专业的代理记账公司&#xff0c;“南山代理记账”始终致力于为客户提供专业、高效的服务&#xff0c;帮助他们在经营过程中更好地管理和运用资金。 南山代理记账公司的服务范围广泛&am…
阅读更多...
docker pull image 报错 dial tcp 31.13.88.169:443: i/o timeout

docker pull image 报错 dial tcp 31.13.88.169:443: i/o timeout

一、错误重现 error pulling image configuration: download failed after attempts6: dial tcp 31.13.88.169:443: i/o timeout 在执行docker build构建镜像&#xff0c;拉取镜像时报错 或者直接docker pull镜像时报错 实质都是拉取镜像源超时报错&#xff0c;那么就是镜像源…
阅读更多...
通过调用栈快速探究 Compose 中 touch 事件的处理原理

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

前言 Compose 视图的处理方式和 Android 传统 View 有很大差别&#xff0c;针对 touch 事件的处理自然也截然不同。 如何在 Compose 中处理 touch 事件&#xff0c;官方已有非常详尽的说明&#xff0c;可以参考&#xff1a;https://developer.android.google.cn/jetpack/comp…
阅读更多...
为什么PPT录制没有声音 电脑ppt录屏没有声音怎么办

为什么PPT录制没有声音 电脑ppt录屏没有声音怎么办

一、为什么PPT录制没有声音 1.软件问题 我们下载软件的时候可能遇到软件损坏的问题&#xff0c;导致录制没有声音&#xff0c;但其他功能还是可以使用的。我建议使用PPT的隐藏功能&#xff0c;下载插件&#xff0c;在PPT界面的加载项选项卡中就能使用。我推荐一款可以解决录屏…
阅读更多...
JavaScript入门宝典：核心知识全攻略（下）

JavaScript入门宝典：核心知识全攻略（下）

文章目录 前言一、获取标签元素二、操作标签元素属性1. 属性的操作2. innerHTML 三、数组及操作方法1. 数组的定义2. 数组的操作 四、循环语句五、字符串拼接六、定时器1. 定时器的使用3. 清除定时器 七、ajax1. ajax的介绍2. ajax的使用 前言 JavaScript是前端开发不可或缺的技…
阅读更多...
RHEL - 订阅、注册系统和 Yum Repository(新版界面)

RHEL - 订阅、注册系统和 Yum Repository(新版界面)

《OpenShift / RHEL / DevSecOps 汇总目录》 演示环境说明 本文需要有 redhat.com 账号以及包含 RHEL 的有效订阅。 演示环境使用了通过 minimal 方式安装的 RHEL 7.6 环境&#xff0c;RHEL 可以访问互联网。 红帽网站 access.redhat.com 针对新用户提供了新版界面&#xff0…
阅读更多...
云原生架构：构建高可用、可伸缩的互联网应用

云原生架构：构建高可用、可伸缩的互联网应用

随着互联网技术的不断发展&#xff0c;云原生架构已经成为构建高可用、可伸缩的互联网应用的最佳实践之一。云原生架构是一种以云计算为基础的应用架构&#xff0c;旨在充分利用云平台的优势&#xff0c;实现应用的高可用性、灵活性和可扩展性。本文将介绍云原生架构的关键概念…
阅读更多...
数据结构复习指导之外部排序

数据结构复习指导之外部排序

目录 外部排序 复习提示 1.外部排序的基本概念 2.外部排序的方法 2.1对大文件排序时使用的排序算法&#xff08;2016&#xff09; 3.多路平衡归并与败者树 4.置换-选择排序&#xff08;生成初始归并段&#xff09; 4.1置换-选择排序生成初始归并段的实例(2023) 5.最佳…
阅读更多...
最新文章

Copyright @ 2022~2023