从零打造Github Pages网站
这篇博客已经过时，因为我不再使用github pages作为我的博客网站架构了。
感谢你点开这个博客，这说明这个博客有些地方让你有探索甚至学习的欲望了，这一点让我非常开心。 =）
这篇博客主要讲小白怎么从零入门去打造博客网站，实现这样的博客网站需要学什么。我自然是不相信一个人能够只通过一个帖子就做好一个网站的，不过我希望通过这个帖子，你能够知道搭建网站需要学什么，对于搭建一个博客网站有一点初步的认识框架。另外，至于怎么把博客做漂亮，博客网站有些小巧思是怎么做的，后续怎么高效率更新博客，我将新开帖子讲。这个网站肯定还会随着时间更新，如果还有什么关于这个网站更新的帖子，会贴在下面。
网站通过Github Pages搭建，基于Jekyll。读这篇帖子之前，你要提前注册Github账号，并且知道一些基础的Github操作。
我默认点开帖子的你还不会这些语言，所以我尽量讲得不那么专业。话虽如此，我还是希望授人以渔，这个帖子只讲一些比较必要知道的，细节你还得去教编程的网站或者文档钻研。除此之外，我很建议你从头看到尾——至少先浏览一遍再动手。如果一开始结构没清晰就动手写太多，后面屎山代码要改挺烦的。
最短时间实现一个Hello World网页
第一步
新建一个Github仓库，命名为 你的Github用户名.github.io
比如我的Github用户名是knight-de-ficus，因此仓库名为knight-de-ficus.github.io，同时这也将作为网站的地址使用。
注意：不是昵称（nickname），而是用户名（username）
新建仓库有且仅有命名需要注意，其他选项按照默认即可。
第二步
新建完成之后，克隆这个仓库到你的本地。
用powershell或者cmd选择以下两个代码的其中一个运行
git clone https://github.com/你的用户名/你的用户名.github.io.git
如果这个代码失败了，可能是网络环境不佳或者是被墙了，换个手机热点，或者多试几次
git clone git@github.com:你的用户名/你的用户名.github.io.git
如果这个代码失败了，看看这篇文章。SSH比较稳定，一劳永逸；但是配置比较繁琐。
https://docs.github.com/zh/authentication/connecting-to-github-with-ssh/about-ssh
第三步
在仓库根目录新建一个index.html，然后用记事本或者你喜欢的IDE打开它。随便写点什么，或者把下面这个代码复制进去，保存关闭。
<!DOCTYPE html>
<html>
<head>
<title>这是标题</title>
</head>
<body>
<h1>这是一个大标题</h1>
<h2>这是一个二级标题</h2>
<p>
Hello World!
</p>
<p style="color: #ff0000;">
Hello World,但是不同颜色.
</p>
</body>
</html>
第四步
用powershell或者cmd按顺序运行以下代码
git add .
git commit -m "第一次提交代码！"
git push origin main
第五步
等一两分钟（毕竟Github识别你的东西也要时间），打开浏览器，地址栏输入 你的Github用户名.github.io，回车访问！你就可以看见你的网站了
这时你就可以把 你的Github用户名.github.io 分享给你的朋友。不仅如此，全世界的网民现在都能够看到你做的页面了。
前端三大件：Html、CSS和JS
HTML：负责网页的架构；
CSS：负责网页的样式和美化；
JavaScript（JS）：负责网页的行为；
世界上绝大部分网站都离不开这三种语言。可能小白看到做个网站需要学三个语言，会知难而退。但是放心，html和CSS不像C语言Python那样需要记各种关键字、记各种结构；除非你要实现很高大上的特效，否则JS的代码也不用写很多。
这里的几个网站很实用，有的地方还可以通过小实例操作。可以搭配着学学：
https://www.runoob.com/html/html-tutorial.html
https://www.runoob.com/js/js-tutorial.html
https://www.runoob.com/css/css-tutorial.html
https://developer.mozilla.org/zh-CN/docs/Web
这里有一段代码，同时把CSS和JS嵌到了Html代码中间。你可以观察观察它的结构，上下有哪些一样的字段，并且从英文中推断出各个部分的作用。你可以复制到你自己的网站，然后这里改改那里改改，通过观察什么东西变换了，来确定怎么写这些代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Example</title>
<style>
/* 在style括起来的代码就是CSS */
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 0;
padding: 0;
background-color: #f0f0f0;
}
button {
padding: 10px 20px;
font-size: 16px;
color: white;
background-color: #007BFF;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<h1>点击按钮改变背景颜色</h1>
<button id="colorButton">点击我</button>
<script>
// 这里script括起来的代码就是JavaScript
const button = document.getElementById('colorButton');
button.addEventListener('click', () => {
// 随机生成背景颜色
const randomColor = `#${Math.floor(Math.random() * 16777215).toString(16)}`;
document.body.style.backgroundColor = randomColor;
});
</script>
</body>
</html>
把代码拆开
随着代码越来越多，你会想着不能所有东西都放一个地方，必须分门别类整理；此外，一个网站不能只有一个页面吧，但是不同的页面可能要复用同一套字体（同一段CSS代码）、同一个动作（JS代码）。所以很有必要分不同的.html、.css和.js文件。比如下面这样。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Example</title>
<link rel="stylesheet" href="./styles.css"> <!-- 告诉程序css文件在哪 -->
<script src="./styles.js" defer></script> <!-- 告诉程序js文件在哪 -->
</head>
<body>
<h1>点击按钮改变背景颜色</h1>
<button id="colorButton">点击我</button>
</body>
</html>
/*命名为styles.css*/
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 0;
padding: 0;
background-color: #f0f0f0;
}
button {
padding: 10px 20px;
font-size: 16px;
color: white;
background-color: #007BFF;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
/*命名为styles.js*/
const button = document.getElementById('colorButton');
button.addEventListener('click', () => {
// 随机生成背景颜色
const randomColor = `#${Math.floor(Math.random() * 16777215).toString(16)}`;
document.body.style.backgroundColor = randomColor;
});
进阶：模仿可以迅速提高你的理解
善用“检查”工具
模仿、找不同对于小白来说是提高的非常快的途径。绝大部分浏览器都给了我们几个非常好的工具：查看源代码和检查，通过这两个工具你能够快速了解其他人的代码是怎么写的。
https://cameronmoll.com/
这是我很喜欢的一个博客网站，很明显我的博客列表就是模仿他做的。对着某个元素，比如对这个图片右键，点击检查，就可以看到这个图片在html代码中的哪个位置（淡灰色的框）。中间一栏是它的相关CSS代码样式。再右边则是这个元素的各种属性。
观察别人的仓库——拿来吧你
搭建Github Pages的不只有你，还有其他博客同好；除此之外，还有许多教学用的模版。如果你看到喜欢的博客是以.github.io结尾的，那么说明这个博客是由Github Pages搭建的，你就可以到相应的仓库（前面教你的仓库名还记得吗？）clone它到本地，研究研究。
用人话讲讲Github Pages和Jekyll怎么用
博客网站固然酷，但是平常写博文怎么可能都写html代码？这就不得不提到Jekyll，它可以帮助你将markdown这样的笔记文件转换为html代码。
这里是官网的地址，但是小白肯定没办法快速听懂。
https://jekyllrb.com/
https://jekyllcn.com/ 这个网站是中文的翻译版
怎么把markdown笔记转换成html?
很简单，在仓库根目录下建一个_posts文件夹，然后创建你的markdown笔记，命名为年-月-日-标题.md（比如这篇就是2025-04-11-How-to-make-a-website-like-this.md）。写好笔记，然后在最顶部写上yaml代码（比如你现在看到的这篇博客的代码）就可以了：
---
layout: post
category: tech
permalink: /blog/2025-04-11-How-to-make-a-website-like-this
title: 从零打造博客网站（入门篇）
excerpt: "了解如何从零开始构建一个简单的博客网站，掌握基础的HTML、CSS和JS编程知识。我相信任何人都能通过这篇帖子学会用Github Pages快速搭建属于自己的博客网站。"
---
我来讲讲每行是什么意思：
layout定义了这篇博客的模版。为了应用一个模版，你需要在仓库根目录下建一个_layouts文件夹，然后在里面新建一个post.html，然后写一个包含content的代码，比如下面这样：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>{{ page.title }}</title>
</head>
<body>
{{ content }}
</body>
</html>
你应该也注意到title字段了。是的，头信息可以被读取从而展示，比如这里将title的信息作为博客的标签页标题。
category定义了这篇文章所属的类别，类似还有tag字段，不同的是：一个博客只有一个category，但是可以有很多个tag。比如：
category: tech
tag: website,html,css,javascript
这些信息能够通过展示，让读者更快了解文章大致的内容，也能实现在一个页面筛选博客，从而快速查找。
permalink定义了这个博客的网址。比如permalink: /blog代表着这个页面的网址是knight-de-ficus.github.io/blog
title定义了标题。excerpt定义了博客的简介。
最后，你可能会疑问这些字段是否都要写。不是的，你可以什么都不写，就像这样：
---
---
只是，你生成的网页没有模版，其他的页面也无从知道这篇文章的标题以及其他信息。你也就无法构建一个展示全部博客的页面。
构建一个“全部博客”页面
通过jekyll内置的liquid语言，你可以指挥jekyll做遍历的操作，这就为构建这样的一个页面提供了可能性。
比如展示所有博客的标题和时间：
<post-list class="posts">
{% for post in site.posts %}
<a href="{{ post.url }}" title="{{ post.title }}">
<post-title>{{ post.title }}</post-title>
<span>{{ post.date | date_to_string }}</span>
</a>
<hr>
{% endfor %}
</post-list>
遍历_posts文件夹，读取每个文件的yaml头信息，展示其标题和时间，然后加入超链接导向博客的网址。
此外还可以做其他操作。比如我的网站实现随机背景图时，获取背景图片的列表
{% for file in site.static_files %}
{% if file.path contains 'background' %}"{{ file.name }}",{% endif %}
{% endfor %}];
榨干jekyll的价值
理论上，学到上面两个就可以搭建和我一模一样的网站了。不过我相信每个人都有每个人独特的需求，academicpages.github.io展示了原版jekyll的每一个功能，充分利用github pages。如果你可以搭建自己的服务器并部署jekyll，你甚至可以自定义编译器，加插件（不幸的是，github pages不支持加插件）
https://github.com/hankquinlan/hankquinlan.github.io
https://github.com/academicpages/academicpages.github.io
你和别人看到的是一样的吗？
我们通常（我猜也只能）用电脑写代码、部署和观察网页，但是看你网页的其他人却不一定。如果你希望一个元素在各种设备上都能正常显示的话，就要在分辨率有所变化的时候改变相应的代码，比如这个网站的标题栏针对不同宽度会有相应的变化。
后记
我的前端技术在程序员中只是刚入门的水平，但是我在从零到一这个过程中踩了不少坑，真心希望其他小白能通过这个博客少走弯路。进步，进步，还是该死的进步。我相信不断地学习能够把我带到更高的高度。
闽公网安备35010202002121号