如何快速部署IT软件导航网站详解

上篇文章分享了如何使用hexo快速搭建个人博客，今天再手把手带大家如何完成个人IT软件导航！

之所以每个IT人都需要搭建个导航网站，主要有以下几个原因：

经常在公司、家里（有时候还有其他的临时场所）更换电脑，每次同步书签（或者登陆一些导航网站）需要各种登陆，麻烦。
自己收藏的一些非常实用的网站放到收藏夹下可能没有分类不好找，而且也不便于分享给大家

先来看下导航网站页面样子，体验地址：

接下来，跟着我的步伐，只需不到10分钟，便可快速搭建

一、安装Hugo（本机已安装过的可以忽略）

Hugo是一个快速、灵活的静态网站生成器，广泛用于创建博客、文档网站和项目页面。它使用Go语言编写，以其高效和易用性受到开发者的喜爱。

本次只讲如何在linux上安装，在其他系统安装参考：https://gohugo.io/installation/linux/

Linux系统上安装Hugo步骤：

更新包管理器：

首先，确保你的包管理器是最新的。使用以下命令更新包列表：

1	`sudo apt-get update`

安装Hugo：

使用包管理器安装Hugo。以Ubuntu为例，可以使用以下命令：

1	`sudo apt-get install hugo`

验证安装：

安装完成后，可以通过运行以下命令来验证Hugo是否成功安装：

1	`hugo version`

如果安装成功，你应该能看到Hugo的版本信息。

其他安装方法：

如果你需要安装特定版本的Hugo，或者你的Linux发行版不支持直接通过包管理器安装，你可以从Hugo的GitHub发布页面下载预编译的二进制文件，然后手动安装。具体步骤如下：

下载适合你系统的二进制文件：

1	`wget https://github.com/gohugoio/hugo/releases/download/v0.80.0/hugo_0.80.0_Linux-64bit.tar.gz`

解压文件：

1	`tar -xzf hugo_0.80.0_Linux-64bit.tar.gz`

将二进制文件移动到系统路径：
1
sudo mv hugo /usr/local/bin/
通过这些步骤，你可以在Linux系统上成功安装并开始使用Hugo来创建和管理你的静态网站。

二、下载工程

使用以下命令可以直接把工程下载到linux机器上，我这里是放在了目录：/home/ubuntu/git/navbioit

1	`git clone http://gitlab.quanyouhulian.com/github/html/navbioit.git`

三、启动工程

1、切换到导航根目录

cd /home/ubuntu/git/navbioit（根据自己安装目录情况定），可以使用hugo server命令快速启动（注意：此方法启动只能本地查看，公网无法访问，本地玩下的可以这样快速启动）

2、使用pm2后台启动hugo应用

使用pm2原因是防止linux机器和本地ssh断开后就自动关闭，做线程守护作用！

1	`sudo pm2 start 'hugo server --baseUrl=http://120.92.211.225 --bind=0.0.0.0' --name my-hugo-server`

因为linux机器要让它放在公网访问，所以这里要带上–baseUrl参数和–bind参数，否则只能机器本地访问！

3、查看启动日志

接下来，使用以下命令查看应用启动日志，查询启动情况

1	`sudo pm2 logs my-hugo-server`

从日志打印可以看到，应用使用的1313端口

4、打开Linux服务器端口安全组

进度linux云服务器的安全组界面，把端口1313，改成全部ip都能访问！

如果不知道自己机器外网ip可以使用以下命令查看

1	`curl icanhazip.com`

5、测试验证

网页打开ip+端口测试下，是否可以正常访问，出现以下我这个界面表示搭建正常！

四、配置nginx映射到ip+端口

单使用ip+端口很多地方都会被拦截，这里我们做个域名映射，不仅方便自己记录，也能防止被微信等平台拦截

1、域名解析添加记录

因我nginx和导航部署在同一台机器，这里直接指向云服务器就行

2、配置nginx.conf

vim /etc/nginx/nginx.conf，新增配置

server {
                listen 80;  
                server_name mysite.quanyouhulian.com;
                location / {
                        proxy_pass http://localhost:1313;
                }
        }

3、重启nginx

重启前检查下配置是否正确

1	`sudo nginx -t`

检查返回状态都OK，则可以重启nginx了

1	`sudo systemctl restart nginx`

4、域名验证

接下来，输入域名：http://mysite.quanyouhulian.com/，验证是否可以打开

五、使用说明

左导航栏图标

左侧、顶部导航栏图标用的都是 Font Awesome 图标库 v5 版本 Free 的图标。链接如下：https://fontawesome.com/v5/search?o=r&m=free

调整头部搜索栏

头部搜索栏的默认位置可以通过下面的方法进行修改。

直接修改 layouts/partials/content_search.html，调整对应部分的位置。
调整默认的搜索（即点击”常用/搜索/工具 ….” 时下指箭头的指向），把对应的 id 添加到对应的 label 里面。

自定义头部导航

头部的导航菜单的各个信息集成在了 data/header.yml 文件中，每个人可以根据自己的需要调整。

- item: 首页
  icon: fa fa-home
  link: "./"

- item: 作者
  icon: fa fa-book
  link: https://www.yuque.com/shenweiyan

- item: 配置
  icon: fa fa-cog
  link: ""
  list:
    - name: 源码
      url: "#"
    - name: 图标
      url: "#"