我的博客是如何搭建的(github pages + HEXO + 域名绑定)

博客搭建好之后,貌似很久没有写文章了,现在就来分享一下我搭建博客的艰苦行程和一些莫名其妙的坑。

ps:本博客是在MAC环境下进行搭建的,并且对github pages和一些shell脚本知识有所了解。

警告警告:

由于xiaopingblog.cn这个域名没续费,已经被人整成视频网站了,请访问我的github原始地址。http://biggercoffee.github.io,如果之前有访问过'xiaopingblog.cn'这个域名,那么访问'http://biggercoffee.github.io'的时候会自动跳转到'视频网站'里,清理一下缓存即可。

首先简单描述一下搭建的大体流程吧(其实挺简单的,只是体力活费时而已):

  1. 拥有一个github pages
  2. 在本地电脑里配置hexo的环境。( hexogithub pages绑定,写博文修改博文等,生成静态博客并push to github。)
  3. 绑定自己的域名(也可以不用绑定,github pages有二级域名,只不过绑定了一个属于自己的域名更有逼格点儿。)

Github Pages (第一步)

Github Pages免费的静态站点,其特点:免费托管、自带主题、支持自制页面等。

创建Github Pages比较简单,只要你有一个github账号在创建一个仓库就行了,但是这个仓库是有规则的,其格式必须为:yourusername.github.io。然后根据提示一直下一步即可,非常简单。

image

作为一个开发者,要是连一个github账号都没有,那你可以洗洗睡了。

而仓库命名格式中的yourusername是你的github用户名。笔者的github用户名是biggercoffee。所以仓库命名格式则是biggercoffee.github.io

由于笔者有biggercoffee.github.io这个仓库,所以我上述效果图提示已存在。纯属作为演示。

Hexo (第二步)

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。

安装

Hexo的安装网上有很多教程,但很多都很蛋疼且过期技术,所以最好的还是参考Hexo官方的安装教程来一步一步走。在此笔者也不写详细教程了,因为可能不出2个月就坑了小伙伴们。中文版Hexo文档点此进行传送。。。

本地环境说白了就是要有GitNode.js环境即可。详情参见官网文档为准,也最好参考官网,避免入坑。

建站

Hexo安装好了之后,就开始进行建站。打开终端cd到桌面并使用如下命令即可建好

hexo init yourname
cd yourname
npm install

其中yourname是你的文件夹名字可随意取(本文章假设yourname的文件夹名称是Hexo)。
建站好了之后需要了解更多的信息和其他步骤请参考官网的这篇文档。https://hexo.io/zh-cn/docs/setup.html

这里需要特别提一下,官方的文档里并没讲解如何配置与Github pages进行关联,在此特意说一下配置信息。进入到你的站点(使用hexo init yourname命令时,这里的yourname文件夹目录,刚假设yourname是Hexo,所以我们进入Hexo目录),然后以文本编辑器打开_config.yml文件,并滚动到最下面添加如下配置信息(注意最下边有deploytype字段,覆盖这两个字段或者删除这两个字段然后复制下面的四个字段也行。):

deploy:
type: git
repo: https://github.com/biggercoffee/biggercoffee.github.io.git
branch: master

把其中repo字段的值替换成你的github pages提交代码的git地址。

别告诉我你不知道你的github pages的git提交地址。。。
好吧,我还是附上一张截图吧,进入到你的github刚创建好的那个github pages仓库就能看到了。

image

好吧,到此你使用终端,然后进入到你的站点文件夹使用hexo s命令,如果成功会打印类似Hexo is running at http://localhost:4000/. Press Ctrl+C to stop的一句话,再打开你的浏览器输入localhost:4000地址见证神奇的一刻吧。

发布

当然这只是本地跑起来了,而你的github pages服务器上并没有,所以你就需要在你的站点里使用终端命令进行发布:

hexo clean
hexo g
hexo d

命令详解,第一条是清楚缓存,第二条命令是生成本地发布文件夹,第三条命令才是最后的发布到github pages上。更多的hexo命令操作请参考官方文档即可。不过一般用来用去无非就是创建页面、发布这么几条命令而已。Hexo官方命令参考文档

其实学习一个新东西有事没事多去官方看文档,比在网上查资料要来的更靠谱的多。

HEXO主题

如果你到了这里没有任何问题,那么恭喜你已经成功了,不过这才刚刚开始。
当你成功的看到自己博客搭建好的那一刻又是激动又是失望,激动的是博客总算折腾出来了,失望的是,为何如此的丑。。。说实话Hexo默认的主题自我感觉还过得去,如果你想换风格,Hexo的主题网上随便一搜也有很多。在此笔者使用的博客主题是Next(国人写的)。https://github.com/iissnan/hexo-theme-next

Next文档已经写得很详细了(上述链接里有文档地址),笔者在此也没啥要写的。只不过弱弱的吐槽一下,配置这东西需要注册的账号挺多的。。。但扩展性很强,需要什么功能自己去配置一下即可。

域名绑定(第三步,可选)

笔者是在万网买的域名(http://xiaopingblog.cn/)。 域名买好之后提交实名认证等,这些操作就不在赘述。域名购买地址https://wanwang.aliyun.com/

这里需要特别提一下的就是万网如何与github pages进行绑定,首先假设你有一个域名并且是可用状态。修改你域名的DNS地址为 f1g1ns1.dnspod.netf1g1ns2.dnspod.net

image

然后在你的本地站点目录里的source目录下添加一个CNAME文件,不带后缀,效果如下

image

以文本编辑器打开CNAME,里面添加你的域名信息(不加http://) 如下图

image

填写完了之后再重新部署到github pages上(部署简写命令hexo d -g)

下一步注册DNSpod,然后添加域名,添加记录即可。

添加域名填写你的域名即可,老规矩不用添加http://,然后在点击你的域名点进去在添加记录即可(其中记录中CHAME的值是你的github pages的地址)。

image

那么现在把你本地的Hexo生成一下在提交到Github pages上吧(生成和提交简写命令hexo d -g),然后打开你的浏览器输入你购买的域名尝试吧。笔者的博客域名:http://xiaopingblog.cn/ 大家尽情的去蹂躏吧。

ps:万网DNS地址更换貌似需要一段时间才能生效,如果不能访问请晚点或者隔天再访问域名,如果还是不行可能就是出问题了。反正笔者当时运气好,修改了万网DNS之后即时生效。

笔者分享

分享一些笔者用Hexo写文章的tips

文章管理

一般笔者写文章、修改文章是在本地可视化写文章,然后在使用命令提交上去。笔者使用的是一个hexo可视化文章管理的插件(hey),地址:https://github.com/nihgwu/hexo-hey

当然也有一个Hexoadmin插件,但是那个插件不支持图片拖拽进来,所以笔者推荐使用hey。安装和使用详情,参见笔者给出的github地址。

shell脚本自动化(可忽略,只是一个想法)

开启Hexo的本地服务或者提交到github pages这些都是一些终端里的Hexo命令,所以笔者写了一些shell脚本,来简化这些操作。所以基本就是用hey可视化写文章,写好了之后,然后点击一键部署shell脚本,然后就自动发布了(当然这也纯属鸡助,看个人。)。由于shell脚本比较简单,随意网上搜索资料一大堆。再加上笔者自己写的脚本代码也没上传,在此插入一个一键部署的shell脚本代码

cd Desktop/Hexo
hexo clean
hexo g
hexo d

cd到自己的站点目录,然后直接使用hexo命令即可。shell脚本自动化操作就是封装了这些命令而已,在此也只是提供这么一个想法,既然我们都是coder,何不善用自己已有的知识尼。

写到最后

github pages虽然免费,但毕竟是国外的服务器,国内访问可以稍微缓慢,如果是土豪,可去买一个支持Node.js的国内云空间即可。总之github pages + hexo搭建博客还是挺能折腾人的。但毕竟免费,而且身为技术人员不就是该具备折腾的精神吗?(博客地址点此)

反馈问题

具反馈hexo d部署的时候出现了not found问题,如果遇上这问题先输入npm install hexo-deployer-git --save命令,然后在运行hexo d部署尝试。(在这里感谢@LeoLeoHan给出的解决方案)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,233评论 4 360
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,013评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,030评论 0 241
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,827评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,221评论 3 286
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,542评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,814评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,513评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,225评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,497评论 2 244
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,998评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,342评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,986评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,055评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,812评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,560评论 2 271
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,461评论 2 266

推荐阅读更多精彩内容