个人网站开发Github+GithubPage+Node+Hexo

——论一个妹子环境配置的辛酸历程

前:

  • 首先,我是一个很尊重版权的善良妹子,以下借鉴内容以及帮助的人,我会尽力带原文链接标记出处,感谢他们。

  • 其次,请允许我吐槽一下,自己在电脑配置方面真的是小白。在疯狂的推倒重置的过程中,真的深感,我心好塞,真塞,超级塞。环境配置简直就是苦瓜一样的存在,你觉得苦,没错,还是很苦,但是你架不住人家有益健康啊,默默擦泪ing。在这篇文章中,可能会有点长,但是我会尽力步骤分明标题目的清晰,所以该跳过的可以直接跳过,不介意的可以看看,顺便可以交流交流。

  • 最后,我建议各个站点提出问题的小伙伴们,提出问题旨在请求别人的帮助,同时也能够给后来遇见同样问题的小伙伴一个先导。故而,如果你在别人回答问题之前,自己已经解决问题的小哥哥们,请一定记得把你的解决方法回答在你的问题下面,这样我会觉得你更帅的!如果你只是说了一句,已经解决了。小哥哥,你是想让我约你小树林吗?

写文习惯:

  • 为避免影响思路,我会把正确的流程汇总之后再填坑。

  • 如果愿意多踩几脚坑的朋友,可以多折腾一下,有益无害,没有坑就没有路,说不定你的坑填好之后就是后来者的路了,我们要善于做一个铺路的人,哈哈哈,说的我自己都信以为真了。

  • 已经踩坑的同志别着急,下文有解释,如果下文的解释非你所要,还是不要着急,度娘和谷歌比我厉害,如果依然没有,也还是不要着急,大不了重头再来,我们依然是好汉。我的一个技术总监曾经和我说过,如果环境上有你无论如何都解决不了的问题,那么有必要的话,就把环境重置到最简单,然后一步一步开始。

开发目的:

  • 开发一个属于自己的个人网站。Yes,我走的坑,你依然可以再走一遍,哈哈哈哈哈哈哈哈

开发进度:

  • 从阿里云千辛万苦买下域名,此外什么都没有。Right,我除了钱,一无所有。

配置环境:

  1. 电脑本地配置:Git+Node+Hexo

  2. 线上资源配置:Github+GithubPage+阿里云

开发思路:

  • 我比较喜欢先总后分。妈妈说,要时刻把握大方向。

  1. 我们需要先在github上面建一个存放自己个人网站的项目库,well,这其实是github在帮我们代理

  2. 已经有人帮你代理项目库了,但是你需要一个链接能够访问,then,你要想办法让github pages帮助提供一个和你有关系的链接咯

  3. 将hexo开发的本地项目部署到github上面你的项目库,next,访问github pages配置的链接可以看见你的项目

  4. Lastly,要将github pages提供的链接和自己的域名绑定在一起,然后你的域名就可以被访问了

开发步骤:

  1. 第一步,在github创建一个仓库。

    • 请登陆你的真爱github
      new repository

    • 创建个人仓库,注意命名时,建议与自己github账号名一样,比如:huooo.github.io。此处有坑1
      create repository

    • 创建完成会先跳到这个页面,你可以选择先创建一个README文件,这是github一贯推荐。不强求,可随意,此处不具体说明README文件。
      README

    • 注意此时的浏览器url,已经跳转到你在github下的repository地址。开发思路的第一步到此完成,下一步就要需要设置github pages下的域名,即让你现在的url: http://www.github.com/Huooo/h... 变成 http://huooo.github.io
      repository url

  2. 第二步,部署github上的个人域名,注意这里只是github pages提供的访问github上个人项目的域名。不是在阿里云购买的域名。

    • 在Setting->Options->Github Pages中可以查看,你的站点已经发布在 https://huooo.github.io上面。
      Github PagesGithub Pages

    • 现在访问这个网址,其实就可以看见你刚刚写的那个README文件里面的内容了。此处有坑2。开发思路的第二部已经完成,接下来就是用hexo部署一个有实际页面的个人网站。
      github pages

  3. 第三步,将hexo项目部署到仓库里面,让http://huooo.github.io可以访问。其实思路清晰的同学已经知道,这个hexo的部署,完全可以自己开发,但是作为一个前端还只是浅水区的我来说,我暂时开发不了后端操作不了数据库,而hexo严格来讲是静态页面的开发而不是借用数据库来部署网站,这个你可以去详细了解hexo的原理。

    • 配置SSH Key,使本地电脑能够连接github。Git安装不做陈述。

      • 先在Git命令行中检查是否有ssh key

           > cd /.ssh    // 如果提示 No such file or directory 那么就是没有
      • 配置ssh key

           >  ssh-keygen -t rsa -C "***@gmail.com"   // 这个邮箱,请使用github账号绑定的邮箱。然后会提醒你.ssh存储路径,直接回车;提醒输入密码,可输入可不输入,之后回车;确认密码,之后回车,完成本地密钥配置*
      • 将SSH Key添加到github上面,先在本地找到'.ssh/id_rsa.pub'文件,就在上一步中的存储路径之中,一般都会在C:/Users/用户名/.ssh/id_rsa.pub。然后去github的个人设置中:Setting->SSH and GPG keys->New SSH key,将id_rsa.pub的内容拷贝到key里面,并点击Add SSH key即可。

      • 检查配置是否成功,并配置账号和邮箱。打开Git命令行。

        > ssh -T git@github.com                             // 如果是下图的反应,则配置成功

        git

        > git config --global user.name "Huooo"             // 配置github账号
        > git config --global user.email "***@gmail.com"    // 配置github绑定的邮箱
    • node安装和淘宝镜像不做陈述。安装hexo环境。运行cmd。

      • 先在全局安装hexo

           > cnpm install -g hexo-cli 
           > cnpm hexo --save
      • 进入放项目的文件夹。

           > mkdir huooo         // 先新建一个文件夹
           > hexo init huooo     // 将这个文件夹初始化成hexo项目
           > cd huooo            // 进入这个文件夹
           > cnpm install        // 安装依赖
           > hexo g              // 对huooo进行初始化,在本地生成Public静态文件夹
           > hexo s              // 启动huooo项目
      • 然后会提醒你,hexo is running at http://localhost:4000/ 你可以在浏览器中查看你构建的hexo项目

    • 修改hexo项目huooo中的_config.yml文件,将Deployment部分内容填充完整。此处坑3

      • config

      • config

    • cmd命令,在huooo文件下将修改过的配置重新部署到github上面。

           > cnpm install hexo-deployer-git --save
           > hexo clean
           > hexo g
           > hexo d
    • 至此,第三步已经完成。现在可以通过访问http://huooo.github.io看见hexo的模板网页了。目录结构现在已经可以看见了。
      图片描述

  4. 现在,只需要将http://huooo.github.io绑定到阿里云域名www.cicihu.com上面即可。

    • 先给个人域名添加域名解析。

      • 先在阿里云上面登录->控制台->域名与网站->域名,OK,现在找到你的那个域名,点击解析。进入解析设置页面。

      • 添加两条解析。
        dns

    • 在github的项目中点击Create new file。OK,现在需要建立CNAME文件,并添加个人域名进CNAME文件,注意写法,域名.域名后缀,即可,不需要http://www
      CNAME

    • 这时再回到项目的Settings->Options->Github Pages查看,custom domain已经存在了。
      custom domain

    • 现在,个人网站的初始化配置就完成了,至于美化维护部分,就要多研究hexo了。

填坑之路:

  1. 坑1

    • 此处的命名规则,Github Help里面有给详细说明。参见User, Organization, and Project Pages

    • 由于我不是一次顺利完成所有配置,所以一定存在推到重置的过程,坑就在这里。如果一切清空从来,此处的命名,依然要和第一次的命名相同,我也解释不了为什么,Github Pages只认定你的github账户名来配置你的Github Pages域名去访问你的repository。如果第二次不按照github账户命名,那么你的项目将会被配置成http://huooo.github.io/新名字,是的,就是这么霸道,抗议无效。同时我还用朋友的账号做测试,如果我在某人A的github上面建立huooo.github.io项目,那么这个项目的Github Pages设置默认为http://A.github.io/huooo.gith...,即使那个人根本没有建A.github.io项目,Github Pages也会给每个人都分配好。所以,我们还是好好遵守吧,也欢迎阅读原网站文档,来一起交流。

    • 说到这里就不能不说起segmentfault上提问的小伙伴,问完之后,估计是自己最后捯饬出来了,然后就说了一句已经解决了,就没了,没了,了。我当时是多么想打电话问问啊。

  2. 坑2

    • 由于配置好几次,这里的坑,具体的问题我陈述不清了,大致的问题是在二次配置中或修改文件时,如果发现结果和预期不一样,但是思路上市正确的,可能是浏览器缓存的原因。

  3. 坑3

    • 这里也是。一定要仔细阅读官方文档,Hexo的官方文档中对于Deployment的配置还是很严格的,空格什么的一定要正确。我当时还有点代码强迫症,喜欢一切向左看齐,但是在hexo部署到github上时就总是不成功。

  4. 大部分需要注意和需要解释的在上面有陈述,此处填坑也没什么了。

后:

  • 最要感谢严振杰的配置文章,虽然他没有部署hexo这一步,但是我第一次配置是跟着他走的,所以也有了后面二次配置的问题存在,然后才知道答案。还有强大的度娘和谷歌和走过坑的小伙伴们,我是跟随你们一路走过来的,哈哈哈哈哈哈哈哈哈。

  • 虽然所有路径都已配通。可以访问,但是由于我最近有另一个项目学习,因此http://www.cicihu.com访问的还是默认的模板,而且,我对于改版会自己的想法,所以个人网站暂时不能立刻美化维护,还请见谅。但是看见这篇文章需要开发个人网站的小伙伴可以继续开发,欢迎把你们的个人网站留下,爱分享的你一定是最美最帅的。

  • 对于我这个浅水区的小鱼,还有很多需要学习和改正的地方,我可以接受所有的支持也可以接受所有的指正,还请不吝赐教。

  • segmentfault的markdown编写真的很赞,很赞。但是图片上传功能,真的是醉了,醉了。


——好记性不如难笔头。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值