个⼈博客⽹站html源码_在GithubGitee上搭建免费个⼈博客⽹
站(进阶篇)
我在《不需懂代码,10分钟在Github上搭建免费且已成型的个⼈博客⽹站 》(后⾯简称基础篇)⼀⽂中,介绍了完全不懂代码的⼩⽩如何在10分钟⾥利⽤Github或Gitee(码云)上搭建⼀个成型的个⼈博客⽹站。当时承诺了还要写“进阶篇”,现在过了很久,在⽹友的催促下才来写,很不好意思。
下⾯我介绍⼀些你可能要⽤到的技巧,以实⽤为主,尽量符合你能想到的由浅⼊深的次序。
另外,由于国内访问Github有时候还是可能不太稳定,我在基础篇中建议⽤Gitee替代,基本内容的操作完全⼀样。这⾥我也把Github和Gitee⼀起讲,它们仍然⾮常相似。
1、如何修改、删除或创建⽂件?
),因为
),然后除了写博客,就是改“About”(about.html⽂件)
从我这⾥Fork⽹站过去后,你的第⼀件事是改配置(_l⽂件)
你不想⾥⾯的内容还是介绍我的。
我们在初级篇中讲到,每个⽂件点开后,在页⾯右上⾓有⼀⽀笔,点击可以修改⽂件。修改好了之后,点击页⾯底部的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⽬录下,修改_l⽂件中关于头像的那⼀⾏为你的图⽚⽂件名,然后Commit、Push同步到⽹上就可以了。
对于⼤量的修改来说(例如批量删除⽂章,或批量修改⽂章的⽂件名),本地修改⽂章⽐直接在⽹上改要⽅便得多。但这还算不上“本地调试”,本地调试的预备过程⽐较⿇烦,这⾥就不讲了,想了解可以去看看BY的原⽂。
那么有⼈问,Gitee也有客户端吗?答案是没有。但我悄悄告诉你,Github Desktop是可以⽤于Gitee的。⽅法很简单:点击左上⾓的Add,选择Clone Repository,然后在下⾯这个界⾯上选URL,把你Gitee仓库的URL地址拷贝进去,点击“Clone”,就可以了。这样你左边栏会增加⼀个Gitee的项⽬仓库,类别是“other”。
4、MD⽂本编辑器
html个人网页完整代码怎么看既然说到在本地修改⽂章了,那不得不提⼀下MD⽂本编辑器。MD是Mark Down的缩写,是⼀种格式标识⽂本,⽤来写对格式有点⼉要求但要求⼜不⾼的⽂章很⽅便。博客⽂章就是很合适的⼀种。在这⾥,你写的博客⽂章都⽤.md后缀命名。
MarkDown主要格式规则:
标题:# 代表标题,⼏级标题就⽤⼏个#号
fifo最小深度计算列表:* 代表⽆序列表,1. 2. 3. 代表有序列表
链接:[...](...),中括号中是链接名,⼩括号中是链接地址URL
粗体字**matlab教程(全)
粗体:⽤两对*号包围起来,即 **粗体字
其它规则要什么就⽹上搜什么吧。
当然,你可以不⽤专门的MD编辑器,⽤⼀般的Note之类的⼀般⽂本编辑器也可以。但专门的MD⽂本编辑器更好⽤。
c语言必背标识符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>
css样式表的内部样式等等这样⼦的,左括号是⼀个被尖尖号包起来的单词,表⽰开始,然后是⼀些要做的事(可以有很多⾏),右括号⽐左括号多⼀个“/”,表⽰结束。transmit的常用搭配
你不需要知道这些标签的意思,但你要知道他们是⼀个整体,因此当你要复制⼀些东西的时候,要从“左括号”开始到“右括号”结束整体复制。你还需要知道它们像括号⼀样,也是可以⼀层套⼀层嵌套的。
你要做少量修改的时候,先⽤⽂件管理器全⽂搜索的⽅法,定位到你要改的⽂件,然后打开该⽂件定位到要改的内容。只改内容的⽂本⽂字(或某些URL地址),不要改动这些标签,那你就是安全的,不会把你的⽹站给弄崩溃。
有了这点“关于代码的知识”,就够⽤了。这样你也可以少量修改菜单所对应的那⼏个HTML⽂件了。
⽐如,你可能注意到在我的博客主页⼤标题下⾯,有三个快速链接按钮。这是我出于⾃⼰的需要,⽤不太规范的代码简单写出来的。如果你不想要这⼏个按钮,或者要改它们的⽂字和链接,请打开index.html⽂件,删除或修改第7到23⾏整段的内容即可(我已经贴⼼地在这⼀段前⾯写了<!-- 快速链接。可修改链接和名字,或整体删除 --> 的注释字样)。
OK,恭喜你!到此为⽌,你已经基本玩转Github或Gitee的Page个⼈博客⽹站了。
接下去,你有兴趣继续玩下去的话,可能还有两件事情要关⼼⼀下:
1. 评论系统
2. 独⽴域名
我们将在《在Github/Gitee上搭建免费个⼈⽹站和博客(延伸篇)》中说说这两件事。
看完觉得有⽤请点个赞,谢谢!
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论