建站知识 - 独立站SEO建站专家 - 深圳网站建设技术

免费个人网站模板,完全从零搭建简单个人网站(免费,无需服务器无需域名)个人博客网站,保姆级教程

这是我的个人网站仓库所在地:GitHub – liaoyanqing666/liaoyanqing666.github.io: 简单的个人简历网站模板, Simple CV website template

这是作者的网站:liaoyanqing666.github.io

这个博客保证文科生来了都能做出自己的个人网站,真正的保姆级教程,总花费10分钟左右。

无需会编程,无需会任何前置知识。学会了真心希望帮忙给我的github项目点个star,作为对开源作者的一种支持。如果用不上,可以先star或者收藏,等需要/有空的时候再来做。

简单来说,就是github会免费提供给每个用户静态网页的支持,使用github.io域名

以下是具体的步骤:


首先先创建自己的github账户


创建自己的网站仓库

方法1:从作者的网站模板中修改(推荐这种方法)

  • 通过 Fork,你将复制这个项目仓库到你自己的 GitHub 账户下。这样你可以在这个项目的基础上做出修改,而不影响原始项目。

  • 注意:这个命名格式很重要,因为 GitHub Pages 使用这个命名规则来自动创建和托管你的网站。

  • 其他选项可以保持默认,Description 根据个人需求填写即可(这是对项目的简要说明,可以随时修改)。

方法2(不建议):直接创建空仓库

创建一个仓库,并命名为 “你的 GitHub 用户名.github.io“。比如你的 GitHub 账户名是 ABC123,那么此处填写 “ABC123.github.io“。注意创建一个index.html文件,否则网页生成时会根据README.md进行生成。


部署你的网站(和编辑内容顺序不分先后)

  • 打开你项目的 GitHub 页面,点击顶部的 Settings 选项。

  • 在左侧菜单中找到 Pages 并点击进入。

  • Branch 选项中,将 None 改为 main,并点击保存。

  • 等待几秒到几分钟,刷新 Pages 页面。页面顶部会显示一个网址,这个网址就是你的网站地址!(一般就是你的 GitHub 用户名.github.io,此时你把这个网址复制到新标签页打开,就可以看到你自己的网站了。)


编辑仓库中的内容

如果选择Fork 仓库后,你将看到多个文件,其中包括 index.htmlstyles.css 等关键文件。我们需要编辑这些文件来自定义你的网站内容。

1. index.html:这个文件是你网站的主页内容文件。打开网址后,用户看到的就是这里面的内容。你可以根据自己的需要,在这里修改文字、图片以及其他内容来个性化网站。

2. styles.css:该文件定义了网站的样式和外观,例如背景颜色、文字大小、排版等。如果你对默认的外观感到满意,可以跳过此部分。如果想要个性化设计,可以修改文件中的样式规则,轻松改变网站的颜色和布局。

3. 其他文件:提供一些基础功能和开源许可等,无需修改。

4. CNAME:该文件用于配置自定义域名。如果你有自己的域名并想将它与 GitHub Pages 关联,则可以保留此文件并进行相应配置。如果你不打算使用自定义域名,请务必删除此文件。删除方法如下:

  • 打开 CNAME 文件,点击页面右上角的“三个点”图标,选择 Delete file

5. track-visitors.js:该文件用于记录所有访问了我的网页的访客ip,并包含一定排除规则。这个的配置相对复杂,建议直接删除此文件。删除方法同上。

如果选择创建空仓库,仍然参考上述描述。

接下来介绍怎么具体修改文件内容

方法1:直接在github上修改(只推荐完全不会编程的小白使用)

  • 如果采用这个方法,推荐先完成“部署网站”的内容再进行

  • 在项目仓库中打开index.html,并同时打开刚刚部署好的网站,接着对照着网站上需要修改的内容,再在html中修改。例如需要修改教育信息,就找到index.html中的Education部分,之后手动修改一下相关信息。
    需要保存时,就提交此次更改(右上角commit changes)。过十几秒左右,github就会把刚刚的更新同步到你的网站上,此时刷新即可。

  • 替换并删除所有不需要的内容后,就完成了内容的更改。

  • 如果你觉得index.html中一条条修改看着头疼,就按照以下方法进行

    • 首先观察这个界面要保留哪些大板块,例如只保留教育和项目

    • 之后搜索需要删除的板块,例如Scholarships & Honors,把从前几行的<section>一直到下一个空行前的<\section>全部删除。

    • 对于要保留的板块,你就把自己的相关信息写好,之后复制 要保留的板块的整个section(同上)作为模板,找个大语言模型(例如kimi.ai)去询问,询问语句如下:
      [这里填写板块模板] 我需要编写我的个人网站,上面是所使用的html模板的格式,现在在填写[xxx,例如教育] 部分。下面是我的个人信息,请将我的个人信息填入到上方的模板中,如果条目数不同,则自行增减条目。不许编造信息,有信息不明确请提出。需要严格按照模板,不允许有超出模板的class。你的回复仅需包含从<section>到<\section>的部分,不需要包含完全的html。[这里填写你的个人信息]

    • 如果仍然看不明白,欢迎联系作者的QQ邮箱和QQ号(在README.md文件最后面)(开源精神全免费咨询)

  • 对于文件夹中的图片和文件,如果有相关内容,就替换并上传自己的内容进行替换;如果没有,则删除该文件的同时,也在index.html中删除引用到此文件的部分(直接搜索文件名就行)

方法2:本地修改网页内容

  • 点击右上角绿色code按钮,clone自己的仓库到本地(不会clone请自行搜索或者下面这种办法)。

    • 如果你不会clone操作但你会用vscode修改html,请使用这个方法:将我的所有文件下载到本地(选择download zip),在本地修改好后再将修改了的文件上传回你自己创建的仓库中。

  • 使用网页相关的IDE进行编辑,推荐使用VScode。在VScode左侧插件处,搜索Live Server插件并下载。之后在文件夹中打开html文件时,右键文件内容,选择Open with Live Server即可

  • 之后会弹出一个网页,这个网页会同步你在代码中保存的任何更改(VScode代码需要手动保存)。

  • 编辑完成后,如果是clone的,就直接通过VScode左侧的“源代码管理”进行提交即可(提交时那个框框里必须写东西)

  • 如果是下载ZIP的,就直接Upload files即可,把所有更改的内容拖进去提交即可。
    注意,如果涉及到了文件夹,由于github不支持创建空文件夹(也可能是我没找到办法),因此需要先创建一个名为“所需文件夹名称/临时文件”的文件(create new file),之后点开文件夹,再把需要上传的文件提交,之后再把临时文件删除。

现在,你可以通过之前生成的网址访问你的网站啦!此时,网站已经完全托管在 GitHub Pages 上,所有内容都来自你在仓库中的修改。你可以继续优化和更新这个网站,而 GitHub Pages 将自动更新所有内容。

希望这个教程对你有帮助!如果你遇到任何问题,欢迎留言或通过 GitHub/邮件提交问题。如果你觉得这个项目有趣,也别忘了给它一个 Star ⭐