对于很多刚学前端的朋友们来说(比如我),在学习的过程中经常会记一些笔记,除了现实中的烂笔头,我们也可以在PC上记笔记、写总结,下面分享一些或多或少会用上的网站或工具。
脑图类:Xmind、百度脑图... 总结类:CSDN、简书、segmentfault、博客园...
当然,也有不少朋友们想拥有一个属于自己的博客,学会走路再学跑步,下面将简单暴力的教你搭建(拷贝)一个博客。我们的准备如下:
如果以上的都没有,我们可以按照顺序来,文章如有粗俗的例子,请见谅。
首先我们要先理解域名的作用,我们浏览器之所以能搜索不同的网站,都是通过域名来让别人访问的,一个简单通俗的例子:我网购了一件商品,快递员需要知道我家的地址才能给我送快来,而这个地址就是我们的域名。 注册域名也很简单,这里以腾讯云为例,通过菜单找到域名注册。
然后搜索一个你喜欢的域名,查询下是否以被注册,域名的话建议使用英文,如果我们要往下走,必须选择英文域名,此处为了做教程,我选了个很霸气的域名(反面教材)。
这里腾讯会像一个贴心小棉袄一样问你价格是否接受得了,接受不了就换一个后缀吧,接下发挥你网购买买买的能力。
购买完成后一般会有提示框让你去查看自己的订单,没的话通过 导航-费用-我的订单 进入即可。
找到域名管理,进入域名管理的控制台。
到下面这一步可能会提示需要实名认证,这里不存在一个人只能注册购买一个域名的问题,当然不实名也能继续用,只是有些操作会被限制。
域名到这里就先暂告一段落,后面将会用到操作中的-解析。
学前端的怎能不会使用git呢,GitHub作为全球最大的代码托管(同性交流)平台,大牛发声,无数码农尽折腰!
GitHub官网:https://github.com/ GitHub秘籍:https://www.zhihu.com/question/20070065 上面的GitHub教程可能会与目前GitHub的界面有点不同,其道理相同,或者往下拉,看看别的回复帖子,也有新版的教程,这里GitHub的教程会相对庞大,懒惰的我就不重复教了,见谅。
如果你看到这,你还没有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知识是否足够,如果你对你的百度很自信,那么接着走。
首先我们要清楚问题所在,回到页面上,我们按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这个配置文件,与里面数据的交互式如何实现的,相信你会有个较大的提升!我也搭建(copy)了一个属于自己的临时博客,各位渣油!!
原文链接:http://www.imweb.io/topic/5a5a3cf9a192c3b460fce3e5