专栏首页IMWeb前端团队新人如何搭建(copy)一个属于自己的博客

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

本文作者:IMWeb mmo 原文出处:IMWeb社区 未经同意,禁止转载

对于很多刚学前端的朋友们来说(比如我),在学习的过程中经常会记一些笔记,除了现实中的烂笔头,我们也可以在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模板,这里介绍两个不错的网站:jekyllthemesjekyll-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目录结构

而我,也搭建(copy)了一个属于自己的临时博客 一个前端打字员的网站,各位渣油!!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JavaScript强化教程——jQuery 核心

    本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍:JavaScript强化教程 —— jQuety

    IMWeb前端团队
  • Crosswalk携手深度操作系统发布15版本

    ? 深度操作系统是由英特尔开源技术中心创建的一个基于Blink/Chromium内核的开源HTML 5引擎,通过全方位的创新和优化提升HTML 5的体...

    IMWeb前端团队
  • Crosswalk携手深度操作系统发布15版本

    深度操作系统是由英特尔开源技术中心创建的一个基于Blink/Chromium内核的开源HTML 5引擎,通过全方位的创新和优化提升HTML 5的体验,可帮...

    IMWeb前端团队
  • 新人如何搭建(copy)一个属于自己的博客

    腾讯NEXT学位
  • 假如你的AR会说话

    相信很多人都看过这部电影《我,机器人》这部电影虽然讲的是机器人,但是其中也不乏近两年来流行的AI、AR等技术,影片其中有一段是男主找到了控制机器人的主脑,而这个...

    企鹅号小编
  • Monocle2 踩坑教程(1)

    拟时(pseudotime)分析,又称细胞轨迹(cell trajectory)分析,通过拟时分析可以推断出发育过程细胞的分化轨迹或细胞亚型的演化过程,在发育相...

    生信技能树jimmy
  • Python(一)安装Python、iP

    Operating System: Red Hat Enterprise Linux Server 7.0 Kernel: Linux 3.10.0-123.e...

    用户2398817
  • 棱镜资本陈俊宏:看好MyToken,长持MT!交易所Coineal是黑马!

    最近几天,MT的价格再度攀升,MT背后的独家发行机构棱镜资本合伙人陈俊宏昨日凌晨朋友圈继续力挺MT。半夜看到MT、SOC两条K线,立马约了一次访谈。后悔SOC下...

    区块链领域
  • 黑遍全世界,让全球互联网崩溃的美国前大学生认罪

    面对参与制造电脑病毒引起全世界互联网在2016年10月崩溃的指控,新泽西州罗格斯大学(Rutgers University)一名前学生星期三在特伦顿(Trent...

    企鹅号小编
  • mysql查看事件是否开启,设置启动时自动开启方法

    我们先开启mysql事件,通过动态参数修改:SET GLOBAL event_scheduler = ON; 还是要在/etc/mysql/mysql.con...

    吟风者

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动