论坛 › 福建 › 三分钟在Github搭建自己的导航网站

ikkhksvu 发表于 2024-7-27 17:08:30

三分钟在Github搭建自己的导航网站

    <h2 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">前言</span></h2>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">此刻</span>的网站导航<span style="color: black;">广泛</span>都是太多太杂了，而书签管理又不太方便，<span style="color: black;">因此</span>定制一个适合自己的导航网站才是最好的。俗话说，适合自己的才是最重要的，简单实用就好。在互联网信息爆炸的今天，找到自己想要的内容，并从<span style="color: black;">海量</span>信息流中筛选出<span style="color: black;">优秀</span>信息，<span style="color: black;">已然</span><span style="color: black;">作为</span>上网用户<span style="color: black;">必须</span>的技能之一了。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">而<span style="color: black;">实质</span>上<span style="color: black;">便是</span>我刚好在星球看到有人分享导航网站的开源项目，<span style="color: black;">因此</span>就想在自己的博客网站<span style="color: black;">亦</span>整一个。</p>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;"><span style="color: black;">有些</span>网站知识</span></h2>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">针对</span>网站的搭建原理简单<span style="color: black;">来讲</span><span style="color: black;">便是</span>网站 = 域名 + 服务器 + 主题 。</p>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">域名</span></h3><span style="color: black;">❝</span>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">「网域名<span style="color: black;">叫作</span>」</strong>（英语：Domain Name，简<span style="color: black;">叫作</span>：Domain），简<span style="color: black;">叫作</span><strong style="color: blue;">「域名」</strong>、<strong style="color: blue;">「网域」</strong>，<span style="color: black;">是由于</span>一串用点分隔的字符<span style="color: black;">构成</span>的互联网上某一台计算机或计算机组的名<span style="color: black;">叫作</span>，用于在数据传输时标识计算机的电子方位。（<span style="color: black;">源自</span>：wiki百科）</p><span style="color: black;">❞</span>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">简单<span style="color: black;">来讲</span>，域名<span style="color: black;">便是</span>一个IP<span style="color: black;">位置</span>的代<span style="color: black;">叫作</span>。例如我的网站服务器IP<span style="color: black;">位置</span>是47.240.xx.xx，为了方便别人<span style="color: black;">拜访</span>我的网站，就需要取一个方便记忆的别名，而域名yulog.club<span style="color: black;">便是</span>这个别名。而域名解析<span style="color: black;">便是</span>将域名yulog.club和服务器IP<span style="color: black;">位置</span><span style="color: black;">相关</span>上的中间商了。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">倘若</span>服务器是阿里云的话，直接在域名解析处<span style="color: black;">选取</span>新手引导就<span style="color: black;">能够</span>了。在空白处填上自己的IP<span style="color: black;">位置</span>，<span style="color: black;">而后</span>系统会自动添加两条解析记录的。<span style="color: black;">倘若</span>想百度收录快的，<span style="color: black;">意见</span>首选com、net。</p><img src="https://mmbiz.qpic.cn/mmbiz_png/cCpVhxyPbZibaBvsFj32TZlN5bDjl9jQliaZQ9lCH8icPHb1qeibjqrH4uYG4bAjCDtlsYGTG6VnFvKcAyFtNONb4Q/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;">
    <h3 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">服务器</span></h3><span style="color: black;">❝</span>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">有时，这两种定义会<span style="color: black;">导致</span>混淆，如网页服务器。它可能<span style="color: black;">指的是</span>用于网站的计算机，<span style="color: black;">亦</span>可能<span style="color: black;">指的是</span>像Apache<span style="color: black;">这般</span>的软件，运行在<span style="color: black;">这般</span>的计算机上以管理网页组件和<span style="color: black;">回复</span>网页浏览器的请求。服务器的<span style="color: black;">形成</span><span style="color: black;">包含</span>中央处理器、硬盘、内存等，和通用的计算机架构类似，<span style="color: black;">然则</span><span style="color: black;">因为</span>需要<span style="color: black;">供给</span>高<span style="color: black;">靠谱</span>的服务，<span style="color: black;">因此呢</span>在处理能力、稳定性、<span style="color: black;">靠谱</span>性、安全性、可扩展性、可管理性等方面<span style="color: black;">需求</span>较高。在网络环境下，<span style="color: black;">按照</span>服务器<span style="color: black;">供给</span>的服务类型<span style="color: black;">区别</span>，分为文件服务器，数据库服务器，应用程序服务器，Web服务器等。（<span style="color: black;">源自</span>：wiki百科）</p><span style="color: black;">❞</span>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">服务器就相当于24小时开机的电脑主机，<span style="color: black;">倘若</span>你的环境不错，你<span style="color: black;">亦</span><span style="color: black;">能够</span>拿自己电脑当服务器来<span style="color: black;">运用</span>。<span style="color: black;">不外</span>不<span style="color: black;">意见</span>这么干，当然<span style="color: black;">倘若</span>想自己时间多的折腾一下<span style="color: black;">亦</span><span style="color: black;">能够</span>。<span style="color: black;">针对</span>服务器<span style="color: black;">选取</span>的话，<span style="color: black;">通常</span>分为国内服务器和国外服务器。我用的比较多的是国内的服务器，国外的服务器就用过Vultr。国内服务器<span style="color: black;">意见</span><span style="color: black;">选取</span>阿里云、腾讯云，这两家<span style="color: black;">针对</span>学生都有比<span style="color: black;">很强</span>的优惠。国内的服务有个缺点，<span style="color: black;">便是</span>需要域名备案<span style="color: black;">才可</span><span style="color: black;">运用</span>。<span style="color: black;">倘若</span>不想备案的话，<span style="color: black;">能够</span>直接<span style="color: black;">选取</span>香港服务器。（<span style="color: black;">此刻</span>备案<span style="color: black;">亦</span>很方便了，腾讯云<span style="color: black;">能够</span>在<span style="color: black;">微X</span>小程序上备案，不需要幕布拍照了。阿里云备案<span style="color: black;">能够</span>在阿里云app上提交审核，<span style="color: black;">一样</span><span style="color: black;">亦</span>不需要幕布拍照了，快的话三四天就<span style="color: black;">能够</span>了）。</p>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">主题</span></h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">主题<span style="color: black;">能够</span>决定你的网站长得是什么样的。网上有<span style="color: black;">非常多</span>分享的免费主题模板，<span style="color: black;">能够</span>到知乎搜一下，这个就没什么好说的。<span style="color: black;">倘若</span>安装了宝塔面板的，<span style="color: black;">能够</span>在宝塔面板左侧有找到文件管理，<span style="color: black;">经过</span>这个<span style="color: black;">地区</span>找到网站根目录的主题文件夹，把主题上传到该文件夹解压后，在后台就<span style="color: black;">能够</span><span style="color: black;">运用</span>了。<span style="color: black;">亦</span><span style="color: black;">能够</span><span style="color: black;">经过</span>WinSCP应用将主题文件夹上传到服务器的主题文件夹中。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">我个人用的是Handsome主题：https://www.ihewro.com/archives/489/。一款好的主题<span style="color: black;">能够</span>让自己省<span style="color: black;">非常多</span>烦心事。</p>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">准备工作</span></h2>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">咱们</span>需要安装一下几样东西：</p>Github destop（<span style="color: black;">或</span>Git<span style="color: black;">亦</span>行）；VS code网站WebStack源码<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">下面我介绍一下我的搭建过程和<span style="color: black;">重视</span>事项。</p>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">1. 下载桌面版Github</span></h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">首要</span>到GitHub 桌面客户端下载客户端，下载安装客户端后，<span style="color: black;">根据</span>客户端的提示正常登录 Github 账号，<span style="color: black;">而后</span>新建一个仓库（Repository），名<span style="color: black;">叫作</span>格式为``GitHub用户名.github.io，<span style="color: black;">重视</span>必须要是以github.io` 后缀结尾的。设置本地的仓库（Local path）<span style="color: black;">位置</span>，将 WebStack 文件解压后复制到这个仓库。</p><img src="https://mmbiz.qpic.cn/mmbiz_png/cCpVhxyPbZibaBvsFj32TZlN5bDjl9jQlpeW4jZUkLLrzBafcbLVkgV7HgyMYYxfrKWyTK7QxDHMaozdvibeZLQA/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;"><img src="https://mmbiz.qpic.cn/mmbiz_png/cCpVhxyPbZibaBvsFj32TZlN5bDjl9jQlWNV873qhaXTTsMibeJ9BjVibUGlFOyKhiccskGJdTiauBgqIY986QqdtgA/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;">
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">而后</span>提交 commit 到Github 上，填写Summary 后<span style="color: black;">咱们</span>先点击左下角的 Commit to master ，再点击 Fetch origin 就<span style="color: black;">能够</span>将内容上传。</p><img src="https://mmbiz.qpic.cn/mmbiz_png/cCpVhxyPbZibaBvsFj32TZlN5bDjl9jQljsUyicZEyfleYycOztAShEXMXPyuCuytFc2DZM3456n0Yqicj20hhJ6A/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;">
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">而后</span>在浏览器输入你的用户名.github.io 就<span style="color: black;">能够</span><span style="color: black;">拜访</span>你的主页了。</p>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">2. 用VS code管理文件</span></h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">这儿</span>我<span style="color: black;">选取</span><span style="color: black;">运用</span> VS code 进行修改模板，<span style="color: black;">选取</span> Open in VS code 打开respository，<span style="color: black;">根据</span>自己的<span style="color: black;">需求</span>修改<span style="color: black;">关联</span>的文件后重新Fetch origin <span style="color: black;">就可</span>。</p><img src="https://mmbiz.qpic.cn/mmbiz_png/cCpVhxyPbZibaBvsFj32TZlN5bDjl9jQlfECUhSm69icVPt7EbLJgrx03Fdh9bSPPooXlrXpGC6JicU52jLZemrMw/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;">
    <h2 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">个人建站经历</span></h2>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">就<span style="color: black;">日前</span><span style="color: black;">来讲</span>，<span style="color: black;">倘若</span>搭建一个轻量级的个人网站服务的话，<span style="color: black;">选取</span>是多种多样的。我最<span style="color: black;">起始</span>用的是WordPress，WordPress当时为了给别人做一个个人博客网站。刚<span style="color: black;">起始</span>用的时候<span style="color: black;">便是</span>看重了wordpress主题和插件比较多，<span style="color: black;">况且</span>遇到问题在网上<span style="color: black;">能够</span>找到<span style="color: black;">非常多</span><span style="color: black;">处理</span><span style="color: black;">方法</span>。<span style="color: black;">然则</span>，<span style="color: black;">因为</span>我用的是阿里的学生机，WordPress服务器不堪重负，<span style="color: black;">亦</span>可能是我加的东西太多，最后服务器扛不住了。总的<span style="color: black;">来讲</span>，WordPress非常适合非程序员<span style="color: black;">运用</span>，<span style="color: black;">不消</span>写代码。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">之后在星球看到<span style="color: black;">有些</span>大佬在评论区说hexo非常好用，简洁优雅，配置简单。当然，最重要的是不需要自己购买服务器，<span style="color: black;">况且</span>有<span style="color: black;">非常多</span>的开源主题<span style="color: black;">能够</span><span style="color: black;">选取</span>。我的博客<span style="color: black;">运用</span>的是NexT主题，这款主题只需要稍微修改配置文件<span style="color: black;">就可</span>，官方文档简洁明了，让人一看就<span style="color: black;">晓得</span>是干<span style="color: black;">吗</span>的。<span style="color: black;">倘若</span>是程序员的话，<span style="color: black;">意见</span><span style="color: black;">能够</span>自己捣鼓一下，网上<span style="color: black;">亦</span>有<span style="color: black;">非常多</span>别人分享出来的魔改教程。</p><img src="https://mmbiz.qpic.cn/mmbiz_png/cCpVhxyPbZibaBvsFj32TZlN5bDjl9jQlvVZIvT8ibkjCIRxOFhJwlTAbuJQdr68bO7xGwQhET1v6ib3HHu8Qwic2A/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;">
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">而后</span><span style="color: black;">此刻</span><span style="color: black;">运用</span>的是Typecho的博客，Typecho相较于WordPress<span style="color: black;">无</span>这么笨重，<span style="color: black;">况且</span>Typecho极为精简，<span style="color: black;">同期</span>必要的功能一个<span style="color: black;">亦</span>不缺。我的博客网站用的主题是handsome主题，果然氪金才是最强的。<span style="color: black;">举荐</span><span style="color: black;">运用</span>宝塔面板一键<span style="color: black;">安排</span>typecho，<span style="color: black;">这儿</span><span style="color: black;">举荐</span>Rats的博客搭建教程。</p><img src="https://mmbiz.qpic.cn/mmbiz_png/cCpVhxyPbZibaBvsFj32TZlN5bDjl9jQlnIkw5jzwsicGzqHBk2Bv9HR3xkYeEKZibCzzKib3mzfEQ0PXIxTJUwprw/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;">
    <h2 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">总结</span></h2>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">用GitHub搭建的静态网站在国内<span style="color: black;">拜访</span>速度较慢，但<span style="color: black;">针对</span>我<span style="color: black;">来讲</span>足够了。我<span style="color: black;">重点</span>是想学一下前端知识，拿这个来<span style="color: black;">熟练</span>一下，自己慢慢修改<span style="color: black;">亦</span>挺好的。</p>

ZLrj123 发表于 2024-8-31 23:36:52

期待你更多的精彩评论，一起交流学习。

18128071341 发表于 2024-9-5 19:57:39

软文发布平台 http://www.fok120.com/

j8typz 发表于 2024-9-29 17:43:12

你的见解真是独到，让我受益匪浅。

qzmjef 发表于 2024-10-19 17:02:36

期待与你深入交流，共探知识的无穷魅力。

wrjc1hod 发表于 2024-10-27 03:19:39

论坛是一个舞台，让我们在这里尽情的释放自己。

7wu1wm0 发表于 2024-10-31 05:24:38

在遇到你之前，我对人世间是否有真正的圣人是怀疑的。

b1gc8v 发表于 2024-11-2 08:56:19

感谢楼主分享，祝愿外链论坛越办越好！

1fy07h 发表于 2024-11-13 02:42:46

软文发布论坛开幕式圆满成功。 http://www.fok120.com

查看完整版本: 三分钟在Github搭建自己的导航网站