用github搭建网站(用 GitHub Pages 建个人网站的小白级教程)
时间:2023-07-19 12:07:39
点击次数:6
前段时间心血来潮想建一个个人网站,调研了一圈,试用了 Weebly、Wix、Squarespace 等等产品,感觉都没有办法满足我的奇葩需求……最终还是觉得 GitHub Pages 是最好的——自由、免费、流量够用,目前的访问速度也还不错,完美!
GitHub Pagespages.github.com/
曾经还想用 GitHub Pages + Jekyll 的方式做,这样的话,之后可以用 markdown 来更新文章,一劳永逸。但是作为一个不会敲代码的设计,Jekyll 我真的搞不明白,安装各种工具的流程就失败了 (ಥ_ಥ)
最终选择了用 html 模板做静态页面……后续更新的话,改 html 文件里的文章内容就行了,也没有很麻烦嘛~(自我安慰)
这种建站方式大概是最简单的,全程不到十分钟,建好之后你可以根据自己的需求随意修改模板的内容和样式(当然,改到什么程度取决于你看得懂多少 html 和 css 的代码了……)
这个教程会写得非常通俗简单小白,开发大佬不要嘲我哈~
前期准备
安装一个 GitHub 的客户端,用来同步云端和本地的文件:
GitHub Desktop可能有些大佬喜欢用终端同步?本小白还是喜欢可视化操作……这个网站打不开的话就找一下网盘版吧,应该也不少。下载一个 html 的模板。这里安利一个网站:
HTML5 UP,有几十个模板,质量都非常高,响应式设计,还都有二级页面,后续魔改一下也是可以满足五花八门的样式需求的。
大致的流程
注册一个 GitHub 帐号,并建一个 GitHub Pages 的仓库用 GitHub 客户端将仓库拉到本地把 html 的模板文件放到对应的本地文件夹里用 GitHub 客户端把本地文件夹同步到云端的仓库
第一步:新建一个 GitHub Pages 的仓库
点击网页右上角的「New repository」

填写仓库名,格式必须是「你的
http://username.github.io」才能被识别

建好后,进入仓库最后一个 tab「Settings」,在「GitHub Pages」那一栏点「Choose a theme」选一个默认的网页模板。这里随便选一个就行,反正后面会被其他模板替换掉,系统提供的模板都很简陋。
选完默认模板其实网站就创建好可以访问了,回到 Settings 的时候就会看到你的网站域名啦~
这个时候你的仓库根目录下会有两个文件:_config.yml、index.html(这是网站的默认首页)

第二步:用 GitHub 客户端将仓库拉到本地
安装好 GitHub 客户端后,登录你的帐号。然后克隆仓库,把刚刚建好的仓库文件夹拉到本地。

第三步:添加模板文件
将下载好的模板文件解压,然后把里面的所有文件挪到你刚刚克隆到本地的文件夹中。index.html 直接替换,原来文件夹中的 _config.yml 就放那儿不用管它……
最后一步:将文件夹内容同步到云端仓库
这是打开 GitHub 客户端,已经可以看到好几项变动了,点击「Commit to master」,然后点击「Push origin」,等待几分钟就完成同步了。

再次访问个站链接,已经是新模板的样式啦~
我这里随便选了 html5 up 的第一个模板,就是下图的样子。不过这个仓库是我为了写教程建的,已经删掉了,所以现在访问不了啦……
最后简单介绍一下后续会常用的文件:
assets/css 里面都是网页的样式文件啦,后续要调整页面设计,也是这些文件改得最多。index.html 上面提到了,是首页文件,首页的内容都在这个文件里改。你可以在根目录下新建一个文件夹放文章内容的 html,方便管理。
之后有时间的话,会再写篇文章介绍一下我魔改网页样式的野路子吧,在这里就不赘述了。
上一篇:
宝塔面板创建网站教程(宝塔面板怎么搭建网站?宝塔面板建站教程)
下一篇:
花店网站设计模板(花店网站制作如何打动用户的心?秘诀就在这些花店网站模板里!)