简介
免费版的主要采用Github托管，我也只用过这个
工具
Github
templates
HTML
Font | Awesome
Jekyll
1、🎨概述
不知道什么时候开始上的网多了，也就想要自己的网站，于是去找了很多教程和方法，最开始就是简单的在notion上用自己的分享页面，后来就不满足了，notion的样式太少，还要依赖于notion本体，不能自定义域名；尝试过热铁盒服务的自助建站，后面它要收费不得我心；最后看了很多教程决定用GitHub的网站托管服务，也就是GitHub-Pages
本篇文章仅讲述如何建站，设置仓库，查找资料、内容修改等；不包括域名方面的讲解；有关于域名方面的讲解会单独再出一篇文章来进行说明，详情参考
域名2、🎨GitHub建站
GitHub是微软旗下的一款Git管理社区，其内容涵盖特别广泛，很多有名的开源项目都在这个社区里，在没有付费的情况下智能创建公开的仓库，在电脑没有安装Git的前提下上传的限制是20MB，支持的语言很多，可以和VS Code无缝衔接，其推出的网站托管功能是大部分囊中羞涩的人的首选，Github有网页端、客户端等，网页端的功能是比较全的
在国内因为GFW的影响，Github网站有的时候可能打不开，但时期建造的站点可以打开，可以通过修改DNS或者翻墙的方式来访问GitHub
2.1 准备工作
首先要明确主题，想要做一个什么样的网站？
是产品说明？个人博客？聊天系统？购物商店？起始页……
找到自己想要建造的网站之后，就要选择以什么样的方式搭建，是以html为主的网站还是夹杂着JavaScript等语言等高阶一点的网站，更或者是用hexo的大量可自定义的模板来搭建，又或者依靠GitHub自带的 Jekyll 通过修改markdown内容来搭建自己的小站
无论选择什么样的方式，第一步要准备好自己的文案、音视频等媒体资源等，在脑中构建一个大概的轮廓，如果是用 Jekyll 方式的话较为简单，在最后再统一讲解
在这里由于我是小白，所以我推荐比较传统又比较好用的html模式，可以选择自己从头写到尾，也可以选择去网上找模板，又或者是去找一些资源库一边自己写，一边添加部分模板组件，比如卡片和样式，在本文就采取 查找模板——修改模板——发布网站 的方式来介绍搭建网站的流程，我们的设备有手机、电脑等，屏幕尺寸大小不一，建议大家选择相应式的模板，以便于在不同的设备上都能自适应显示比例
2.2 模板选择
首先分享几个找模板的网站：
站长素材：https://sc.chinaz.com/moban/ 模板王：http://www.mobanwang.com/mb/ templatemo：https://templatemo.com/ HTML5up：https://html5up.net/ weebly：https://www.weebly.com/ 网页模板：https://www.webmoban.net/
选中后下载，会得到一个zip的压缩包，解压后一般有：
- 他们的宣传页面（不用管删了）
- 四个文件：assets：存放css、images、js、fonts
- 四个文档：index.html、contact.html、services.html、about.html
相关术语介绍：
- css：存放css文件，css文件是网页的修饰设定，调整颜色、字体等内容，一般不用修改
- images：存放网页内的图片内容，一般采用<img src="url/目录位置" alt="图片加载失败时显示的文字">来引用图片，加上相应的参数可以调整大小等
- js：存放JavaScript脚本，负责网页内元素的动态等问题
- fonts：字体文件或者是内部元素相关引用文件
- 四个文档自己翻译一下就知道了，是王爷的文字部分
2.3 修改模板
首先分享几个需要用到的素材的网站：
Font | Awesome(图标网站，外部库)：https://fontawesome.com 3D代码：https://alteredqualia.com/ 样式：https://alteredqualia.com/ 图标调节：https://neumorphism.io/#e0e0e0 CodePen：https://codepen.io/
简单修改
一般情况下我们只需要对.html的文件进行修改，文本内容直接进行替换，图片内容在images文件夹里换成一样的名字后替换，期间可能需要用到一点的html知识，去网上搜索简单的教程即可，推荐菜鸟教程
进阶修改
依靠简单修改只能对内容做最低限度的修改，其他的时候想要附加上自己的LOGO，一些twitte、Facebook的图标需要更换，一些样式库需要更改就需要一些进阶的操作
在font | awesome 网站里有免费的图标库，按照操作就可以进行最大限度的自定义修改；在CodePen和样式里可以选取表单、卡片等的样式进行更换；在这个过程需要了解一些html的深度操作，css文件等，可以通过调用他人的外部库来实现深色模式一键切换等
2.4 上传GitHub
在本地做好的文件，只有上传到互联网获得公网IP后才可以被大家所访问到，GitHub注册好之后新建一个仓库，仓库名命名为 用户名.github.io 这样就可以通过这个网站来对你的站点进行访问，算是GitHub自带的托管服务；将本地做好的文件直接上传到Github新建好的仓库里
3、🎨其他建站
Gitee
没啥好说的，国内的Github，隶属于阿里巴巴，但是吃相不好看，操作上和GitHub没有区别，界面都模仿得很像，但是发布网站需要实名制，看自己情况选择吧，国内的访问速度肯定快，收费项目也挺多
hexo是网上比较热门的一种通过模板的方式，安装相应的软件就可以实现可玩度很高的个人网站，以博客为主，依靠于Node.js，支持Markdown，一键即可部署到Github，比自己建站要高一点技术门槛，但是也不难，教程也很多，做好的真的很好看，一次部署，后面修改很简单
除了官方提供的模板之外，在GitHub社区也有很多人自己做的模板，例如，由于本来就依赖于Github，所以玩法差不多，也可以自动生成域名，也可以自定义域名等
类似于GitHub，更加美观，自由程度一般，很适合用来给产品做说明文档，用的好的话也是一个非常好的站点仓库，对于小白来说是一个非常好的建站工具，界面美观，操作方便，对于自己自定义域名也是非常方便的，Gitbook，最优秀的地方在于，他可以设置不同的界面，相互之间上一页下一页做的非常完美，完全不需要考虑代码问题是十分理想的工具，对于侧边栏的适应非常好
wordpress
wordpress是专门的网站、博客搭建服务提供商，有两种类型，一个是WordPress.com另一个是 WordPress.org ；
前者是单独的网站，用户可以像制作PPT一样的制作属于自己的网站，也有一些官方提供的模板可选，也有一些自己制作的一些模板，可完成度非常高，不付费的情况下也可以实现基本要求，还可以看到访问量统计
后者是一个开源社区，提供框架，没有限制，可扩展性极强，不存在收费问题，很多有趣的网站都是基于wordpress制作的，还可以自定义域名
Notion等
这里以notion为例，其他的wolai、语雀等可以分享页面的都可以参考这个方法，如果不嫌网址长或者转换后的短连接奇怪就可以直接用这些工具，除了自定义程度不高之外，其余的比作ppt还简单，不需要任何代码知识，详见如下：
Notion建站 内部可以选择新建Product来选择模板生成项目，也可以导入GitHub的项目，其生成的项目会保存在你的GitHub或者GitLab里，所以在Github内的操作和上面的一样，但是服务器在国外，国内访问会有点卡，可自定义域名
操作上类似于Vercel，参照Vercel就行，没啥好说的
这个值得说一下，这个需要下载个软件，可以独立构建博客、笔记，可自定义域名，也提供自定义域名，有很多模板可以选择，支持Markdown编辑，全球CDN加速，虽然收费但是不贵，将创作的过程简化了，使人能够更加集中与创作的内容本身，6原/月，免费试用14天
这个和wordpress差不多，但是更加专注于创作的自由度，审美挺高的，提供不同风格的元素和配色、字体，可以自由拖动、排列元素提供域名；缺点就是收费有点贵，不交钱的话，站点有wix的logo、广告
国内一些云服务器
国内的比如阿里云、腾讯云、百度云（不是网盘）、华为云等，都提供有建站服务，更加符合中国人的习惯，算上域名如果不买热门的域名的话每个月几十块钱的样子，服务比较顺畅，挺方便的，一键在国家工信部进行登记
各种生成器
.png?table=block&id=cf0edfc3-1c50-4aa1-877e-26d5bdf9dfae&t=cf0edfc3-1c50-4aa1-877e-26d5bdf9dfae&width=800&cache=v2)
