在Github/Gitee上搭建免费个人博客网站（进阶篇）

时间：2022-08-29 05:12:01 | 来源：网站运营

时间：2022-08-29 05:12:01 来源：网站运营

我在《不需懂代码，10分钟在Github上搭建免费且已成型的个人博客网站 》（后面简称基础篇）一文中，介绍了完全不懂代码的小白如何在10分钟里利用Github或Gitee（码云）上搭建一个成型的个人博客网站。当时承诺了还要写“进阶篇”，现在过了很久，在网友的催促下才来写，很不好意思。

下面我介绍一些你可能要用到的技巧，以实用为主，尽量符合你能想到的由浅入深的次序。

另外，由于国内访问Github有时候还是可能不太稳定，我在基础篇中建议用Gitee替代，基本内容的操作完全一样。这里我也把Github和Gitee一起讲，它们仍然非常相似。

1、如何修改、删除或创建文件？

从我这里Fork网站过去后，你的第一件事是改配置（_config.yml文件），然后除了写博客，就是改“About”（about.html文件），因为你不想里面的内容还是介绍我的。

我们在初级篇中讲到，每个文件点开后，在页面右上角有一支笔，点击可以修改文件。修改好了之后，点击页面底部的Commit changes，然后稍等片刻，刷新几次你的博客网站，就可以看到修改的内容了。

然后就在笔的旁边，还有一个垃圾桶，点击它可以删除当前文件。

那么创建新文件，就是在每一级目录文件列表的页面，右上角有一个“Create new file”，点击它就可以新建文件。旁边还有个“Upload files”，想上传文件也可以。

在Gitee里，这些东西都是中文按钮，所以看看就懂，这里就不讲了。要注意的是，如果你在Gitee不是付费用户，那么任何的修改都需要再次通过“服务-Pages”手工更新部署你的网站（详见第4部分），才会生效。

关于文件操作知道这些就够了。更复杂的操作在Github客户端上做要方便得多，下面第3部分讲如何安装使用Github客户端。

2、如何调整菜单？

你看到网站的右上角的菜单，其实是指向一个个文件。这些文件就是主目录下的所有.html文件，除了index.html代表Home所以必定在第一个位置之外，其它文件都是按照文件名排序从左到右排列过去的。

所以为了控制菜单次序，需要在文件名前加上1、2、3这样的数字。至于这个按钮的名字，是在文件内容中第一行的“title:”后面写的，所以若你要中文菜单的话，改那个地方就可以了，不需要改文件名。

如果你要增加菜单按钮，那么也要创建相应的.html文件，并如上所述控制好次序。

3、客户端与本地调试

以上都是少量修改。如果有比较大量的修改，建议安装Github客户端：GitHub Desktop。

下载安装好后，用你的github账号登录，然后选择你的仓库名，克隆（Clone）到本地。点左边栏（或左上角）的仓库名，右边会出现这样的内容：

上面一行的按钮是打开文件管理器，点击你就可以看到你本地电脑上的对应Github仓库的文件目录，跟网上的目录结构完全一样：

然后你就可以在本地修改、删除、增加文件，包括文件目录操作。其中_posts是存放你的博客文章的地方，img存放图片的地方。

若在本地文件夹里有任何改动，当你回到Github Desktop时，它会列出你刚才做的改动，然后你点左下角的“Commit”之后，是这个样子：

然后点右边的“Push origin”，就把本地的改动同步到网上去了。

现在你想修改头像就简单了：先把头像图片放到本地img目录下，修改_config.yml文件中关于头像的那一行为你的图片文件名，然后Commit、Push同步到网上就可以了。

对于大量的修改来说（例如批量删除文章，或批量修改文章的文件名），本地修改文章比直接在网上改要方便得多。但这还算不上“本地调试”，本地调试的预备过程比较麻烦，这里就不讲了，想了解可以去看看BY的原文。

那么有人问，Gitee也有客户端吗？答案是没有。但我悄悄告诉你，Github Desktop是可以用于Gitee的。方法很简单：点击左上角的Add，选择Clone Repository，然后在下面这个界面上选URL，把你Gitee仓库的URL地址拷贝进去，点击“Clone”，就可以了。这样你左边栏会增加一个Gitee的项目仓库，类别是“other”。

4、MD文本编辑器

既然说到在本地修改文章了，那不得不提一下MD文本编辑器。MD是Mark Down的缩写，是一种格式标识文本，用来写对格式有点儿要求但要求又不高的文章很方便。博客文章就是很合适的一种。在这里，你写的博客文章都用.md后缀命名。

MarkDown主要格式规则：

• 标题：# 代表标题，几级标题就用几个#号
• 列表：* 代表无序列表，1. 2. 3. 代表有序列表
• 链接：[...](...)，中括号中是链接名，小括号中是链接地址URL
• 粗体：用两对*号包围起来，即 **粗体字**

其它规则要什么就网上搜什么吧。

当然，你可以不用专门的MD编辑器，用一般的Note之类的一般文本编辑器也可以。但专门的MD文本编辑器更好用。

Windows上的MarkDown编辑器很多，而Mac电脑上我推荐这个MacDown工具，所见所得功能做得比较好：屏幕分两半，一半给你输入文字，一半显示效果，左右可互换，看你喜欢。菜单中有“格式”这一项，所以上述格式规则不记得也没关系。




最近人们比较推崇一款叫做Typora的Markdown文本编辑器，Windows/MacOS/Linux平台上的版本都有，目前都还是Beta版的。它真的太棒了，有的人为它激动到哭。有兴趣你可以也试一下，不过看样子这个软件升级到正式版后有可能要收费，到时候你要看看你的钱包再做决定。

写完或者修改好后，存盘到相应目录下。然后记得回到Github Desktop客户端，提交和上传新文件到仓库中，刷新几遍网页，你的新作就可以出现了。

注意，Github改动文件后，是自动反应到Page网站上的（可能有延时，或刷新几次网页即可）。但Gitee不是，除非你是Pro版本。Gitee普通版本，需要手工重新部署网站：在仓库上方的菜单中找到“服务”菜单，选择“Gitee Pages”，然后看到这个：

点击更新，文件改动才会更新到你的网站上。每次改动都必须这样做。

5、关于少量修改代码

进阶篇也能做到不需要懂代码。但是如果你要想修改得多一些，以更符合你自己的想法，可能需要稍微了解一下“HTML标签”是什么。

HTML标签一般是成对出现的，你可以理解为一对“括号”，以表明做一件事，例如：

• <p> .. .</p>
• <a> ... </a>
• <div> ... </div>
• <script> ... </script>

等等这样子的，左括号是一个被尖尖号包起来的单词，表示开始，然后是一些要做的事（可以有很多行），右括号比左括号多一个“/”，表示结束。

你不需要知道这些标签的意思，但你要知道他们是一个整体，因此当你要复制一些东西的时候，要从“左括号”开始到“右括号”结束整体复制。你还需要知道它们像括号一样，也是可以一层套一层嵌套的。

你要做少量修改的时候，先用文件管理器全文搜索的方法，定位到你要改的文件，然后打开该文件定位到要改的内容。只改内容的文本文字（或某些URL地址），不要改动这些标签，那你就是安全的，不会把你的网站给弄崩溃。

有了这点“关于代码的知识”，就够用了。这样你也可以少量修改菜单所对应的那几个HTML文件了。

比如，你可能注意到在我的博客主页大标题下面，有三个快速链接按钮。这是我出于自己的需要，用不太规范的代码简单写出来的。如果你不想要这几个按钮，或者要改它们的文字和链接，请打开index.html文件，删除或修改第7到23行整段的内容即可（我已经贴心地在这一段前面写了<!-- 快速链接。可修改链接和名字，或整体删除 --> 的注释字样）。




OK，恭喜你！到此为止，你已经基本玩转Github或Gitee的Page个人博客网站了。

接下去，你有兴趣继续玩下去的话，可能还有两件事情要关心一下：

1. 评论系统
2. 独立域名

我们将在《在Github/Gitee上搭建免费个人网站和博客（延伸篇）》中说说这两件事。

看完觉得有用请点个赞，谢谢！