美文网首页iOS管理ios工具大全
[干货]如何在一天之内搭建以你自己名字为域名且具备cool属性的

[干货]如何在一天之内搭建以你自己名字为域名且具备cool属性的

作者: wingjay | 来源:发表于2015-12-08 01:07 被阅读19303次

    对程序员而言,最好的简历就是个人博客和GitHub

    零、个人博客

    每个优秀的程序员都会有个人独占的一方网络空间,那里是他个人的舞台,听说过他的人会逐渐汇聚进来,认识他,熟悉他,鼓励他,赞扬他。而对他个人而言,他有了一个可以畅所欲言的小房间,他可以专研学术,聊聊情怀。同时和喜爱他的读者成为好友,共同成长。

    这难道不是一件很cool的事情吗?

    一、先看成果

    教方法前先来看看最终的效果吧。http://wingjay.com是本人搭建的个人博客,可作为模版参照,主要特性有以下几点:

    1. 个人域名: wingjay.com
    2. 无需购置服务器,本站同时挂载在Github Pages 和 GitCafe Pages上,免服务器费的同时还能做负载均衡,想想还有点小激动
    3. 在GitHub上同时管理你的博客和相应代码,再也不用担心博客遗失
    4. SSL支持,即"http://" -> "https://",更安全也更高大上
    

    二、再看兵器

    • 博客框架:Hexo 3,这是一款能快速、简洁且高效的博客框架,支持Markdown编辑,自动渲染出漂亮的静态页面。
    • 前端主题:Next,效果参考http://wingjay.com
    • 域名购买:类似万网的平台都可以,你可以选购自己名字的域名,一年几十元左右,两杯咖啡的钱。
    • SSL:CloudFlare

    三、抄起家伙

    本文写作方式是安装流程主线 + 优质参考文章。由于网络上关于Hexo搭建博客的教程玲琅满目,若读者完全自己动手则要一篇篇找,浪费时间走弯路;相反,若作者悉数摘抄进来,反倒未必符合各人情况,且不利阅读。

    所以,主线讲解思路,参考深入阅读。

    下文以搭建 http://wingjay.com 个人博客为例。

    1. GitHub Pages

    在不购买服务器的前提下,我们的网站需要挂在GitHub Pages上。

    1. 你需要拥有一个GitHub账号,去完成新手任务吧。
    2. 进入GitHub Pages,一步步做,完成后就能在浏览器打开http://wingjay.github.io了。

    至此,我们已经利用GitHub Pages搭建好了个人博客雏形了。下面要做的,就是个性化了。

    2. 安装Hexo博客框架

    经过上面步骤,我们已经拥有了一个初步域名:http://username.github.io 加一个免费网络空间了。好比房间有了,但还没有任何家具。所以下面我们需要把空白的博客丰富起来。

    放心,不需要你手写一大堆html、css文件,也不用找jQuery来实现酷炫的页面效果。Hexo是一款博客框架,它会帮我们搭建。

    i. 安装Hexo

    参考中文文档英文文档。完成该步后,你的电脑便拥有了Git、Node.js和Hexo。

    ii. GitHub管理

    为了让自己未来的博客和代码处在git管理之下,我们要把刚刚在Github上博客项目拉到本地。如本人创建的https://github.com/wingjay/wingjay.github.io,在本地创建文件夹,名字任意,此处设为myblog,进入该文件夹,把项目代码clone下来。

    git clone https://github.com/wingjay/wingjay.github.io
    

    好了,此时会自动在myblog目录下创建子文件夹wingjay.github.io,那里就是我们博客的代码,以后的操作都在git的管理之下了,此时默认的branch为master

    iii. 初始化Hexo

    请参考文档。init命令中的<folder>就是文件夹wingjay.github.io。初始化后,wingjay.github.io里面就已经有完整的Hexo框架了。

    iv. 熟悉Hexo

    为了让读者快速了解Hexo,我作几个简单介绍吧。当然,更多的还是需要仔细阅读文档才能了解更详细。

    Hexo目录结构
    • _config.yml是整体的配置文件,很多基础配置、插件配置等都需要在里面进行。要注意的是,该文件格式要求极为严格,缺少一个空格都会导致运行错误。小提示:不要用Tab缩进,用两个空格符。
    • layout,包括draft(草稿)、page(页面)、post(文章)。这个就是三种文件的基本格式,其中post是你发表的文章,会显示在你的网站里,一篇post会包括title标题、date日期、tags标签等信息;draft是草稿,只有你在本地能看到,必须要publish后才能成为post,draft和post差别是date,因为draft没有发表,所以不需要指定日期。page是一个页面,对应一个新的html页面,比如博客内容展示页是一个页面,留言本也是一个页面。
    • public文件夹,这个文件夹是最终会发布到网站上的真实内容。怎么理解呢?我们可以把public文件夹当作是真正的被用户看到的,而其他的source、themes等都是为public服务的。Hexo里有一个很重要的指令hexo generate,这个指令就是利用所有代码里的配置信息、source里写的文章、themes里的样式,共同生成最终的静态html文件,存入public文件夹内。在我们执行了发布指令hexo deploy后,就会把public的内容部署到GitHub Pages上。当用户在访问我们的博客时,他们会看到public里生成的html文件。这个概念非常重要,即代码和真实静态页面是独立的
    • generate和deploygenerate会把我们的配置、文章和主题结合起来生成一堆酷炫的html静态文件放在public里面。但此时用户还看不到本地public文件里的页面,我们必须用后一个指令deploy才能把静态文件部署到GitHub Pages上。不过,在部署前,需要配置让它自动部署到我们前面创建的Github项目中。
    • deploy相关配置。为了能够让项目自动把public文件夹的内容部署到GitHub项目中,我们可以按部署文档进行配置,其中选择的branchmaster。此后,每次运行deploy后,项目就会自动把public文件夹内容全部覆盖到当前的GitHub项目master分支上
    • 代码静态文件分开管理。根据上面知道,每次部署后,public文件内容会覆盖掉项目整个master分支。这样可以实现网站静态文件的版本控制,但是,仔细对比这个master分支,我们会发现里面只剩下静态文件了,我们的代码比如source、themes统统没有了,这就导致无法对代码进行版本管理了。这意味着我换一台电脑,我就再也找不到代码了,只剩下一堆之前编译出来的静态文件。所以,为了对代码也进行版本控制,我们创建一个新的分支:code,然后在这个分支里进行代码控制,master里则保存部署的新的静态文件。大家可以自行比对这两个branch的内容差异。

    v. 配置Hexo

    做一些基础配置即可,请参考配置文档

    vi. 小结

    到这里,我们已经完成了hexo的配置,我们可以分别管理代码和静态文件。执行deploy操作后,刷新你的网页 http://username.github.io 你就能看到默认的内容了。

    但此时还是默认主题,不够美观,所以下一步要配置Next主题。

    3. 配置主题Next

    Hexo主题非常多,可以参考丰富多彩的Hexo主题,本文选Next为主题,样式参考我的博客

    进入配置阶段,最好的文档还是官方文档,简单得不能再细致了。下面只提几点注意:

    • 第三方评论系统。评论系统很重要,你可以与读者进行更多交流,配置也简单,建议采用DISQUS,更国际化一点,配置见此。另外,前期建议开启不登陆评论,即在Disqus的Comment Rule里允许Guest comment
    • 创建留言板。熟悉page的创建与使用,参考这里
    • 给自己博客做SEO。有好的SEO便于搜索引擎索引你的网站,随着以后读者增多,他们可以更好搜索到你的网站。具体方法见此

    4. 替换自己的域名

    好了,经过上面的步骤,博客已经拥有了一个全新的主题啦。

    下面,我们要对域名 http://wingjay.github.io 下手啦。

    i. 购买域名

    速速前往万网或相关域名购买网站,按自己名字挑选一个闪闪发光的个人域名吧!

    ii. 域名解析_1

    以购买的域名wingjay.com为例,我们希望在访问这个域名时能自动进入Github Pages,所以我们要在万网建立一个CNAME纪录来帮我们做一个域名跳转:wingjay.com -> wingjay.github.iowww.wingjay.com -> wingjay.github.io。添加方法参考这里,添加后可以看到两条记录:

    域名解析
    然后万网会在世界各地的DNS服务器上添加这两条记录,当用户访问wingjay.com时会自动去访问wingjay.github.io

    iii. 域名解析_2

    但是,此时并不能成功访问,因为Github Pages是有限制的,它不允许任意域名都跳转过来,而是只限制一个域名,而且这个域名必须声明在CNAME文件中

    所以,我们需要添加一个CNAME文件到项目的master中才行,参考这里。读者可以参考本人的CNAME文件内容

    不过,对于Hexo 3这里有一个坑要注意:大家应该还记得上文说的,master分支里的内容都是自动生成的,而且会完全覆盖之前的内容。如果我们直接创建一个新文件CNAME,填好域名。但会发现在下一次部署后这个文件就消失了。不用惊讶,因为hexo并不会自动生成CNAME文件,所以在部署时被覆盖删除了。

    所以,我们就需要这个CNAME工具hexo-generator-cname,这时会自动在public里生成一个CNAME文件,把你的域名加进去再部署一下吧!

    5. HTTP -> HTTPS

    HTTPS是安全版的HTTP协议,它在http协议与TCP之间加入SSL层,采用端口443,不仅会对传输数据加密,还会进行身份验证。当然个人博客并没有强制性要求采用该协议,这也只是本人的好奇而为。

    目前Github Pages已经支持https了,但是不支持自定义证书。不过我们可以利用CloudFlare来实现。具体实现可以参考这里

    说明:po主网站的https正处在申请中

    四、总结

    经过上面的步骤,我们已经能够通过访问自己的域名进入自己酷炫的博客了。本文的任务也就告一段落。

    除了上面的功能,本人还完成了支持双域名同时登陆,其中,支持双域名的解决思路是考虑到Github Pages的CNAME纪录只允许添加一个域名,所以本人又在Gitcafe上部署了一套。不过考虑到这点大家不一定能用的上,就没有做介绍,有需要的话可以看下文的联系方式联系我。

    五、一天变cool系列文章

    如何在一天之内完成一款具备cool属性的Android产品<简诗>

    如何在一天之内搭建以你自己名字为域名且具备cool属性的个人博客

    谢谢!

    wingjay

    相关文章

      网友评论

      • SunnyLeong:请问作者,此方法还可以吗?打算试一下
        wingjay:@Silence_广 可以
      • lynch0571:已收录《千赞专题》,欢迎关注:http://www.jianshu.com/collection/032a478c3dbf
      • allen151:搭载成功了,同时我也做了一些搭建博客的笔记,http://allen.men
      • d7b72cd06091:您好!之前我已经部署好Github的博客,可是重新提交博文CNAME文件消失了。在网上搜到了您的文章,按照您给链接,npm install hexo-generator-cname --save,可是,下载出现警告。
        npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\chokidar\node_modules\fsevents):
        npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.1: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})。
        然后我输入hexo clean; hexo generate; hexo deploy。结果出现ERROR Deployer not found: git。我在网上查到了好几种方法,都不奏效。您知道这是为什么吗?谢谢
      • HappyJiuOk:谢谢 已加入SSL https://www.gaozn.top
      • 6494df96c4e2:哇想配几个图怎么整~ 用的默认的Muse
      • zhoutq:你好 可以转载吗
        zhoutq:@wingjay 👌
        wingjay:附上原文链接,可以
      • zhoutq:非常不错:kissing_heart:
      • a01017bede98:真是6
      • 张照博:虽然我还是喜欢服务器的动态交互,不过你这个也很棒啊
      • 富城:是不是别人把你的博客克隆下来,别人也能给你发表博客了
        富城:@wingjay 还是得再配置一遍啊
        富城:@wingjay 麻烦问一下,我想在另一台电脑上写博客,是不是就把自己的文件夹克隆下来,git clone https://github.com/wingjay/wingjay.github.io 就行了吗
        wingjay:@Gjianhao 不能,博客内容在我的GitHub上,别人push不上来
      • EightZERO:赞,根据你的文章,建好了自己的博客 http://eightzero.win/,谢了,你的渔 :smile:
        wingjay:@EightZER0 哈哈,恭喜!
      • SmNiuhe:了解啦
      • 若是如风:我是小白,没弄过博客。按你这个入门的话是复杂了,还是简单的
        wingjay:@张饼爷 应该是最简单的
      • ezsync小智:很有用。
      • 張無忌:建议把标题中的“一天之内”改为“一个小时之内”。
        wingjay:@揭翔 很多人一小时完不成吧
      • ea8725f0b076:想尝试自己做一个
      • EightZERO:你好,我每次CNAME都重新重置了,我按你的方法,添加到_config.ymal里面了
      • 570e37344076:好喜欢你网站的排版 好像弄一个
      • 69c45b3d5ede:博客建设
      • b62c71b9e364:写的不错的
      • 笨笨飞:好想搭一个作为给自己下一个生日的礼物
      • Micason:再弱弱的问下那个强力驱动怎么去除。 :wink:
        Micason:@iam_wingjay 好的
        wingjay:@Micason 之前回复过其他读者,你找找评论吧。
      • Micason:怎么添加了百度统计字段还是无法显示。
      • Micason:好详细
      • 947f4ff8a475:域名cname指向不要备案么
        947f4ff8a475: @iam_wingjay 额,好吧
        wingjay:@丶0921 看你在哪买的域名了,我的备案了
      • 下一站的上一站:激发了我的兴趣
      • 梓识梦见:好坏,把hexo的中文文档和英文文档的链接换了位置。
        正在逐步搭建中。
        梓识梦见:@iam_wingjay 成功搭建好了 换了几个主题玩 想买自己的服务器了
        wingjay:@梓识梦见 :smile:进展如何
      • fd32f97ab548:学一学
      • 狮女柔心_Nicole陶:不错的介绍
      • b28f1b2639bf:静态博客的写作体验极差,久了让人厌烦。从开始的WordPress到github,再到gitcafe,最后又回到了WordPress。不差每个月vps那几十块钱的朋友,还是自己搭建动态博客吧。写作体验更好,觉得WordPress太臃肿,对markdown支持不好的,有个 ghost博客系统 。
        wingjay:@luffyjet 是的, 我认为咱俩的讨论大致把动/静态博客的利弊说清楚了,这些可以供读者思考后挑选合适自己的 :smile:
        b28f1b2639bf:@iam_wingjay 嗯,楼主说的有道理,每月的服务费会让大都数人望而却步,国外的服务商稳定性差点,ping值偶尔过高。不过楼主部分观点我并不赞同。
        我指的写作体验差是 ,动态博客我 可以随时随地,任何终端去写作去编辑。
        PHP运行环境搭建 有很多 一键部署的脚本,比如阿里云的PHP环境脚本,你只需要输入数字和 yes or no 。有的vps服务商还提供了专门的WordPress环境,比如日本的conoha提供的kusanagi,只需按照说明输入简单的命令就能用上,比用hexo , jeklly搭建简单的多 。
        WordPress的主题也是非常多,也可以自定义 ,也能通过插件解决markdown支持。
        ghost是基于nodejs的开源博客 https://github.com/tryghost/ghost ,原生支持markdown , 部署ghost 也并不复杂 http://docs.ghostchina.com/zh/installation/。
        ps: gitcafe已经并入 coding.net ,即将关闭。
        wingjay:@luffyjet 我觉得各有利弊吧。动态博客利在于对博客内容有更好的自适应性,弊在于时间、搭建与维护精力及金钱开销(每月几十块服务器费,ghost也是收费的,或许这会让部分人失去兴趣);相反,静态博客则不需要太多搭建和维护精力,不需要花费服务器费,而且Github/gitcafe会帮你做负载均衡,更稳定安全(Github肯定不会经常挂吧,但个人搭建的话安全性就不够了),当然,弊在于内容的自适应性不够,不过支持markdown和多样的主题实际能满足很多人的需求。所以最后,因需而异。
      • 薛皓哲:我也是才搭建好 不过用的是octopress
      • Eugene_iOS:好👌
      • 焦峰:666
        wingjay:@焦峰 😄
      • 2578e3a1abce:我买了阿里云服务器,你可以按照这个条件在补充一下
      • 焦峰:明天就试试
      • qinfensky:网站底部的"强力驱动"是怎么去掉的?
        4588e4274830:@qinfensky 做ios. Html5也应该懂点哦
        qinfensky:@iam_wingjay 嗯,不错虽然看不懂,但是猜到了位置.哈哈哈,我做iOS的,HTML看不懂
        wingjay:@qinfensky 可以修改themes/next/layout/_partials/footer里对应的html代码
      • b86ffef9f3b9:什么时候会有 “如何在一天之内搭建具备cool属性的个人公众号”
        wingjay:@真的有这么丝滑嘛 误会了,原来是搭建公众号教程😅
        wingjay:@真的有这么丝滑嘛 😌公众号的内容呢?
        b86ffef9f3b9:是微信公众号 :joy:
      • 2b51ce0bbc30:费了一星期时间搭建好了我的博客,但是新建文章时不知道怎么加图片,并且不会格式化文章
      • Joy___:我的博客Ghost http://115.159.192.200/ 但是还没有域名 😄 也写了一个相关的教程
      • 65c03303668a:可以的
      • c50a398959dc:CNAME是否需要备案?
      • 73edd8357727:写得不明不白,前半段有点参考价值
        wingjay:@moonache 请问你觉得应该怎样写才算明白呢
      • dzgdp888:非常好
      • oldmonster:我更改了hexo的主题但是显示的还是最开始GitHub Pages新建的index.html,这个该怎么办
      • 667a69f9a9e1:啧啧 打算试试
      • zhangli:可以fork吗?
        zhangli: @iam_wingjay 谢谢
        wingjay:@zhangli 这个需要你创建一个新项目,不可fork。可参考本人项目https://github.com/wingjay
      • Wws:~
      • Wws:八错,整好需要:smile:
      • 4b5badab65fe:不错呀
      • wxiubin:Mark
      • 105508186361:mark一下
      • 24f0e7bdca4b:捷哥牛逼,膜拜ing,拜读一下 :smile:
        wingjay: @花悸丶莫浅忆 哇竟然有熟人?
      • 晓唦:赞一个
      • 8efa50d2b64f:大赞👍
      • 2a08f0901904:嗯在简书上看见博主的教程又手痒了,之前给女朋友过生日,买了个一年的域名(话说为什么买域名都是第一年超便宜然后续费就...),借了室友大神买的服务器,找的 HTML5 的模版最后搭出来个小网站😁,SAE 也有用过但是感觉限制太多用起来麻烦。有点不清楚博主说的`双域名同时登陆`指的是什么?
        wingjay:@布小白 对的!简书作为一个公共博客平台,读者多,可以发表一些有意思的文章与人分享。个人博客更私人一点,内容自由度更大。另外为了提高个人博客流量,我们可以将部分简书读者导向个人博客~
        2a08f0901904:@iam_wingjay 啊,GitHub 只给一个域名指向的名额,GitCafe 可以多个是吧?我也去搭自己的了,还是努力养成写东西的习惯吧。不知道博主怎么分配在不同的地方写的东西呢?比如简书和个人博客。
        wingjay:@布小白 好赞!双域名是我给我的网站同时配置了两个域名,都可以登录到我的博客上
      • hutou:不错,准备试一下
      • 杀死一只程序猿:我的虚拟主机常被攻击,真他妈的烦,试试po主的方法
      • b7b891f71f7b:谢谢up主 已搭建好~ 顺便提示一下 购买域名可以买一些space结尾的比较便宜而且有特色
        wingjay:@徐kk 恭喜!space后缀就怕读者易忘😄
      • 68ee37765ca5:楼主用的什么编辑器?挺漂亮的
        68ee37765ca5:@iam_wingjay 噢,喜欢:heart_eyes:,我也换个theme
        wingjay:@lpy sublime 加material themes就可以啦
      • b171b9760e21:nice,不知道小编知道wordpress吗,这种方法和wordpress最大的好处是什么?
        b171b9760e21: @iam_wingjay 奥奥
        wingjay:@柳下清明 这个是静态页面,更简单轻便点~
      • 7ea1c483b7c3:买了个域名 120 十年😁
        wingjay:@GranMagisterio 😁😁
      • 登陆时光我在:也相当于自己的记事本
      • 69d0c9b219a5:便宜的香港空间一年也就KFC全家桶左右
        杀死一只程序猿:@小强呀小强 注意小品牌商家的虚拟主机容易遭到恶意攻击,我半年被攻了两次,准备换一个大品牌下的免费服务器
        wingjay:@小强呀小强 但是要自己花时间搭后台哦
      • 91367498f652:应该试试
      • 萝卜爱青菜:很不错,打算照着你的路子试试 :smiley:
        wingjay:@萝卜爱青菜 😄😄
      • 786a430cf712:漂亮
        wingjay:@786a430cf712 谢谢😄
      • Fongo:mark
      • dc303e41ad89:照着步骤下来 部署总不行 新写的博客刷不出来
        wingjay:@FoolPermi 遇到什么问题呢,每一步都做了吗
      • 90ab9f1c9762:加油
        wingjay:@今生只做最后一世 嗯😄
      • 张B:mark的人百分之八十都不会再看,但我还是收藏了
        wingjay:@张B 👍👍
        张B:@iam_wingjay 感觉很快就需要了哈哈
        wingjay:@张B 需要用的时候想起来就行 :smile:
      • 臧文茹:好细致!!
        wingjay:@臧文茹 谢谢! :smile:
      • 我的未命名:大长见识
        wingjay:@我的未命名 :smile:
      • 罗若:厉害
        wingjay:@十六两围巾 :blush:
      • 猫哥学前班:mark ,感谢分享
      • 5f9a3b3db3e5:只是想保存一下
      • sagfugetabf:nmp install -g hexo-cli 一直失败。我试着设置nmp config set registry http://registry.cnpmjs.org ,但是还是失败。请问是要翻出去才可以吗?求帮助
        wingjay:@AlvinChe 我一直用的shadowsocks,比较稳定
        sagfugetabf: @iam_wingjay 能推荐一个工具吗?自从红杏挂了,就没过顺心的
        wingjay:@AlvinChe 我一直翻墙呢,可以顺利安装
      • NXAristotle:喜欢,收藏了,正好有用
      • 临川人:好东西。我正在找这方面的学习资料。谢谢。
        wingjay:@临川人 没事 :smile:
      • 嗲走:Mark,有时间自己试试
        wingjay:@嗲走 是的👍
      • 3f3eb1c4f452:文科生顶着一头雾水默默走过。。。
        wingjay:@亦昕 :joy: :joy:
      • ccf147e481ed:好棒!我也要做一个这样的网站!
        wingjay:@誰痴 只要开始动手,问题就能慢慢迎刃而解
        ccf147e481ed:@誰痴 可惜小白一个啊!啥也不会。。
        wingjay:@誰痴 谢谢 快去动手吧 :smile:
      • b6fa1f035706:太棒!
        wingjay:@咸鱼超市 谢谢 :smile:
      • 大雄不爱吃肉:太棒了
        wingjay:@dxmz 谢谢 :smile:
      • 18ce9f6925e6:有弄一个玩玩的想法了😊
        wingjay:@Agurona 快去试试吧 :smiley:
      • 深默云泊:我的http://92u.github.io/ 不换域名也挺好的
        wingjay:@九月末央 嗯,也是可以的 :smirk:
      • kuai空调:腻害!
        wingjay:@飞烟灰灭 :smile:
      • 0a814e9d3453:高端…
      • 萍水相逢hu:一直在找
        wingjay:@萍水相逢hu 有用就好 :blush:
      • 小猪刘健华:曾经我用Tap 建了自己的博客网站,用了免费的tk域名…现在Tap倒闭了…
        wingjay:@小猪刘健华 那就用Hexo来试试吧!

      本文标题:[干货]如何在一天之内搭建以你自己名字为域名且具备cool属性的

      本文链接:https://www.haomeiwen.com/subject/btjehttx.html