软件教程 2025年08月6日
0 收藏 0 点赞 923 浏览 2094 个字
摘要 :

文章目录 Step 0. 准备工作 Step 1. 建立博客仓库 Step 2. 修改仓库文件 修改 README.md文件 修改 _config.yml 文件 网站名称和网站描述 个人头像和网站 logo 个人社……




  • Step 0. 准备工作
  • Step 1. 建立博客仓库
  • Step 2. 修改仓库文件
    • 修改 README.md文件
    • 修改 _config.yml 文件
      • 网站名称和网站描述
      • 个人头像和网站 logo
      • 个人社交链接
      • 脚注和网址
      • 其他
    • 删除 _posts 文件夹并重建
    • 删除 images 文件夹并重建
    • 修改 about.md文件
  • Step 3. 开始写你的第一篇文章
  • 总结

你想知道如何使用github.io免费搭建自己的个人博客网站吗?不需要花钱买域名也不需要花钱买服务器,就能免费搭建一个属于自己的个人博客站!

本教程只针对不了解网站搭建并且想要快速搭建起个人博客的新手,帮助建立网站的平台有很多,有一定网站开发基础的读者可另寻门路。

Step 0. 准备工作

利用 GitHub Pages 免费获取你自己的网站域名只需要一个先决条件:拥有你自己的 github 账号。如果你目前还没有,可以去 GitHub 官网先注册一个。

Step 1. 建立博客仓库

借助 GitHub 平台搭建博客网站,首先要建立一个与你的 github 账号相关联的博客仓库。推荐没有网站建设经验的新手通过 fork 我的博客仓库迅速建立起你的第一个网站。下面我们就来详细介绍这种方法。

点击链接 https://github.com/pianfan/pianfan.github.io 进入我的博客仓库地址,点击这里的 Fork。如何使用github.io免费搭建自己的个人博客网站

点击 Create fork,完成创建。这样你就有了你的第一个博客仓库,以后的操作都在你自己的仓库进行。

Step 2. 修改仓库文件

如果这时你在浏览器网址一栏搜索你刚刚建立的仓库名,出现的会是我的博客页面。因为你刚才是直接复刻的我的博客仓库,里面的文件都是我原来仓库里的文件。你需要修改几个文件里的几个最基本的地方,来使页面与你的个人信息相关联。

修改 README.md文件

README.md文件是对仓库的说明,一般来说第一行标题都是仓库名称,后面就是关于仓库的一些介绍。我只填写了最简要的说明,你可以根据你自己的情况来写,或者不写也可以,它并不影响我们的网站页面。

要修改文件可直接点击文件名称,然后点击右上角的笔图案,即可开始编辑。如何使用github.io免费搭建自己的个人博客网站

.md 文件是 markdown 文件,使用的是 Markdown 语言。这一易学易用的语言将 HTML 里的一些常见标签都用带有特殊含义的符号来表示,大大方便了文档的书写,而且对代码类文本的支持度很高,因此深受程序员的喜爱。我们的博客文章也需要用 Markdown 进行写作。如果你还不了解这个语言,可以去看菜鸟教程,非常简单。

github 支持对 markdown 文件进行预览。当在 github 上对 markdown 文件进行编辑的时候,点击 Edit 旁边的 Preview,即可预览当前的页面效果。这在编辑过程中经常用来检查文章排版是否符合预期。如何使用github.io免费搭建自己的个人博客网站

修改 _config.yml 文件

_config.yml 文件是博客网站的核心配置文件,里面包含了你想要显示在网站上的各种构造信息。下面我会一步一步告诉你哪些信息需要改。

网站名称和网站描述

如何使用github.io免费搭建自己的个人博客网站

这个根据你自己的喜好来设置,不一定要仿造我的模式。比如你可以给你的博客网站取一个好听点的名字,网站描述也可以是简短的自我介绍或个性签名等任何你想表达的内容。

个人头像和网站 logo

如何使用github.io免费搭建自己的个人博客网站

avatar 代表头像,后面的链接是你想显示在页面的头像图片的 url。favicon 指网站图标,即显示在浏览器标签页和收藏夹里的 logo,通常以 32 * 32 像素大小的 .ico 图片为宜,也可以不设置。

咱博客网站里的所有图片不是上传到 github 仓库里就可以显示到页面上了,需要用到图床。我用的是 PicGo,只要与 github 仓库绑定就可以实现上传,且可以一键复制为 Markdown 形式,方便写文时插入图片。如何使用github.io免费搭建自己的个人博客网站如何使用github.io免费搭建自己的个人博客网站

个人社交链接

如何使用github.io免费搭建自己的个人博客网站

填用户名就可以,没有的就不填。

脚注和网址

如何使用github.io免费搭建自己的个人博客网站

其他

如果你不知道改了之后会有什么后果,不要去动它。

删除 _posts 文件夹并重建

_posts 文件夹里放的是博客文章,你以后的文章也要放在这里。现在你的_posts 文件夹里面放的还是我的文章,请把它们全部删除,以免造成侵权。

删除 images 文件夹并重建

修改 about.md文件

about.md里的内容是展示在“关于”页面上的。

好了,以上就是所有必须要你修改的文件。你现在再点进去你的博客页面看看,不出意外的话应该是成功修改了的。

Step 3. 开始写你的第一篇文章

在 README.md部分我有提到过怎么在 github 上编写 Markdown 文件,写文章也是一样的道理。

文章文件的命名也是有讲究的,请按照下面的例子呈现的格式命名:

2024-1-25-letter_to_you.md
2024-1-26-user_manual.md

还有一点需要注意,每篇文章开头记得附上说明,格式如下:

---
layout: post
title: \"文章标题\"
date:   2024-1-27
tags: [tag1, tag2]
comments: true
author: xxx
---

date 是写作日期,注意格式必须遵守 YYYY-MM-DD 才可以。

tags 是文章标签,可以有一个或多个。

总结

现在你学会如何使用github.io免费搭建自己的个人博客网站了吗,快来试试吧!

微信扫一扫

支付宝扫一扫

版权: 转载请注明出处:https://www.zuozi.net/6722.html

管理员

相关推荐
2025-08-06

文章目录 一、Promise基础回顾 二、Promise 与 axios 结合使用场景及方法 (一)直接返回 axios …

269
2025-08-06

文章目录 一、模块初始化时的内部机制 二、常见导出写法的差异分析 (一)写法一:module.exports…

107
2025-08-06

文章目录 一、ResizeObserver详解 (一)ResizeObserver是什么 (二)ResizeObserver的基本用法 …

683
2025-08-06

文章目录 一、前期准备工作 (一)下载相关文件 (二)安装必要工具 二、处理扣子空间生成的文件…

338
2025-08-06

文章目录 一、官方文档 二、自动解包的数据类型 ref对象:无需.value即可访问 reactive对象:保持…

371
2025-08-06

文章目录 一、Hooks的工作原理 二、在if语句中使用Hook会出什么岔子? 三、React官方的Hook使用规…

843
发表评论
暂无评论

还没有评论呢,快来抢沙发~

助力内容变现

将您的收入提升到一个新的水平

点击联系客服

在线时间:08:00-23:00

客服QQ

122325244

客服电话

400-888-8888

客服邮箱

122325244@qq.com

扫描二维码

关注微信客服号