完全从零搭建简单个人网站(免费无需服务器无需域名)个人博客网站,个人简 ...

农民  金牌会员 | 2025-1-11 12:23:18 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题

主题 820|帖子 820|积分 2460

这是我的个人网站堆栈地点地:GitHub - liaoyanqing666/liaoyanqing666.github.io: 简单的个人简历网站模板, Simple CV website template
这是作者的网站:liaoyanqing666.github.io
这个博客包管文科生来了都能做出本身的个人网站,总花费10分钟左右。

无需会编程,无需会任何前置知识。学会了帮助给我的github项目点个star。
简单来说就是使用github提供给每个账户的免费github.io域名及对应的支持
以下是详细的步骤:

首先先创建本身的github账户


创建本身的网站堆栈

方法1:从作者的网站模板中修改(推荐小白使用)


  • 打开 作者的个人网站堆栈地点地:GitHub - liaoyanqing666/liaoyanqing666.github.io: 简单的个人简历网站模板, Simple CV website template
  • 找到并点击页面右上角的 Fork 按钮。(顺手点击一下旁边的star按钮 感谢)

  • 通过 Fork,你将复制这个项目堆栈到你本身的 GitHub 账户下。这样你可以在这个项目的基础上做出修改,而不影响原始项目。
  • 在 Fork 完成后的新页面中,找到 Repository name 输入框。这里你必要填写 "你的 GitHub 用户名.github.io"。比如你的 GitHub 账户名是 ABC123,那么此处填写 "ABC123.github.io"。



  • 留意:这个命名格式很重要,因为 GitHub Pages 使用这个命名规则来自动创建和托管你的网站。
  • 其他选项可以保持默认,Description 根据个人需求填写即可(这是对项目的简要说明,可以随时修改)。
方法2:直接创建空堆栈
创建一个堆栈,并命名为 "你的 GitHub 用户名.github.io"。比如你的 GitHub 账户名是 ABC123,那么此处填写 "ABC123.github.io"。留意创建一个index.html文件,否则网页天生时会根据README.md进行天生。

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



  • 打开你项目的 GitHub 页面,点击顶部的 Settings 选项。
  • 在左侧菜单中找到 Pages 并点击进入。



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



  • 等待几秒到几分钟,刷新 Pages 页面。页面顶部会显示一个网址,这个网址就是你的网站地址!

编辑堆栈中的内容

如果选择Fork 堆栈后,你将看到多个文件,其中包括 index.html、styles.css 等关键文件。我们必要编辑这些文件来自定义你的网站内容。
1. index.html:这个文件是你网站的主页内容文件。打开网址后,用户看到的就是这里面的内容。你可以根据本身的必要,在这里修改文字、图片以及其他内容来个性化网站。
2. styles.css:该文件定义了网站的样式和外观,比方背景颜色、文字巨细、排版等。如果你对默认的外观感到满足,可以跳过此部分。如果想要个性化设计,可以修改文件中的样式规则,轻松改变网站的颜色和结构。
3. 其他文件:提供一些基础功能和开源允许等,无需修改。
4. CNAME:该文件用于设置自定义域名。如果你有本身的域名并想将它与 GitHub Pages 关联,则可以保留此文件并进行相应设置。如果你不打算使用自定义域名,请务必删除此文件。删除方法如下:


  • 打开 CNAME 文件,点击页面右上角的“三个点”图标,选择 Delete file
如果选择创建空堆栈,仍旧参考上述形貌。

接下来介绍怎么详细修改文件内容
方法1:直接在github上修改(只推荐完全不会编程的小白使用)


  • 如果采用这个方法,必要完成“摆设网站”的内容才气进行
  • 在项目堆栈中打开index.html,并同时打开刚刚摆设好的网站,接着对照着网站上必要修改的内容,再在html中修改。必要生存时,就提交此次更改(右上角commit changes)。过十几秒左右,github就会把刚刚的更新同步到你的网站上,此时刷新即可。
  • 更换并删除所有不必要的内容后,就完成了内容的更改。
  • 对于文件夹中的图片和文件,如果有相关内容,就更换并上传本身的内容进行更换;如果没有,则删除该文件的同时,也在index.html中删除引用到此文件的部分(直接搜刮文件名就行)
方法2:本地修改网页内容


  • 点击右上角绿色code按钮,clone本身的堆栈到本地(不会clone请自行搜刮)。如果不会clone也可以使用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 ⭐

免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。
回复

使用道具 举报

0 个回复

倒序浏览

快速回复

您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

农民

金牌会员
这个人很懒什么都没写!

标签云

快速回复 返回顶部 返回列表