新人如何搭建(copy)一个属于自己的博客
新人如何搭建(copy)一个属于自己的博客
本文作者：IMWeb mmo 原文出处：IMWeb社区 未经同意，禁止转载
对于很多刚学前端的朋友们来说（比如我），在学习的过程中经常会记一些笔记，除了现实中的烂笔头，我们也可以在PC上记笔记、写总结，下面分享一些或多或少会用上的网站或工具。
当然，也有不少朋友们想拥有一个属于自己的博客，学会走路再学跑步，下面将简单暴力的教你搭建（拷贝）一个博客。我们的准备如下
如果以上的都没有，我们 可以按照顺序来，文章如有粗俗的例子，请见谅
# 域名
首先我们要先理解域名的作用，我们浏览器之所以能搜索不同的网站，都是通过域名来让别人访问的，一个简单通俗的例子：我网购了一件商品，快递员需要知道我家的地址才能给我送快来，而这个地址就是我们的域名。 注册域名也很简单，这里以腾讯云为例，通过菜单找到域名注册
然后搜索一个你喜欢的域名，查询下是否以被注册，域名的话建议使用英文，如果我们要往下走，必须选择英文域名，此处为了做教程，我选了个很霸气的域名（反面教材）
这里腾讯会像一个贴心小棉袄一样问你价格是否接受得了，接受不了就换一个后缀吧，接下发挥你网购买买买的能力
购买完成后一般会有提示框让你去查看自己的订单，没的话通过 导航-费用-我的订单 进入即可
找到域名管理，进入域名管理的控制台
到下面这一步可能会提示需要实名认证，这里不存在一个人只能注册购买一个域名的问题，当然不实名也能继续用，只是有些操作会被限制
域名到这里就先暂告一段落，后面将会用到操作中的-解析
# GitHub
学前端的怎能不会使用git呢，GitHub作为全球最大的代码托管（同性交流）平台，大牛发声，无数码农尽折腰
GitHub官网：点我 GitHub秘籍：如何与直男打交道 上面的GitHub教程可能会与目前GitHub的界面有点不同，其道理相同，或者往下拉，看看别的回复帖子，也有新版的教程，这里GitHub的教程会相对庞大，懒惰的我就不重复教了，见谅
# jekyll与实现
如果你看到这，你还没有GitHub，我表示对你的耐心程度真的很失望，想空手搭博客是不可能的，建议去申请一个GitHub吧，因为jekyll是基于GitHub实现的。
基于jekyll的进阶会相对复杂，本文只对新手起作用，这里将教你简单的把一些博客模板拷贝下来，并加以修改，成为自己的专属博客
首先，我们先找一块自己喜欢的jekyll模板，这里介绍两个不错的网站：jekyllthemes、jekyll-themes，如果里面的模板并不满意，请自行谷歌百度jekyll模板... 这里我找了个不错的模板，下面教程将以此模板为例 模板样式：点击查看 GitHub项目地址：点击查看 第一步，fork项目，红箭头点击拷贝一份项目，红框更变为自己的用户名即为成功；注：如果你不想别人看到你的博客是拷贝别人，可点击黑箭头处，如果你是新人，不建议这么做
首选需要对我们frok的项目配置一下，点击设置Settings，并修改Repository name，意思为仓库名称，我们这里改为如下格式 XXX.github.io，其中XXX是你自己起的，但是.github.io一定要写上，最后点击Rename保存即可
说明一下：github给我们提供了一个免费的服务器，我们需要通过写上.github.io来开启，不然还要掏钱买呢
上面设置完后，我们可以通过浏览器输入，访问我们案例中的case.github.io仓库；当然，说了是个仓库，直接报错404，我们的仓库怎么能随随便便让不认识的人进来，偷走我们的货咋办，此时，我们需要一把打开新世界的钥匙
为了拿到钥匙，我们需用CMD命令行工具，不知道怎么打开CMD的自己百度去，然后ping一下我们的case.github.io，下面就会返回一串IP地址，大家可能ping到都不一样，这里以案例中返回的151.101.229.147为例，这就是我们需要的仓库大门钥匙
下面我将回到腾讯云，接着我欲言又止的解析操作，我们进入 操作-解析 后，点击新手快速添加，接着选择 网站解析，把我们ping到的IP地址填入，点击 确定 注意：由于github并不支持中文域名，我换了一个域名，图中的域名可能会不太一样
相信有部分朋友已经去尝试访问自己的域名了，接下来，他们肯定会遇到这么一个图，此时是否有一句，你他喵在玩我；当然，请继续往下看
我们现在只是拿到了一把钥匙，但是仓库根本就没有给你出示一把锁，接下来回到github项目，回到我们的设置，在下面找到一个名为Github pages的栏目，我们点击None，选择master branch，最后点击Save； 这些设置就好比我们要计划开启这个仓库
接下来我们还要给指定‘用户’展示一把锁，在上面的操作保存后，将会多一个Custom domain，在这里，我们将指定一个‘用户’，写上我们的域名，Save保存即可；接下来就可以正常的访问到我们的页面啦 有朋友可能会好奇，为啥我的域名是yiqunerbi.com前面还有一个域名，这就是域名分级的问题了，此处不做回答，有兴趣的朋友可以去查下，比如顶级域名，二级域名等相关关键词
相信各位访问自己的域名后，发现怎么跟对比不一样，怎么连样式都没有了，是不是想打我，还是冷静下来走下去吧
到这里，我们需要回到Github，把我们的项目clone下来，如果不懂，请回去学习下我们的秘籍，这里也顺便提供一个github的客户端，不想敲git命令的有福气了，当然我也相信能走到这里的朋友，git都多少掌握一点了 GitHub秘籍：如何与直男打交道 客户端：链接 当我们把项目给clone下来之后，就要进入到我们的HTML与CSS了
# HTML & CSS
下面的才是我们要动手术到的地方，请确保脑瓜中的HTML & CSS知识是否足够，如果你对你的百度很自信，那么接着走
首先我们要清楚问题所在，回到页面上，我们按F12打开控制台，接着进入眼帘是红DuangDuang的报错，我们将鼠标指着报错的地方，内容如下
上面我们得到了这一段内容
http://case.yiqunerbi.com/editorial-jekyll-theme/assets/cssmain.css其路径解读：http://我的域名/editorial-jekyll-theme/assets/cssmain.css 这里需要说明下github实现页面的原理，当我们开启github pages的时候，我们域名所访问的是对应其自己github下，博客仓库内根目录的index.html 既然我们能访问得到index.html，也就说明index的路径是正确的，我们可以用编辑器打开看看项目文件夹，然后与报错的路径做个对比
细心的朋友一下就发起了其中的端倪，浏览器在访问的样式链接根本就不存在
/editorial-jekyll-theme这个路径，其实，这是jekyll的配置问题 我们编辑器打开_config.yml，然后我们把罪魁祸首揪出来
接下来做点修改保存
baseurl: "/editorial-jekyll-theme" //原内容:罪魁祸首路径
//我们将他的值删除保存即可
baseurl: //修改后下面差不多是尾声啦，commit一下，push上去
刷新我们新 博客 页面，文章都这里差不多就结束了，当然，不少朋友心里有话想说：不是搭建一个属于自己的博客吗，这就是copy啊！！
最后的最后：我要说的是，剩下的HTML与CSS都要根据你自己想要的效果去实现，对于很多新人来说，可能会对项目文件夹里面十分的好奇，因为连index.html这个文件都找不到；此次文章，我也是埋了一个坑，也是希望大家不要光跟着做，下面我在分享一个相对友好的jekyll模板
https://github.com/arnp/herring-cove
根目录包含了index.html，且目录比较易读，只要清楚_config.yml这个配置文件，与里面数据的交互式如何实现的，相信你会有个较大的提升
这是jekyll的文档，不懂的多去搜索，网上资料挺多的
而我，也搭建(copy)了一个属于自己的临时博客 一个前端打字员的网站，各位渣油！！