我的网站开发Github+GithubPage+Node+Hexo

时间 2019-11-06

标签我的网站开发 github+githubpage+node+hexo github githubpage node hexo 栏目网站开发繁體版

原文原文链接

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

前：

首先，我是一个很尊重版权的善良妹子，如下借鉴内容以及帮助的人，我会尽力带原文连接标记出处，感谢他们。前端
其次，请容许我吐槽一下，本身在电脑配置方面真的是小白。在疯狂的推倒重置的过程当中，真的深感，我心好塞，真塞，超级塞。环境配置简直就是苦瓜同样的存在，你以为苦，没错，仍是很苦，可是你架不住人家有益健康啊，默默擦泪ing。在这篇文章中，可能会有点长，可是我会尽力步骤分明标题目的清晰，因此该跳过的能够直接跳过，不介意的能够看看，顺即可以交流交流。node
最后，我建议各个站点提出问题的小伙伴们，提出问题旨在请求别人的帮助，同时也可以给后来碰见一样问题的小伙伴一个先导。故而，若是你在别人回答问题以前，本身已经解决问题的小哥哥们，请必定记得把你的解决方法回答在你的问题下面，这样我会以为你更帅的！若是你只是说了一句，已经解决了。小哥哥，你是想让我约你小树林吗？git

写文习惯：

为避免影响思路，我会把正确的流程汇总以后再填坑。github
若是愿意多踩几脚坑的朋友，能够多折腾一下，有益无害，没有坑就没有路，说不定你的坑填好以后就是后来者的路了，咱们要善于作一个铺路的人，哈哈哈，说的我本身都信觉得真了。数据库
已经踩坑的同志别着急，下文有解释，若是下文的解释非你所要，仍是不要着急，度娘和谷歌比我厉害，若是依然没有，也仍是不要着急，大不了重头再来，咱们依然是好汉。个人一个技术总监曾经和我说过，若是环境上有你不管如何都解决不了的问题，那么有必要的话，就把环境重置到最简单，而后一步一步开始。npm

开发目的：

开发一个属于本身的我的网站。Yes，我走的坑，你依然能够再走一遍，哈哈哈哈哈哈哈哈segmentfault

开发进度：

从阿里云千辛万苦买下域名，此外什么都没有。Right，我除了钱，一无全部。后端

配置环境：

电脑本地配置：Git+Node+Hexo浏览器
线上资源配置：Github+GithubPage+阿里云缓存

开发思路：

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

咱们须要先在github上面建一个存放本身我的网站的项目库，well，这实际上是github在帮咱们代理
已经有人帮你代理项目库了，可是你须要一个连接可以访问，then，你要想办法让github pages帮助提供一个和你有关系的连接咯
将hexo开发的本地项目部署到github上面你的项目库，next，访问github pages配置的连接能够看见你的项目
Lastly，要将github pages提供的连接和本身的域名绑定在一块儿，而后你的域名就能够被访问了

开发步骤：

第一步，在github建立一个仓库。
- 请登录你的真爱github
- 建立我的仓库，注意命名时，建议与本身github帐号名同样，好比：huooo.github.io。此处有坑1
- 建立完成会先跳到这个页面，你能够选择先建立一个README文件，这是github一向推荐。不强求，可随意，此处不具体说明README文件。
- 注意此时的浏览器url，已经跳转到你在github下的repository地址。开发思路的第一步到此完成，下一步就要须要设置github pages下的域名，即让你如今的url: http://www.github.com/Huooo/h... 变成 http://huooo.github.io
第二步，部署github上的我的域名，注意这里只是github pages提供的访问github上我的项目的域名。不是在阿里云购买的域名。
- 在Setting->Options->Github Pages中能够查看，你的站点已经发布在 https://huooo.github.io上面。
- 如今访问这个网址，其实就能够看见你刚刚写的那个README文件里面的内容了。此处有坑2。开发思路的第二部已经完成，接下来就是用hexo部署一个有实际页面的我的网站。
第三步，将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 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。
- cmd命令，在huooo文件下将修改过的配置从新部署到github上面。
```
> cnpm install hexo-deployer-git --save
     > hexo clean
     > hexo g
     > hexo d
```
- 至此，第三步已经完成。如今能够经过访问http://huooo.github.io看见hexo的模板网页了。目录结构如今已经能够看见了。
如今，只须要将http://huooo.github.io绑定到阿里云域名www.cicihu.com上面便可。
- 先给我的域名添加域名解析。
  - 先在阿里云上面登陆->控制台->域名与网站->域名，OK，如今找到你的那个域名，点击解析。进入解析设置页面。
  - 添加两条解析。
- 在github的项目中点击Create new file。OK，如今须要创建CNAME文件，并添加我的域名进CNAME文件，注意写法，域名.域名后缀，便可，不须要http://www。
- 这时再回到项目的Settings->Options->Github Pages查看，custom domain已经存在了。
- 如今，我的网站的初始化配置就完成了，至于美化维护部分，就要多研究hexo了。

填坑之路：

坑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
- 因为配置好几回，这里的坑，具体的问题我陈述不清了，大体的问题是在二次配置中或修改文件时，若是发现结果和预期不同，可是思路上市正确的，多是浏览器缓存的缘由。
坑3
- 这里也是。必定要仔细阅读官方文档，Hexo的官方文档中对于Deployment的配置仍是很严格的，空格什么的必定要正确。我当时还有点代码强迫症，喜欢一切向左看齐，可是在hexo部署到github上时就老是不成功。
大部分须要注意和须要解释的在上面有陈述，此处填坑也没什么了。

后：

最要感谢严振杰的配置文章，虽然他没有部署hexo这一步，可是我第一次配置是跟着他走的，因此也有了后面二次配置的问题存在，而后才知道答案。还有强大的度娘和谷歌和走过坑的小伙伴们，我是跟随大家一路走过来的，哈哈哈哈哈哈哈哈哈。
虽然全部路径都已配通。能够访问，可是因为我最近有另外一个项目学习，所以http://www.cicihu.com访问的仍是默认的模板，并且，我对于改版会本身的想法，因此我的网站暂时不能马上美化维护，还请见谅。可是看见这篇文章须要开发我的网站的小伙伴能够继续开发，欢迎把大家的我的网站留下，爱分享的你必定是最美最帅的。
对于我这个浅水区的小鱼，还有不少须要学习和改正的地方，我能够接受全部的支持也能够接受全部的指正，还请不吝赐教。
segmentfault的markdown编写真的很赞，很赞。可是图片上传功能，真的是醉了，醉了。

——好记性不如难笔头。