所在位置：
首页 >
营销资讯 >
网站运营 > 用 GitHub Pages 建个人网站的小白级教程
用 GitHub Pages 建个人网站的小白级教程
时间：2023-08-02 21:27:02 | 来源：网站运营
时间：2023-08-02 21:27:02 来源：网站运营
用 GitHub Pages 建个人网站的小白级教程：前段时间心血来潮想建一个个人网站，调研了一圈，试用了 Weebly、Wix、Squarespace 等等产品，感觉都没有办法满足我的奇葩需求……最终还是觉得 GitHub Pages 是最好的——自由、免费、流量够用，目前的访问速度也还不错，完美！
曾经还想用 GitHub Pages + Jekyll 的方式做，这样的话，之后可以用 markdown 来更新文章，一劳永逸。但是作为一个不会敲代码的设计，Jekyll 我真的搞不明白，安装各种工具的流程就失败了 (ಥ_ಥ)
最终选择了
用 html 模板做静态页面……后续更新的话，改 html 文件里的文章内容就行了，也没有很麻烦嘛~（自我安慰）
这种建站方式大概是最简单的，全程不到十分钟，建好之后你可以根据自己的需求随意修改模板的内容和样式（当然，改到什么程度取决于你看得懂多少 html 和 css 的代码了……）
这个教程会写得非常通俗简单小白，开发大佬不要嘲我哈~
前期准备
- 安装一个 GitHub 的客户端，用来同步云端和本地的文件：GitHub Desktop
可能有些大佬喜欢用终端同步？本小白还是喜欢可视化操作……这个网站打不开的话就找一下网盘版吧，应该也不少。 - 下载一个 html 的模板。这里安利一个网站：HTML5 UP，有几十个模板，质量都非常高，响应式设计，还都有二级页面，后续魔改一下也是可以满足五花八门的样式需求的。
大致的流程
- 注册一个 GitHub 帐号，并建一个 GitHub Pages 的仓库
- 用 GitHub 客户端将仓库拉到本地
- 把 html 的模板文件放到对应的本地文件夹里
- 用 GitHub 客户端把本地文件夹同步到云端的仓库
第一步：新建一个 GitHub Pages 的仓库
- 填写仓库名，格式必须是「你的 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，方便管理。
之后有时间的话，会再写篇文章介绍一下我魔改网页样式的野路子吧，在这里就不赘述了。
在线咨询
