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.lock8 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 ServerLoaded: 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 agoDocs: https://httpd.apache.org/docs/2.4/Main PID: 1031 (apache2)Tasks: 55 (limit: 4558)Memory: 6.5MCPU: 33.061sCGroup: /system.slice/apache2.service├─  1031 /usr/sbin/apache2 -k start├─783063 /usr/sbin/apache2 -k start└─783064 /usr/sbin/apache2 -k startFeb 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.mzph.cn/bicheng/24554.shtml

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

相关文章

VS-qt中运行程序时报错：fatal error RC1015：cannot open include file ‘afxres.h‘

VS-qt中运行程序时报错：fatal error RC1015：cannot open include file ‘afxres.h‘

开发环境：VS2015 qt5.12.10 点击运行时报错如下： 搜索了下afxres.h文件，发现位置如下： 看样子是VS中少安装了部分模块导致的，，看了同事的电脑，该文件应该是在以下目录中的： 所…
阅读更多...
如何在Python中向Word文档添加段落

如何在Python中向Word文档添加段落

如何在Python中向Word文档添加段落 添加段落代码解析添加前与添加后 在这篇博客文章中，我们使用Python向Word文档添加段落。 添加段落 from docx import Document# 打开一个现有的Word文档 doc Document(rC:\Users\Administrator\Desktop\Word文档\example.docx)…
阅读更多...
生成式人工智能如何运作？

生成式人工智能如何运作？

一、简述 生成式人工智能是一种可用于创建内容（包括对话、故事、图像、视频和音乐）的人工智能。人工智能技术试图在图像识别、自然语言处理（NLP）和翻译等非传统计算任务中模仿人类智能。生成式人工智能是人工智能的发展方向。您可…
阅读更多...
Ubuntu22.04下源码编译安装pythonocc-7.8

Ubuntu22.04下源码编译安装pythonocc-7.8

Ubuntu22.04下源码编译安装pythonocc-7.8 本文介绍Ubuntu下手动编译安装pythonocc，及安装过程遇到的各种坑 基本依赖安装 sudo apt-get update sudo apt-get install -y wget libglu1-mesa-dev libgl1-mesa-dev libxmu-dev libxi-dev build-essential cmake libf…
阅读更多...
如何提高网站收录？

如何提高网站收录？

GSI服务就是专门干这个的，这个服务用的是光算科技自己研发的GPC爬虫池系统。这个系统通过建立一个庞大的站群和复杂的链接结构，来吸引谷歌的爬虫。这样一来，你的网站就能更频繁地被谷歌的爬虫访问，从而提高被收录的机会。 说到效…
阅读更多...
【机器学习】【深度学习】优化器（Optimizer）

【机器学习】【深度学习】优化器（Optimizer）

一、概述 什么是优化器？ 优化器(Optimizer)是深度学习中的一个核心的概念，用于更新神经网络的权重，以减少或最小化损失函数(loss function)的值。损失函数衡量了模型的预测值与真实值之间的差异，而优化器的目标是通过调整网络参…
阅读更多...
CPU内部结构窥探·「3」

CPU内部结构窥探·「3」

加法器的工作原理：从简单的逻辑到现代计算 我们在cpu内部结构窥探「1」中提到CPU内部ALU的核心部件就是运算器，今天就以加法器为例，来讲解我们ALU中算数逻辑运算的过程。 1.认识数字电路中的各种门电路 2. 什么是加法器？ 加法器…
阅读更多...
Web UI自动化测试_Selenium+Python

Web UI自动化测试_Selenium+Python

一、概述： 1.1 Selenium是什么 Selenium 是一个基于浏览器的自动化工具，可以跨平台、跨浏览器使用。 Selenium 主要包括三部分： 1、Selenium IDE： Firefox 浏览器的一个插件（扩展），它可以进行…
阅读更多...
如何检测UV胶的均匀性？

如何检测UV胶的均匀性？

如何检测UV胶的均匀性？ 检测UV胶的均匀性可以通过以下几种方法来实现： 肉眼目视检查： 这是最简单直接的方法。将UV胶涂在表面上，使用裸眼观察胶层的表面。特别注意是否存在气泡、颜色不均匀、裂纹或其他明显的不均匀性。如凹凸不…
阅读更多...
异步复位和同步释放

异步复位和同步释放

文章目录 前言一、为什么需要复位呢？二、同步复位1. 同步复位定义2. 同步复位的实现3. 同步复位的优点和缺点同步复位优点同步复位缺点 三、异步复位1. 异步复位定义2. 异步复位的实现3. 异步复位的优点和缺点异步复位优点异步复位缺点 四、异步复位同步释放1. reco…
阅读更多...
Html/HTML5常用标签的学习

Html/HTML5常用标签的学习

课程目标 项目实战，肯定就需要静态网页。朝着做项目方式去学习静态网页。 01、编写第一个html工程结构化 cssjsimages/imgindex.html 归档存储和结构清晰就可以。 02、HTML标签分类 认知：标签为什么要分类，原因因为：分门别类…
阅读更多...
关于怎么用Cubemx生成的USBHID设备实现读取一体的鼠标键盘设备（改进版）

关于怎么用Cubemx生成的USBHID设备实现读取一体的鼠标键盘设备（改进版）

主要最近做了一个要用STM32实现读取鼠标键盘一体的那种USB设备，STM32的界面上要和电脑一样的能通过这个USB接口实现鼠标移动，键盘的按键。然后我就很自然的去参考了正点原子的例程，可是找了一圈，发现正点原子好像用的库函数&#…
阅读更多...
【计算机网络】对应用层协议中HTTPS协议的总结

【计算机网络】对应用层协议中HTTPS协议的总结

˃͈꒵˂͈꒱ write in front ꒰˃͈꒵˂͈꒱ ʕ̯•͡˔•̯᷅ʔ大家好，我是xiaoxie.希望你看完之后,有不足之处请多多谅解，让我们一起共同进步૮₍❀ᴗ͈ . ᴗ͈ აxiaoxieʕ̯•͡˔•̯᷅ʔ—CSDN博客 本文由xiaoxieʕ̯•͡˔•̯᷅ʔ 原创 CSDN 如…
阅读更多...
Oracle的优化器

Oracle的优化器

sql优化第一步：搞懂Oracle中的SQL的执行过程 从图中我们可以看出SQL语句在Oracle中经历了以下的几个步骤： 语法检查：检查SQL拼写是否正确，如果不正确，Oracle会报语法错误。 语义检查：检查SQL中的访问对象…
阅读更多...
flutter解决 running gradle task ‘assembledebug‘..

flutter解决 running gradle task ‘assembledebug‘..

点击此处
阅读更多...
【C++】用红黑树封装map、set

【C++】用红黑树封装map、set

用红黑树封装map、set 1. 红黑树1.1 模板参数的控制1.1.1 Value1.1.2 KeyOfValue 1.2 正向迭代器1.2.1 构造函数1.2.2 begin()end()1.2.3 operator()1.2.4 operator--()1.2.5 operator*()1.2.6 operator->()1.2.7 operator()1.2.8 operator!()1.2.9 总代码 1.3 反向迭代器1.…
阅读更多...
规则引擎-Easy rule

规则引擎-Easy rule

规则引擎-Easy rule 最近有几个项目中都出现了根据XX条件执行XX方法的业务，在动手之前脑中总会下意识的发现如果按照常规的去写代码，无论使用何种设计模式，都会出现不同程度上的代码冗余或大量if-else判断。 甚至说判断XX条件的代码和执行X…
阅读更多...
2024中国大学计算机科学与技术专业排名（非常详细）零基础入门到精通，收藏这一篇就够了

2024中国大学计算机科学与技术专业排名（非常详细）零基础入门到精通，收藏这一篇就够了

今天 6 月 8 号，高考第二天，随着大部分地区的高考结束，接下来就是焦急的等待分数的公布，然后学生们就迎来人生中的一个重要时刻——选择大学和专业。 在众多专业中，计算机科学与技术一直是备受瞩目的热门选择&#xf…
阅读更多...
【爬虫】使用Python爬取百度学术页面的标题、作者、摘要和关键词

【爬虫】使用Python爬取百度学术页面的标题、作者、摘要和关键词

目录 安装所需库编写爬虫代码解释运行脚本结果 在本文中，我将介绍如何使用Python编写一个网络爬虫，从百度学术页面提取研究论文的标题、作者、摘要和关键词。我们将使用 requests和 BeautifulSoup库来实现这一目标。 安装所需库 首先，确保…
阅读更多...
uniapp引入uview无代码提示

uniapp引入uview无代码提示

前提安装正确： 无论是基于npm和Hbuilder X方式安装，一定要配置正确。 解决办法 以前在pages.json里面的写法： "easycom": {"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue" }但是现在hbuilderx要求规范ea…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023