不少MJJ都有漂亮的个人导航主页，每次看到，都只能留下没技术的泪水。今天，无意间看到了一个开源的主页项目，地址是https://github.com/bastienwirtz/homer，看起来非常漂亮。因为作者提供了docker镜像，因此安装配置起来非常方便，下面就是部署好后的界面，看起来是非常清爽的。
有兴趣的mjj可以接着往下看
如果还没有服务器，需要先购买一台服务器，我十分推荐良心云的轻量服务器，如果还没有上车的，可以去腾讯云的官方页面购买。购买的话，可以选择距离最近的区域购买，不过不想备案的话，可以选择境外的服务器(比如香港区域)进行购买。镜像的话，选择【官方镜像】下的【docker基础镜像】，实例套餐选择适合自己的，然后提交订单，付款即可。如果不选择【Docker基础镜像】，后面需要自行安装docker容器。
安装Homer
由于这个主页项目提供了docker镜像，因此安装起来非常简单，只需要一行命令即可。为了方便配置主页上的信息和上传图片，我们需要把配置文件的目录挂载到宿主机的目录上来方便我们修改。命令如下
- mkdir -p /data/homepage/assets #我是把配置文件挂载到宿主机的这个目录下，也可以指定到自己喜欢的目录
docker run -d -p 8080:8080 -v /data/homepage/assets:/www/assets --restart always b4bz/homer:latest # 然后启动Docker容器即可
启动成功后，在浏览器中访问，如果能看到页面打开，说明已经成功了一半了。这一步一般不会有什么问题。由于我们还没有进行任何的配置，因此，这个地方看到的是默认的主页。下面修改配置文件来将其改成自己的内容。
配置Homer
进入到/data/homepage/assets目录下(如果把配置文件没有挂载到这个目录下，就到自己挂载的目录下去看)，可以看到里面多了一些文件和文件夹，我们重点关注的是config.yml文件夹和tools文件夹,config.yaml用来配置页面上显示的内容，而tools文件夹用来放页面上需要的图片资源。用自己熟悉的文本编辑工具打开config.yml进行编辑。里面的内容也非常简单，一看就明白了。下面的是我编辑的内容，编辑好后保存。
logo的话需要图片资源，把图片放到tools目录下，然后在配置文件中，用"assets/tools/xxxx.png"进行引用即可
- ---
# Homepage configuration
# See https://fontawesome.com/icons for icons options
title: "我的个人主页"
subtitle: "Homer"
logo: "logo.png"
# icon: "fas fa-skull-crossbones" # Optional icon
header: true
footer: '收集一些有趣的网站' # set false if you want to hide it.
# Optional message
message:
#url: https://b4bz.io
style: "is-dark" # See https://bulma.io/documentation/components/message/#colors for styling options.
title: "公告"
icon: "fa fa-grin"
content: "欢迎访问我的个人主页，商务合作请联系我的邮箱ceo@gmail.com"
# Optional navbar
# links: [] # Allows for navbar (dark mode, layout, and search) without any links
links:
- name: "我的博客"
icon: "fab fa-blog"
url: "https://www.lixf.cc"
target: "_blank" # optional html a tag target attribute
- name: "我的github"
icon: "fas fa-book"
url: "https://github.com/lixiaofei123"
# Services
# First level array represent a group.
# Leave only a "items" key if not using group (group name, icon & tagstyle are optional, section separation will not be displayed).
services:
- name: "社交网站"
items:
- name: "Awesome app"
logo: "assets/tools/sample.png"
subtitle: "Bookmark example"
tag: "app"
url: "https://www.reddit.com/r/selfhosted/"
target: "_blank" # optional html a tag target attribute
- name: "Another one"
logo: "assets/tools/sample2.png"
subtitle: "Another application"
tag: "app"
url: "#"
- name: "建站必备"
items:
- name: "站长工具"
logo: "assets/tools/chinaz.png"
subtitle: "集合了常见的站长工具"
url: "https://tool.chinaz.com/"
target: "_blank"
- name: "51脚本"
logo: "assets/tools/jb.png"
subtitle: "找脚本，来这里就对了"
target: "_blank"
url: "https://www.51jb.net"
- name: "腾讯云"
logo: "assets/tools/qqcloud.png"
subtitle: "国内领先的云服务提供商"
target: "_blank"
url: "https://curl.qcloud.com"
配置完毕后，无需重启docker容器，刷新页面就可以看到我们修改的内容生效了。
好了，我也有一个漂亮的主页啦
热议
2楼 LikeOracle 6小时前
可以，不错！
3楼 mlcq 6小时前
不错，学习了
4楼 kezhao 6小时前
不错。搭建个玩玩看
5楼 youth 6小时前
邮箱牛逼了
6楼 表妹 6小时前
土豪啊，我直接一个html页面丢GitHub pages上不香吗
7楼 woniu 5小时前
杀鸡用了一个宰牛刀 哈哈html不就行了
8楼 MJJ威武 5小时前
学习了
9楼 告辞 5小时前
之前看过这个，就是还要改配置文件有点麻烦
10楼 超级无敌小马甲 5小时前
希望有个演示站，另外，这个和直接用ＨＴＭＬ有什么区别吗
12楼 kknd22 5小时前
有没有类似百度首页那个导航的？
看好他的前台就可以对网址进行增删改管理，整体UI也很简洁
13楼 lixiaofei 4小时前
dd
14楼 lixiaofei 4小时前
杀鸡用了一个宰牛刀 哈哈html不就行了
宰牛刀不用就生锈了
15楼 arctictiger 4小时前
这个大可不必啊，html就搞定的事情
16楼 lixiaofei 3小时前
希望有个演示站，另外，这个和直接用ＨＴＭＬ有什么区别吗
和直接用html对访问者来说没区别。但是更新起来方便一点
17楼 scheme 3小时前
邮箱怎么有三位？
18楼 telnetpig 3小时前
写这么多，辛苦了
19楼 lixiaofei 3小时前
邮箱怎么有三位？
反正都是瞎编的，写多少位都行
20楼 lixiaofei 22分钟前
申明：本文内容由网友收集分享，仅供学习参考使用。如文中内容侵犯到您的利益，请在文章下方留言，本站会第一时间进行处理。