推56论坛

 找回密码
 立即注册(限中文)

QQ登录

只需一步,快速开始

    查看: 277|回复: 0

    [博客推广] 新人如何搭建(copy)一个属于自己的博客

      [复制链接]
    发表于 2018-3-9 14:23:18 | 显示全部楼层 |阅读模式

      对于很多刚学前端的朋友们来说(比如我),在学习的过程中经常会记一些笔记,除了现实中的烂笔头,我们也可以在PC上记笔记、写总结,下面分享一些或多或少会用上的网站或工具。
      脑图类:Xmind、百度脑图...
      总结类:CSDN、简书、segmentfault、博客园...
      当然,也有不少朋友们想拥有一个属于自己的博客,学会走路再学跑步,下面将简单暴力的教你搭建(拷贝)一个博客。我们的准备如下:
      拥有一个自己的域名
      拥有Git基础知识(不懂没关系,跟着大伙走,学会Github即可)
      拥有一个GitHub账号
      一款心仪的jekyll模板
      html & css(选择器是基本技能)
      耐心、心如止水
      如果以上的都没有,我们 可以按照顺序来,文章如有粗俗的例子,请见谅
      一、 域名
      首先我们要先理解域名的作用,我们浏览器之所以能搜索不同的网站,都是通过域名来让别人访问的,一个简单通俗的例子:我网购了一件商品,快递员需要知道我家的地址才能给我送快来,而这个地址就是我们的域名。
      注册域名也很简单,这里以腾讯云为例,通过菜单找到域名注册



      然后搜索一个你喜欢的域名,查询下是否以被注册,域名的话建议使用英文,如果我们要往下走,必须选择英文域名,此处为了做教程,我选了个很霸气的域名(反面教材)



      这里腾讯会像一个贴心小棉袄一样问你价格是否接受得了,接受不了就换一个后缀吧,接下发挥你网购买买买的能力



      购买完成后一般会有提示框让你去查看自己的订单,没的话通过 导航-费用-我的订单 进入即可。



      找到域名管理,进入域名管理的控制台。



      到下面这一步可能会提示需要实名认证,这里不存在一个人只能注册购买一个域名的问题,当然不实名也能继续用,只是有些操作会被限制。



      域名到这里就先暂告一段落,后面将会用到操作中的-解析
      二、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的文档,不懂的多去搜索,网上资料挺多的
      Jekyll目录结构:https://www.jekyll.com.cn/docs/structure/
      而我,也搭建(copy)了一个属于自己的临时博客【 一个前端打字员的网站】,各位渣油!!
    学建站、学推广、学赚钱,上56站长论坛就够了!个性签名请到个人资料里面修改……

    本版积分规则

    关闭

    推56站长论坛推荐上一条 /3 下一条

    站长QQ
    在线咨询
    咨询热线
    QQ:405327411
    站长

    QQ|广告合作|关于我们|联系我们|免责声明|网站导航|站长论坛 ( 豫ICP备11018337号-5

    王宝臣旗下网站 推56论坛(www.tui56.com|ask.tui56.com|blog.tui56.com|daohang.tui56.com)

    Powered by Discuz! X3.4 Licensed

    ©2001-2013 Comsenz Inc.

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