嘟嘟社区

[经验] 用腾讯云轻量服务器搭建一个漂亮的导航主页

moe

不少MJJ都有漂亮的个人导航主页，每次看到，都只能留下没技术的泪水。今天，无意间看到了一个开源的主页项目，地址是https://github.com/bastienwirtz/homer，看起来非常漂亮。因为作者提供了docker镜像，因此安装配置起来非常方便，下面就是部署好后的界面，看起来是非常清爽的。

[经验] 用腾讯云轻量服务器搭建一个漂亮的导航主页

有兴趣的mjj可以接着往下看

如果还没有服务器，需要先购买一台服务器，我十分推荐良心云的轻量服务器，如果还没有上车的，可以去腾讯云的官方页面购买。购买的话，可以选择距离最近的区域购买，不过不想备案的话，可以选择境外的服务器(比如香港区域)进行购买。镜像的话，选择【官方镜像】下的【docker基础镜像】，实例套餐选择适合自己的，然后提交订单，付款即可。如果不选择【Docker基础镜像】，后面需要自行安装docker容器。

安装Homer

由于这个主页项目提供了docker镜像，因此安装起来非常简单，只需要一行命令即可。为了方便配置主页上的信息和上传图片，我们需要把配置文件的目录挂载到宿主机的目录上来方便我们修改。命令如下

  1. mkdir -p /data/homepage/assets   #我是把配置文件挂载到宿主机的这个目录下，也可以指定到自己喜欢的目录
  2. 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"进行引用即可

  1. —
  2. # Homepage configuration
  3. # See https://fontawesome.com/icons for icons options
  5. title: "我的个人主页"
  6. subtitle: "Homer"
  7. logo: "logo.png"
  8. # icon: "fas fa-skull-crossbones" # Optional icon
  10. header: true
  11. footer: ‘收集一些有趣的网站’ # set false if you want to hide it.
  13. # Optional message
  14. message:
  15.   #url: https://b4bz.io
  16.   style: "is-dark" # See https://bulma.io/documentation/components/message/#colors for styling options.
  17.   title: "公告"
  18.   icon: "fa fa-grin"
  19.   content: "欢迎访问我的个人主页，商务合作请联系我的邮箱[email protected]"
  21. # Optional navbar
  22. # links: [] # Allows for navbar (dark mode, layout, and search) without any links
  23. links:
  24.   – name: "我的博客"
  25.     icon: "fab fa-blog"
  26.     url: "https://www.lixf.cc"
  27.     target: "_blank" # optional html a tag target attribute
  28.   – name: "我的github"
  29.     icon: "fas fa-book"
  30.     url: "https://github.com/lixiaofei123"
  32. # Services
  33. # First level array represent a group.
  34. # Leave only a "items" key if not using group (group name, icon & tagstyle are optional, section separation will not be displayed).
  35. services:
  36.   – name: "社交网站"
  37.     items:
  38.       – name: "Awesome app"
  39.         logo: "assets/tools/sample.png"
  40.         subtitle: "Bookmark example"
  41.         tag: "app"
  42.         url: "https://www.reddit.com/r/selfhosted/"
  43.         target: "_blank" # optional html a tag target attribute
  44.       – name: "Another one"
  45.         logo: "assets/tools/sample2.png"
  46.         subtitle: "Another application"
  47.         tag: "app"
  48.         url: "#"
  49.   – name: "建站必备"
  50.     items:
  51.       – name: "站长工具"
  52.         logo: "assets/tools/chinaz.png"
  53.         subtitle: "集合了常见的站长工具"
  54.         url: "https://tool.chinaz.com/"
  55.         target: "_blank"
  56.       – name: "51脚本"
  57.         logo: "assets/tools/jb.png"
  58.         subtitle: "找脚本，来这里就对了"
  59.         target: "_blank"
  60.         url: "https://www.51jb.net"
  61.       – name: "腾讯云"
  62.         logo: "assets/tools/qqcloud.png"
  63.         subtitle: "国内领先的云服务提供商"
  64.         target: "_blank"
  65.         url: "https://curl.qcloud.com"

复制代码

配置完毕后，无需重启docker容器，刷新页面就可以看到我们修改的内容生效了。

好了，我也有一个漂亮的主页啦
可以，不错！
不错，学习了
不错。搭建个玩玩看
邮箱牛逼了
土豪啊，我直接一个html页面丢GitHub pages上不香吗
杀鸡用了一个宰牛刀 哈哈  html不就行了
学习了
之前看过这个，就是还要改配置文件有点麻烦
希望有个演示站，另外，这个和直接用ＨＴＭＬ有什么区别吗