github+hexo搭建个人主页
作为技术人员,谁不曾想过有一个属于自己的网站。但因为种种原因(没时间、没技术、没钱…),往往只是想想。现在,一套完整的解决方案来帮助彷徨的你实现梦想~
在下以前也尝试过搭建个人主页,前端+后端+服务器+域名,等这些都弄过一遍后,发现系统设计的太挫没有使用的欲望,也没有写博客的欲望。某天突然醒悟了,别搞那些花里胡哨的,好好找个现成的工具能搭建自己的网站就行,我都能想到,别人肯定早做出来了。
hexo,快速、简洁且高效的博客框架。hexo快速搭建博客(不写代码),基本无缝接入自己的md文档,配合github,服务器和域名也有了。
- macOS Sierra
- github
- git
- nodejs
- hexo
github个人主页创建
新建仓库
我的github用户名是acupt,新建仓库,名为 acupt.github.io, git地址为 git@github.com:acupt/acupt.github.io.git
github给你的个人主页地址为 https://acupt.github.io
修改主页
访问主页地址将展示根目录下的index.html,如果没有的话展示README.md,也没有?告辞!
这时候可以在index.html里面写主页代码了,不想写的继续往下。
hexo搭建个人主页
安装hexo
准备工作,请自行安装
- nodejs
- git
开始安装hexo,新建一个文件夹并进入它
1 | npm install hexo-cli -g |
启动hexo
1 | hexo g # 生成文件,同 hexo generate |
启动成功后在浏览器访问 http://localhost:4000
写文章
主目录下执行命令可新建一个md文件,也可以自己新建到source/_posts目录下
1 | hexo new "文件名" #新建文章 |
修改主题
如果默认模板就能满足,此步骤可以跳过,但不找个酷炫的模板还怎么zhuangbility。
下载主题
先找到你想象中的滑板鞋( 官方模板库 ),克隆模板到hexo的themes目录下。
1 | # 我好不容易找到的酷炫模板 |
但这个项目名不太友好,克隆成功后需要把文件夹重命名为模板名。
1 | mv hexo-theme-Mic_Theme miccall |
主题模板配置
编辑hexo主目录下的_config.yml,修改theme参数为新的主题名miccall
1 | # Extensions |
修改模板的配置文件,在模板文件夹内也有个_config.yml,和hexo主目录下的_config.yml负责的东西不一样,hexo的配置管通用属性,模板的配置管个性参数,模板的项目首页一般都有配置教程。
模板可能有些地方不符合自己的需求,如果没法配置的话,除了给作者提issue,还可以自己改模板代码(反正代码在本地,可以为所欲为),比如我把这个模板的group(团队)布局用来展示自己的作品,那我就不需要QQ微信微博,只要个链接就行了,看文档没有相关参数隐藏,去代码里搜索了下,注释掉了那几行代码。
重启服务
如果之前启动着,Ctrl+C关闭,后台运行的就kill掉。
1 | hexo clean # 清除缓存,会删除主目录下的public目录和数据库数据 |
hexo发布个人主页到github
编辑hexo主目录下的_config.yml,修改deploy配置
1 | # Deployment |
此配置表示用部署到git上,不过需要再安装一个插件。
1 | npm install hexo-deployer-git --save |
发布
1 | hexo g |
访问自己的github个人页面(如 https://acupt.github.io/ ),查看效果。
感谢miccall@github提供的酷炫模板,https://github.com/miccall/hexo-theme-Mic_Theme
技术性改进
虽然这个主题很酷炫,但不可能每一点都如我所愿,如果主题作者未提供可配置选项,就需要对模板源代码做些改动。
先去主题项目的github主页fork一份到自己的github,再clone到本地。
links布局配置可选
此主题的团队页面布局我很喜欢,但我并没有小伙伴想贴上去,那就做成作品展示页面好了。但是这个布局设计之初是为了展示人,所以有QQ、微信等信息配置,但我只想要一个‘链接’属性,其它的显示出来有点碍事。
IDE打开本地代码,全局搜索,就用属性名做关键词,果断在一个page-links.ejs文件中发现。
1 | <ul class="social"> |
网上查一下语法,加个if判断。
1 | <ul class="social"> |
妥了
https站内访问http资源受限
部署到github后第二天发现我酷炫的作品展示页面不再酷炫了,样式有点诡异,打开调试界面
显然最上面那两个异常是问题所在(下面那个异常没影响,有空再研究)
https协议的网站如果用http访问外部资源,往往会收到这种限制,这种情况最好统一一下,大家用同样的协议即可,显然我不能改github的协议,那只能改主题代码了
还是一波全局搜索,还是那个文件
1 | <link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> |
改成https即可,但可以再优雅点
1 | <link href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> |
发布,验证,搞定,顺便提了个pull request。
氪金项目:绑定自己的域名
友情提示:到了这步,再往下就需要氪金了。。。
虽然博客已经可以用了,但毕竟是个二级域名(acupt.github.io),如果想让自己的博客更有逼格,可以绑定一个自己的域名。
域名一般在阿里云或者腾讯云就可以买,比较方便,而且因为github服务器在国外,可以直接解析你的域名到github页面,无须备案。如果是自己买的国内服务器,那么想绑定域名则需要备案(在哪买服务器在哪备案),比较麻烦。
- 购买域名:国内玩家首选 阿里云
- 配置域名解析:购买域名后进入阿里云控制台,添加域名解析,记录类型选择CNAME,记录值为你的博客地址(acupt.github.io)
- 添加CNAME文件:在acupt.github.io仓库根目录添加一个文件CNAME(没有扩展名),内容是你的域名:
参考 我的
1 | acupt.cn |
我配置了两个域名,一个主域名acupt.cn,一个大家比较熟悉的www.acupt.cn(最后还是被重定向到主域名了),如果访问acupt.github.io也会被重定向到acupt.cn。
HTTPS支持:使用自己的域名后一般会变成http访问,因为你没有SSL证书。这个也是可以支持的,但由于我没操作过,就不写了。但我的网站仍然是https,为何?一开始我的绑定域名后是http,过了一两天有一个页面访问时被重定向成https,令人困惑。又过了几天,全部都是https了。。。网上没找到太多资料,似乎这是github一个没完全开放的功能?
氪金项目:使用自己的服务器
不氪金,你怎么变强?
github虽好,速度是硬伤,如果想自己的博客访问速度更快,拥有一台服务器很重要。
当然开源中国的码云也提供了个人主页功能,速度虽然快点,但限制颇多,比如绑定自己的域名也要收钱(是的,还要再给开源中国钱,这钱买个服务器岂不快哉)。
推荐几个云服务器选择:
- 亚马逊:国外的公司,网站不太服务国人习惯,而且反馈问题一般要用英文,不太方便。
亚马逊可以薅羊毛,新用户绑定信用卡后有个最低级的云服务器一年使用权,注意要信用卡。当初搞了个一年的服务器,因为在国外,就趁机搭建了一个翻墙服务器爽了几天。
薅羊毛注意:一年到期不会自动消失,会开始扣费(信用卡),注意提前关闭,或者留意官方的英文提醒邮件,不然。。。(我想静静) - 腾讯云:用过,没啥毛病,每天参与秒杀,运气好可以抢到很便宜而且性能不错的服务器。
- 阿里云:依然是国内玩家首选,
腾讯云和阿里云都有针对学生党的优惠,月租很便宜,相当于一个视频会员,社会人也没关系,新人也是有优惠的,不是新人?都是老相识了该氪就氪吧~
The End
这篇帖子是2018年写的了,今天(2019-08-02)我又翻出来编bian辑shi了一下。所以我的博客其实已经换了个低调的主题了(时间会使人成熟)。
改进项目:
- 新增域名绑定
- 新增两项氪金项目
维护博客是一件长期的事,把它当成一件爱好,或者一个目标,可以更好的坚持下去。欢迎关注我,一起交流如何把博客做的更好。