前端小白如何搭建精美的个人网站（blog)

导语：这一期图图来聊聊一个前端小白如何搭建精美的个人网站（blog）。在此之前，先看图图的成品。https://sjtu-tutu.github.io/tutu/，最好是edge或者谷歌浏览器访问！

不是程序员？没关系！不想花钱买云服务？没关系！看完这一系列的推送你就有能力创建并维护一个精美的个人门户网站了。你可以在上面上传自己的笔记，设置自己的在在线简历，制作自己的网址导航……Los geht’s!

1. 一些铺垫

通常创建网站需要[1]购买域名、[2]购买服务器、[3]花一堆时间了解Linux…..但这些在图图的教程里都不需要！甚至只用记事本(简单的.MD语言文件就行（推荐有道云笔记书写，但是这一篇里还用不到，所以可以忽略)就可以快速构建自己的网站，唯一依赖的工具就是github的免费托管。想必不少人对github既熟悉又陌生吧，我们先从它开始吧！

2. 注册登录与创建仓库

访问网址是:https://github.com/git

现在国内已经可以正常访问，但是速度稍微有点慢，有各种各样的插件提速，但是确实不存在特别好的解决方案。首先需要注册一个github账号，这个教程就跳过吧，没啥好说的，直接从注册成功开始。成功后登录应该会出现这样的页面：

我们点击your repositories(个人存储仓库)进入； 接着点击New新建一个个人仓库，只写名字Repository name，其他全部采用默认值，点击creat!

3. 书写主页

之后返回找到刚刚创建好的仓库，它现在还是空的，进去后点击creating a new file，文件名称用index.html或者index.md,不要用其它名字，因为这个是我们网站的主页，在里面写上Hello world 保存（拉到最下方的commit按钮）。

4. 发布网站

然后点击右上角的settings，这是将我们托管在个人仓库中的网站文件 (目前就是一个简单的不能再简单的Hello world)打包发布，和一个网址关联。 找到Github pages,将文件路径改为 master与roots,再点击save即可出现网址！直接点击网址或者复制到浏览器地址栏就能直接外网访问了哈！注意：更新index.html文件后网站不会立即同步，需要ctrl+F5多刷新几次。

赶紧去试试吧~大家有兴趣的可以自学一下Markdown语言，上手非常容易！一个小时肯定就会了，不会再学！学会了在index.html里书写会十分轻松。当然会.JS和.CSS的另当别论，但是图图不想搞得那么复杂啦，比较也不是程序员~下一期预告：说说用MD制作一个个人导航吧！

最后附上本篇推送的MD源码，大家直接复制到上文提到的index.md(注意因为是用MD写的，要改成.md后缀)，看看效果~

>**这一期图图来聊聊如何搭建美观的个人网站**。不是程序员？没关系！不想花钱买云服务？没关系！看完这一系列的推送你就有能力创建并维护一个精美的个人门户网站了。你可以在上面上传自己的`笔记`，设置自己的在`在线简历`，制作自己的`网址导航`......Los geht's!

# 1. 一些铺垫


通常创建网站需要**[1]购买域名**、**[2]购买服务器**、**[3]花一堆时间了解Linux**.....但这些在图图的教程里`都不需要`！甚至只用记事本(简单的.MD语言文件就行（推荐`有道云笔记`书写，但是这一篇里还用不到，所以可以忽略)就可以快速构建自己的网站，唯一依赖的工具就是`github`的免费托管。想必不少人对`github`既熟悉又陌生吧，我们先从它开始吧！

# 2. 注册登录与创建仓库
>访问网址是:https://github.com/git

现在国内已经可以正常访问，但是速度稍微有点慢，有各种各样的插件提速，但是确实不存在特别好的解决方案。首先需要`注册`一个github账号，这个教程就跳过吧，没啥好说的，直接从注册成功开始。成功后登录应该会出现这样的页面：

![登录成功页面](https://7475-tututong-1302752799.tcb.qcloud.la/MD%E5%9B%BE%E5%BA%8A/msedge_w0oNdFnwBm.png?sign=6b89a08919afff4c28955455086d8953&t=1596583587)

我们点击`your repositories(个人存储仓库)`进入；
接着点击`New`新建一个个人仓库，只写名字`Repository name`，其他全部采用默认值，点击`creat`!

![](https://7475-tututong-1302752799.tcb.qcloud.la/MD%E5%9B%BE%E5%BA%8A/3.png?sign=6b4b9a7271bff38b1f6ac5b6227e0bd0&t=1596583665)

![创建仓库界面](https://7475-tututong-1302752799.tcb.qcloud.la/MD%E5%9B%BE%E5%BA%8A/5.png?sign=8929502f0a513c992c30d8d23d716743&t=1596583357)

# 3. 书写主页

之后返回找到刚刚创建好的仓库，它现在还是空的，进去后点击`creating a new file`，文件名称用**Index.html**,不要用其它名字，因为这个是我们网站的主页，在里面写上Hello world 保存（拉到最下方的`commit`按钮）。

![](https://7475-tututong-1302752799.tcb.qcloud.la/MD%E5%9B%BE%E5%BA%8A/msedge_ujcNO5143V.png?sign=9ace7127e024d681dba61c0f7e843b48&t=1596583515)

![创建主页界面](https://7475-tututong-1302752799.tcb.qcloud.la/MD%E5%9B%BE%E5%BA%8A/msedge_8Xujwn5lJy.png?sign=faa2291405dd0cfb72b8799e564e16d7&t=1596583882)

![提交保存按钮](https://7475-tututong-1302752799.tcb.qcloud.la/MD%E5%9B%BE%E5%BA%8A/msedge_O2Of5lmFul.png?sign=40a1096ba8a5d2bf6fd9ecdccbf592d6&t=1596583942)

# 4. 发布网站

然后点击右上角的`settings`，这是将我们托管在个人仓库中的网站文件
(目前就是一个简单的不能再简单的Hello world)打包发布，和一个网址关联。
找到`Github pages`,将文件路径改为
`master`与`roots`,再点击save即可出现网址！直接点击网址或者复制到浏览器地址栏就能直接外网访问了哈！

![修改路径](https://7475-tututong-1302752799.tcb.qcloud.la/MD%E5%9B%BE%E5%BA%8A/msedge_kScy6aKWyb.png?sign=e3526261a1a37f756ee33cd82de4bc22&t=1596584201)

![获得网址](https://7475-tututong-1302752799.tcb.qcloud.la/MD%E5%9B%BE%E5%BA%8A/msedge_qNs08sXjIS.png?sign=60c0cddbbb2fcd841c1de1e22476bdb5&t=1596584063)

![访问成功](https://7475-tututong-1302752799.tcb.qcloud.la/MD%E5%9B%BE%E5%BA%8A/msedge_I3VGiW8M37.png?sign=6f31f6291c5071f6d661f16dd7582c65&t=1596584254)

赶紧去试试吧\~大家有兴趣的可以自学一下`Markdown`语言，上手非常容易！一个小时肯定就会了，不会再学！学会了在index.html里书写会十分轻松。当然会.JS和.CSS的另当别论，但是图图不想搞得那么复杂啦，比较也不是程序员~下一期预告：说说用`MD`制作一个个人导航吧！